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:
- font-family fuente Indica el nombre de la fuente (tipografía) a utilizar.
- font-size Indica el tamaño de la fuente.
-
font-style normal italic oblique Indica el estilo de la fuente. - font-weight peso Indica el peso (grosor) de la fuente (100-800).
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
- serif Tipografía con serifa Times New Roman, Georgia…
- sans-serif Tipografía sin serifa Arial, Verdana, Tahoma…
- cursive Tipografía en cursiva Sanvito, Corsiva… fantasy Tipografía decorativa Critter, Cottonwood…
- monospace Tipografía monoespaciada Courier, Courier New…
Tamaño de la tipografía
Otra de las propiedades más utilizadas con las tipografías es font-size , una tipografía que permite especificar el tamaño que tendrá la fuente que vamos a utilizar:
Propiedad Valor Tipo de medida
-
font-size xx-small x-small small medium large x-large xx-large Absoluta (tamaño predefinido) -
font-size smaller larger Relativa (más pequeña/más grande) - font-size Específica (tamaño exacto)
Se pueden indicar tres tipos de valores:
-
Medidas absolutas: Palabras clave como medium que representan un tamaño medio (por defecto), small: tamaño pequeño, x-small: tamaño muy pequeño, etc…
-
Medidas relativas: Palabras clave como smaller que representan un tamaño un poco más pequeño que el actual, o larger que representa un tamaño un poco más grande que el actual.
-
Medida específica: Simplemente, indicar píxeles, porcentajes u otra unidad para especificar el tamaño concreto de la tipografía. Para tipografías se recomienda empezar por píxeles (más fácil) o utilizar estrategias con unidades rem (mejor, pero más avanzado).
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:
- normal Estilo normal, por defecto. Sin cambios aparentes.
- italic Cursiva. Estilo caracterizado por una ligera inclinación de las letras hacia la derecha.
- oblique Oblícua. Idem al anterior, salvo que esta inclinación se realiza de forma artificial.
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
-
font-weight normal | bold Medidas absolutas (predefinidas) font-weight bolder | lighter Medidas relativas (dependen de la actual) font-weight peso Medida específica (número del peso concreto) Peso de la fuente: font-weight
- Valores absolutos: Palabras claves para indicar el peso de la fuente: normal y bold. Normal es el valor por defecto.
- Valores relativos: Bolder (más gruesa) o Ligther (más delgada).
- Valor numérico: Un número del 100 (menos gruesa) al 900 (mas gruesa). Generalmente, se incrementan en valores de 100 en 100.
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).