Controlando tus fuentes con CSS

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 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, 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, 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” —shortcutfont.

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.

  • http://www.cholitzu.com nico

    hola, disculpen necesito ayuda, ayer copie un texto de mi email a word, y de word a mi wordpress, a la parte de noticias de mi web, ahora despues de eso se desconfiguro el tipo de letra, y se ve horrible: http://www.cholitzu.com/?cat=5
    muchas gracias

    nico

    • Wana de hard-core duo

      esto no vale par nada, hay que ver que gente. hay mejores comentarios en la red

  • http://www.como-hacer-negocios-eninternet.com santiago padilla

    Hola:

    Encontre el tutorial a traves del yahoo search, muy interesante,
    tengo un blog en http://www.como-hacer-negocios-eninternet.com , aunque el tema del blog me gusta en general, me gustaria cambiar el tamano de la letra a uno mas pequeno, pero no se cual parametro configurar, ademas tengo miedo de que todo se descomponga si borro algun codigo.

    Pero solicito su ayuda, a ver si le da una visita a mi blog y me recomienda el parametro a cambiar para que la lerta se vea como su blog,

    Gracias.

  • luis

    hola quiero combiar la fuentes de mi letra con css usando dreamwaver y notengo ni idea algunos de ustedes sabe com opuedo comabiar la fuentes para css quee estoy aciendo una pagina usando detiquetas div

  • http://www.yukei.net Felipe Lavín Z.

    @luis: te recomiendo que revises el sitio de Opera Web Standards Curriculum

  • Gaston

    hola a mi me gustaria saber como hago para poner un tipo de fuente q no este predeterminada.. osea yo descarge un tipo de fuente “feira da fruta” i me gustaria usarla i q todos la puedan ver…
    osea cargarla desde mi carpeta donde tengo la pag.. entiendes!? bueno espero me ayuden muchas gracias!!!

  • Carlitos Tambor

    faltaría añadir las propiedades letter y word, como el espacio entre letras y entre palabras para hacer más cómoda la lectura