View on GitHub

lenguaje-css

Propiedades de texto

Existe un amplio abanico de propiedades CSS para modificar las características básicas de las tipografías a utilizar

Propiedades básicas

. Aunque existen muchas más, a continuación, veremos las propiedades CSS más básicas para aplicar a cualquier tipo de tipografía:

Con ellas podemos seleccionar tipografías concretas, específicar su tamaño, estilo o grosor.

Familia tipográfica

Empezaremos por la más lógica, la propiedad CSS para seleccionar una familia tipográfica concreta. Con esta propiedad, denominada font-family , podemos seleccionar seleccionar cualquier tipografía simplemente escribiendo su nombre.

Si dicho nombre está compuesto por varias palabras separadas por un espacio, se aconseja utilizar comillas simples para indicarla (como se ve en el segundo ejemplo):

body {
    font-family: Verdana;
    font-family: 'PT Sans'; /* Otro ejemplo */
}

Esta es la forma más básica de indicar una tipografía. Sin embargo, hay que tener en cuenta un detalle muy importante: estas fuentes sólo se visualizarán si el usuario las tiene instaladas en su sistema o dispositivo. En caso contrario, se observarán los textos con otra tipografía «suplente» que esté disponible en el sistema, pero que puede ser visualmente muy diferente.

Esto convierte una tarea a priori simple, en algo muy complejo, puesto que los sistemas operativos (Windows, Mac, GNU/Linux) tienen diferentes tipografías instaladas. Si además entramos en temas de licencias y tipografías propietarias, la cosa se se vuelve aún más compleja.

Consejo: La página FontFamily.io incorpora un sencillo formulario para mostrar información sobre determinadas tipografías y como se mostrarían en diferentes sistemas (Windows, Mac OS, GNU/Linux, Android, iOS, Windows Phone, etc…). Más adelante, veremos la regla @font-face de CSS3, que permite solucionar este problema y la usan sistemas como Google Fonts.

Un primer y sencillo paso para paliar (en parte) este problema, es añadir varias tipografías alternativas, separadas por comas, lo que además se considera una buena práctica de CSS:

div {
    font-family: Vegur, 'PT Sans', Verdana, sans-serif;
}

De esta forma, el navegador busca la fuente Vegur en nuestro sistema, y en el caso de no estar instalada, pasa a buscar la siguiente (PT Sans), y así sucesivamente. Se recomienda especificar al menos 2 ó 3 tipografías diferentes.

Consejo: Como última opción de font-family se recomienda utilizar una palabra clave denominada «web-safe fonts» (fuente segura). Esta fuente segura no es una tipografía específica, sino una palabra clave con la que se denomina una categoría. Esto indica al navegador que debe buscar una tipografía instalada en el sistema que entre dentro de la misma categoría.

Las palabras clave de fuentes seguras son las siguientes:

Fuente Significado Fuentes de ejemplo

Propiedad Valor Tipo de medida

Se pueden indicar tres tipos de valores:

Estilo de la tipografía

A las tipografías elegidas se les puede aplicar ciertos estilos, muy útil para maquetar los textos, como por ejemplo negrita o cursiva (italic). La propiedad que utilizamos es font-style y puede tomar los siguientes valores:

Con la propiedad font-style podemos aplicarle estos estilos. En la mayoría de los casos, se aprecia el mismo efecto con los valores italic y oblique , no obstante, italic muestra la versión cursiva de la fuente, específicamente creada por el diseñador de la tipografía, mientras que oblique es una representación forzosa artificial de una tipografía cursiva.

Peso de la tipografía

Por otro lado, tenemos el peso de la fuente, que no es más que el grosor de la misma. También depende de la fuente elegida, ya que no todas soportan todos los tipos de grosor. De forma similar a como hemos visto hasta ahora, se puede especificar el peso de una fuente mediante tres formas diferentes:

Propiedad Valor Significado

OJO: Ten en cuenta que los diferentes pesos de una tipografía son diseñados por el creador de la tipografía. Algunas tipografías carecen de diferentes pesos y sólo tienen uno específico. Esto es algo muy sencillo de ver en Google Fonts (al seleccionar una tipografía).