Propiedad font

Ejemplos de uso

La propiedad font permite establecer algunas o todas las propiedades tipográficas del texto de forma simultánea. Por este motivo, font es una de las propiedades abreviadas que se conocen con el nombre de "propiedades shorthand".

Los dos únicos valores que se deben incluir obligatoriamente al utilizar la propiedad font son el tamaño y el tipo de letra:

body {
  font: 1.5em Arial, Helvetica, sans-serif;
}

Si se omite el tamaño o el tipo de letra o si se intercambia su posición, la declaración de la propiedad font es incorrecta y se ignora su valor:

font: 1.5em;             // Incorrecto: falta el tipo de letra
font: sans-serif;        // Incorrecto: falta el tamaño de letra
font: sans-serif 1.5em;  // Incorrecto: primero se indica el tamaño

La propiedad font también permite indicar de forma opcional el interlineado (propiedad line-height) justo después del tamaño de letra y separado por una barra inclinada (/):

body {
  font: 1.5em/2 Arial, Helvetica, sans-serif;
}

p {
  font: 13pt/1.5em Arial, Helvetica, sans-serif;
}

El resto de propiedades tipográficas también son opcionales y se pueden indicar alguna o todas a la vez y en cualquier orden, pero siempre antes que el tamaño de letra:

font: italic 1.5em sans-serif;
font: small-caps 1.5em sans-serif;
font: bold 1.5em sans-serif;

font: 700 small-caps 1.5em sans-serif;
font: small-caps oblique bolder 1.5em sans-serif;
font: oblique 200 1.5em sans-serif;
font: normal italic 1.5em sans-serif;

Si no se define el valor de alguna propiedad tipográfica, el navegador le asigna su valor por defecto. Si se definen todas las propiedades tipográficas a la vez, la declaración resultante puede llegar a ser muy compleja:

font: italic small-caps bold 1.5em/2 sans-serif;
font: 700 normal 12pt/1.3 sans-serif;
font: oblique lighter 85%/120% sans-serif;

Además de las propiedades tipográficas individuales, la propiedad font define una serie de palabras clave para establecer de forma directa todas las propiedades tipográficas del texto. Estas palabras clave indican que el texto debe mostrarse con el mismo aspecto que algunos elementos del sistema operativo del usuario:

Los elementos de la tabla anterior siempre hacen referencia a los elementos del sistema operativo del usuario, por lo que no tienen nada que ver con el navegador o aplicación utilizada para acceder a los contenidos.

Si en el sistema operativo utilizado no está definido alguno de los valores, los navegadores lo sustituyen por otros valores similares o utilizan directamente las propiedades tipográficas por defecto.

A continuación se muestra el aspecto del texto definido con cada palabra clave de la propiedad font. Si visualizas esta página con diferentes sistemas operativos o modificas el aspecto del tema que utilizas en tu sistema operativo, el texto variará su aspecto:

A pesar de su sencillez y de que el texto cuyo aspecto se define con las palabras clave parece más integrado con el sistema operativo del usuario, en la práctica apenas se utilizan estas palabras y casi siempre se opta por definir manualmente las propiedades tipográficas del texto.

Por último, recuerda que la propiedad font permite establecer todas las propiedades tipográficas del texto salvo su color, que se define de forma independiente mediante la propiedad color.

El uso de propiedades abreviadas como font no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS.