Ajuste de textos con CSS

Ajuste de textos con CSS

Ajustes de textos con CSS

Una vez elegidas las familias de fuentes que se utilizarán en un sitio web, es momento de dar estilo a los textos con CSS, no solo para que sean legibles, también para que luzcan bien.

Atributos de texto

Tamaño de fuente
font-size

El tamaño de letra se rige mediante el atributo font-size, cuyo valor puede representarse con cualquiera de las unidades de medida que se muestran en el artículo de Unidades de medida en CSS.

La medida por omisión del texto en una página web es de 16 pixeles (aunque esta medida la puede modificar fácilmente el usuario por medio de la configuración de su Navegador).

See the Pen font-size by Miguel Méndez (@codigo-web) on CodePen.0

Es conveniente que los valores de los textos de una página tengan como unidades de medida em rem, para ello es recomendable establecer una medida base en la etiqueta html.

Esta técnica la propuso originalmente Richard Rutter en el 2004 (How to size text using ems). En el 2011, Jonathan Snook propuso una adecuación con el uso de rem (Font sizing with rem).

De esta manera, el tamaño de los textos mantendrán su escala en caso que el usuario cambie el tamaño de la letra en las preferencias del Navegador, o bien, si como diseñadores del sitio decidiéramos aumentar o disminuir el tamaño de la letra en forma general, solo sería necesario modificar el tamaño en el elemento html.

Altura de línea
line-height

La altura de línea (line-height) es el espacio vertical que abarca el tamaño de la fuente más el espacio de interlineado.

line-height
Altura de línea

Utilizado en un espacio con altura definida, y con un una visualización (display) de tipo block o inline-block, funciona también para centrar en vertical un texto, igualando su valor de line-height con la altura del elemento padre.

See the Pen line-height_center by Miguel Méndez (@codigo-web) on CodePen.0

Negrita
font-weight

Con el atributo font-weight (peso de fuente) afectamos el texto seleccionado de forma en que se visualiza en negrita, tiene dos posibles valores:

bold: Negrita
normal: Restablece el peso del texto a normal.

See the Pen negritas by Miguel Méndez (@codigo-web) on CodePen.0

Itálica
font-style

Con el atributo font-style (estilo de texto) el texto se visualiza en itálica o en forma oblicua. Tiene tres posibles valores:

italic: Itálicas
oblique: Oblicuas
normal: Restablece el estilo del texto a Normal.

See the Pen font-style by Miguel Méndez (@codigo-web) on CodePen.0

La diferencia entre los tipos itálicas y oblicuas en el texto radica en que las itálicas fueron diseñadas de forma inclinada por su creador, mientras que el estilo oblicuo es la fuente regular inclinada unos grados a la derecha.

Capitalizar, altas y bajas
text-transform

Mediante el atributo text-transform (transformación de texto), es posible capitalizar la primera letra de cada palabra o forzar el texto a aparecer en mayúsculas o en minúsculas. Sus posibles valores son:

capitalize: Coloca en mayúscula la primera letra de la(s) palabra(s) seleccionada(s).
uppercase: Coloca en mayúsculas la(s) palabra(s) seleccionada(s).
lowercase: Coloca en minúsculas la(s) palabra(s) seleccionada(s).

See the Pen text-transform by Miguel Méndez (@codigo-web) on CodePen.0

Decoración
text-decoration

Mediante el atributo text-decoration (decoración de texto), se visualizan líneas horizontales sobre, encima y por debajo del texto. Sus posibles valores son:

overline: Coloca una línea sobre el texto seleccionado.
line-through: Coloca una línea sobre el texto seleccionado, en forma de tachado.
underline: Coloca una línea bajo el texto seleccionado, en forma de subrayado.
none: Deja sin efecto cualquiera de los anteriores valores.

See the Pen text-decoration by Miguel Méndez (@codigo-web) on CodePen.0

Por omisión las ligas o hipervínculos (elemento <a></a>) que toman un texto como ancla, cuentan con el valor de underline para el atributo text-decoration. Si deseamos que las ligas no cuenten con un subrayado (por ejemplo en un menú), es necesario dejar sin efecto el subrayado, aplicando el valor none al atributo text-decoration:

menu a {text-decoration: none;}

Espaciado
letter-spacing
word-spacing

letter-spacing (interletraje)
Afecta el espacio entre letras en cada palabra.

word-spacing (espaciado entre palabras)
Afecta el espacio entre palabras.

See the Pen espaciado by Miguel Méndez (@codigo-web) on CodePen.0

Alineación
text-align

El atributo text-align (alineación de texto) cambia la alineación del texto en el eje horizontal. Sus posibles valores son:

left: Alinea el texto a la izquierda (valor por omisión)
right: Alinea el texto a la derecha
center: Centra el texto.
justify: Justifica el texto.

See the Pen text-align by Miguel Méndez (@codigo-web) on CodePen.0

Indentado
text-indent

Establece una sangría en la primera línea de texto, su valor puede ser positivo, moviendo el texto a la derecha, o negativo, que mueve el texto a la izquierda.

See the Pen text-indent by Miguel Méndez (@codigo-web) on CodePen.0

Sombreado
text-shadow

Mediante el atributo text-shadow (sombra de texto) se genera una sombra al texto seleccionado, su valor se compone de cuatro elementos, cada uno de ellos separados por un espacio en blanco:

Primer elemento: Distancia en X (horizontal) de la sombra con relación al texto. Un valor negativo coloca la sombra a la izquierda del texto, mientras que un valor positivo la coloca a su derecha.

Segundo elemento: Distancia en Y (vertical) de la sombra con relación al texto. Un valor negativo coloca la sombra coloca la sombra sobre el texto, mientras que un valor positivo la coloca por debajo del texto.

Tercer elemento (opcional): Representa el difuminado de la sombra.

Cuarto elemento: El color de la sombra.

See the Pen text-shadow by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Para estas fechas (Agosto 2016) contamos con los elementos necesarios para que el texto luzca como una parte integral del diseño gráfico de un sitio web.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz