Una vez más Andrés Nieto me ha dado ocasión de escribir algo a propósito de un post. Esta vez se trata de un tema básico para cualquiera que desee jugar con CSS: el trabajo con fuentes.

En este artículo espero ampliar un poco la información que Andrés entrega en su post Con font todo será más corto, examinando los distintos selectores utilizados para contolar las propiedades de las fuentes y presentando un reconocido método para controlar el tamaño de las fuentes de manera consistente.

Propiedades de presentación de fuentes

En el principio fue <font>

Antes de la adopción masiva de CSS, existía en HTML una etiqueta para controlar la presentación de las fuentes: la infame <font>. Una serie de atributos completaban sus poderes de presentación: color, face y size (más font-weight, un atributo específico de Netscape).

Este elemento fue considerado obsoleto en HTML 4 y XHTML 1, y ha sido eliminado en XHTML 1.1 por no ser estructural ni aportar a la [semántica->XHTML Semántico aplicado a listas] del documento. Hoy en día, gracias a CSS es posible un control mucho mayor con muchos menos bytes: si antes era necesario definir las propiedades de las fuentes de cada párrafo, ahora es posible hacerlo solamente una vez para todo un documento o todo un sitio si utilizas una hoja de estilo enlazada. Además, con un [apropiado uso de clases e ids->Semántica en clases e ids], las posibilidades son infinitas.

font-family

Definición

Una familia de fuentes es un grupo de fuentes con características similares. Esta propiedad señala una lista de preferencias para presentar un determinado contenedor.

Ejemplo

body {
font-family: Arial, 'Lucida Sans Unicode', Helvetica, sans-serif;
}

Notas

• Si el nombre de una fuente contiene espacios, debe ir entre comillas. Ejemplo: 'Lucida Sans Unicode'.
• Es recomendable siempre agregar al final un nombre genérico de [familias de fuentes->Sobre fuentes y legibilidad], tal como serif, sans-serif o monospace.
  Las fuentes de la familia serif tienen “patinas” (como la “Times New Roman”), las fuentes de la familia sans-serif no las tienen (como la “Arial”) y las de la familia monospace son de ancho fijo (como la “Courier New”).
• Existen además otras dos familias de fuentes: cursive y fantasy; sin embargo, no existe consenso sobre qué fuentes pertenecen a cada familia

font-size

Definición

Esta propiedad controla el tamaño de las fuentes en un determinado contenedor.

Ejemplo

div.post {
font-size: 1em;
}

Notas

• Existen varias fomas de determinar el tamaño de las fuentes, tales como palabras clave (xx-small, x-small, small, medium, large, x-large, xx-large), palabras claves relativas (smaller, larger), porcentualmente o mediante algún tipo de medida.
• Los tipos de medida, a su vez, se dividen en dos: medidas absolutas o relativas.
• Se han probado muchos métodos para presentar las fuentes en tamaños consistentes en distintos navegadores y resoluciones. El método que mejor ha resultado es una combinación de porcentajes y medidas en em —continúa leyendo para más información

font-style

Definición

Esta propiedad aplica efectos a la fuente de un determinado contenedor

Ejemplo

q {
font-style: italic;
}

Notas

• Existen cuatro valores para esta propiedad: inherit (que no es soportada por Explorer), normal para mostrar el texto normalmente, italic y oblique. Las dos últimas deberían representar el texto de distinta forma, pero usualmente ambas resultan en texto en cursivas: texto con efecto “italic”, texto con efecto “oblique”
• El efecto oblique existe en ocasiones en fuentes de familias sans-serif

font-variant

Definición

Especifica si el texto debe mostrarse solamente con fuentes mayúsculas

Ejemplo

blockquote cite {
font-variant: small-caps;
}

Notas

• Existen dos valores posibles para esta propiedad: normal y small-caps.
• El efecto small-caps produce un texto escrito solamente en letras mayúsculas, en el que las mayúsculas existentes se muestran de un tamaño mayor que el resto de las letras: Jackie Chan lleva mayúsculas por ser nombre propio
• Solamente algunos tipos de letra incluyen una variante small-caps; en caso de que no sea así el navegador simula el efecto utilizando distintos tamaños de letra.

font-weight

Definición

Esta propiedad define el grosor de las fuentes.

Ejemplo

strong {
font-weight: normal;
}

Notas

• Existen tres tipos de valores para esta propiedad: un valor numérico entre 100 y 900 (en intervalos de 100; mientras más es más grueso); lighter / bolder, que sirven para calcular el valor numérico en relación con el valor otorgado al elemento padre, y normal / bold, que sirven para indicar fácilmente si el texto se presenta normalmente o con negritas
• En general, los navegadores no interpretan correctamente los valores numéricos de grosor, y solamente distinguen entre dos niveles

line-height

Definición

Especifica el alto de un contenedor que se muestre “en línea”

Ejemplo

div.post p {
line-height: 180%;
}

Notas

• Valores permitidos: normal, que establece un alto de línea “razonable” (1 o 1.2 veces el tamaño de la fuente); un valor expresado en unidades de medida; o un número o porcentaje que actúan como multiplicadores del tamaño de la fuente del contenedor.
• No se permiten valores negativos

Juntando todas las propiedades con font

Tal como plantea Andrés en su artículo, es posible conjugar todas las propiedades que afectan la presentación de las fuentes utilizando el “atajo” —shortcut— font.

Podemos usar etiquetas como font en la cual podemos definir todas las características que deseamos tengan nuestras fuentes. Ej:

div.the_content {
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
  font-size: 1em;
  line-height: 1.5em;
  font-family: verdana,sans-serif;
}

En nuestra misión de minimizar el tamaño de nuestros CSS hemos de tener en cuenta estas opciones que nos permitirán ahorrar una serie de líneas en cada CSS que generemos.

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

Fuentes de tamaño consistente con porcentajes y ems

Desde el comienzo del tamaño he prometido un método para presentar los tamaños de las fuentes de manera consistente en distintos navegadores y resoluciones de pantalla. Ahora, lo primero sería explicar qué quiero decir con “consistente”.

El problema es el siguiente: la única forma de determinar exactamente las dimensiones de un objeto que se presentará en una pantalla es indicando una medida en píxeles —en este sentido es una medida absoluta: un pixel es un punto en la pantalla. Sin embargo, no todas las pantallas tienen la misma resolución: las más comunes son, lejos 800*600 y 1024*768 (y también agregaría 1280*1024), por lo que el tamaño del punto es variable; a pesar de que la medida es absoluta, su tamaño es “relativo”. Una fuente de 12px a 800*600 puede ser totalmente razonable, sin embargo a medida que aumente la resolución el tamaño de la misma será menor. Además, Internet Explorer no puede ajustar el tamaño de las fuentes fijadas en pixeles.

El reto entonces será presentar las fuentes en un tamaño que sea ajustable según la resolución de pantalla del usuario: si mide 12px a 800*600, que tenga dimensiones similares en otras resoluciones.

Las medidas relativas han fallado en cumplir esta tarea, como también todas las otras formas de determinar directamente el tamaño de las fuentes. Entonces llegó la hora de ponerse a inventar.

Owen Briggs se dió a la tarea de tomar capturas de pantalla de textos presentados en distintos navegadores, con distintos tamaños de fuentes, utilizando diferentes métodos… y llegó a una conclusión: porcentaje y ems.

El método es bastante sencillo: consiste en fijar el tamaño de fuentes para el cuerpo del documento en un porcentaje que oscile entre 76 y 100% y luego determinar el tamaño para los elementos utilizando medidas en ems. Briggs encontró además que al fijar el porcentaje por debajo de 76% aumentaba las diferencias de tamaño en los distintos navegadores. Un ejemplo sería como sigue:

body {
  font-size: 85%
}

div.post {
  font-size: 1em
}

div.post-info {
  font-size: 0.8em
}

Además de presentar las fuentes de manera consistente, esta técnica agrega la ventaja de que es posible modificar el tamaño de todas las fuentes de un documento modificando solamente la medida del body (la que está expresada en porcentaje). Además, como la medida no está expresada en píxeles, incluso los usuarios de Explorer podrían modificar el tamaño del texto si fuera necesario.