Tipografía (Parte II)

Además de la anchura de la letra, CSS permite variar su estilo mediante la propiedad font-style.

 

Normalmente la propiedad font-style se emplea para mostrar un texto en cursiva mediante el valor italic.

El ejemplo anterior se puede modificar para personalizar aun más el aspecto por defecto de los elementos <em> y <strong>:

Ahora, el texto del elemento <em> se muestra como un texto en negrita y el texto delelemento <strong> se muestra como un texto en cursiva con un color de fondo muy destacado.

El único cambio necesario en las reglas CSS anteriores es el de añadir la propiedad font-style:

#especial em {
font-weight: bold;
font-style: normal;
}
#especial strong {
font-weight: normal;
font-style: italic;
background-color:#FFFF66;
padding: 2px;
}

Por último, CSS permite otra variación en el estilo del tipo de letra, controlado mediante la propiedad font-variant.

La propiedad font-variant no se suele emplear habitualmente, ya que sólo permite mostrar el texto con letra versal (mayúsculas pequeñas).

Siguiendo con el ejemplo anterior, se ha aplicado la propiedad font-variant: small-caps al segundo párrafo de texto:

Para este último ejemplo, solamente es necesario añadir una regla a los estilos CSS:

#especial {
font-variant: small-caps;
}

Por otra parte, CSS proporciona una propiedad tipo "shorthand" denominada font y que permite indicar de forma directa algunas o todas las propiedades de la tipografía de un texto.

El orden en el que se deben indicar las propiedades del texto es el siguiente:

• En primer lugar y de forma opcional se indican el font-style, font-variant y
• font-weight en cualquier orden.
• A continuación, se indica obligatoriamente el valor de font-size seguido
• opcionalmente por el valor de line-height.Por último, se indica obligatoriamente el tipo de letra a utilizar.

Ejemplos de uso de la propiedad font:

font: 76%/140% Verdana,Arial,Helvetica,sans-serif;
font: normal 24px/26px "Century Gothic","Trebuchet
MS",Arial,Helvetica,sans-serif;
font: normal .94em "Trebuchet MS",Arial,Helvetica,sans-serif;
font: bold 1em "Trebuchet MS",Arial,Sans-Serif;
font: normal 0.9em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font: normal 1.2em/1em helvetica, arial, sans-serif;
font: 11px verdana, sans-serif;
font: normal 1.4em/1.6em "helvetica", arial, sans-serif;
font: bold 14px georgia, times, serif;

Aunque su uso no es muy común, la propiedad font también permite indicar el tipo de letra a utilizar mediante una serie de palabras clave: caption, icon, menu, message-box, small-caption, status-bar.

Si por ejemplo se utiliza la palabra status-bar, el navegador muestra el texto con el mismo tipo de letra que la que utiliza el sistema operativo para mostrar los textos de la barra de estado de las ventanas. La palabra icon se puede utilizar para mostrar el texto con el mismo tipo de letra que utiliza el sistema operativo para mostrar el nombre de los iconos y así sucesivamente.