Estilos>>Estilos para fuentes

Fuentes

A continuación vamos a ver una serie de propiedades que afectan a las fuentes que utilizamos para mostrar el texto y la forma de modificarlas mediante estilos.En el editor de CSS de N|VU podrás acceder a estas propiedades dentro de la pestaña texto, aunque algunas propiedades no están implementadas.

Estilos de letra

Propiedad: font-style

Valores: Se puede utilizar normal o italic. Permite alternar entre la presentación entre ambos tipos. Existe un tercer tipo oblique pero la mayoría de los navegadores la muestran igual que la itálica

Ejemplos: Letra normal Letra itálica Letra oblicua

Variantes

Nos permite hacer que la fuente se muestre con todos los caracteres en mayúsculas pero en un tamaño más reducido. Esta propiedad no se incluye en el editor en su versión actual, por lo que habrá que introducir el código manualmente si se necesita

Propiedad: font-variant

Valores: normal o small-caps (mayúsculas pequeñas)

Grosor de la letra

Propiedad: font-weight

Valores: El valor básico es bold (negrita) por contraposición al valor por defecto que es normal.

También pueden utilizarse dos valores relativos: bolder (más gruesa) y lighter (más fina) que el grosor de fuente que los antecede.

Por último disponemos de una escala graduada desde 100 hasta 900 en intervalos de 100 en la que el valor normal es el 400, y 700 el equivalente a la negrita, siendo el resto grosores relativos con respecto a éste. A pesar de que ésta sea la especificación la visualización en pantalla no es progresiva, como puedes comprobar.

Tamaño de la fuente

Propiedad: font-size

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px), anchura de la letra eme (em) o altura de la letra equis (ex). También se puede utilizar un valor porcentual respecto al tamaño base que se utiliza por defecto.

Por último podemos también indicar el tamaño mediante palabras reservadas que indican los valores relativos, de menor a mayor, respecto al valor por defecto que es el medium: xx-small, x-small, small, medium, large, x-large, xx-large

Una última posibilidad es utilizar las palabras reservadas smaller y larger que, en lugar de basarse en el valor medium, toman como valor de referencia el tamaño de fuente usado inmediatamente antes y reducen o amplian el mismo al siguiente tamaño en la escala. (Lógicamente no tienen valor cuando nos encontramos en los extremos inferior o superior de la escala y pretendemos seguir disminuyendo o aumentando respectivamente)

Interlineado

Repetimos la referencia al interlineado porque también podemos considerarlo como una propiedad aplicable a las fuentes. En el editor CSS lo encontrarás como altura de línea.

Propiedad: line-height

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%).

Si necesitas utilizar decimales tendrás que utilizar la notación anglosajona, en la que el separador decimal es el punto en lugar de la coma.

Familia

Propiedad: font-family

Valores: Se puede utilizar el nombre de la letra. Es conveniente añadir, separados por comas, nombres de letras similares y finalizar, por si no está instalada ninguna de ellas, con el nombre de la familia. Las familias de letras básicas son: serif, sans-serif, monospace, cursive y fantasy. Si el nombre de la fuente tiene espacios en blanco habría que encerrarlo entre comillas para que se leyeran ambas palabras como una única cadena.

Combinar los atributos referentes a la fuente de letra

En muchas ocasiones puede resultarnos más cómodo agrupar todos los valores de las diferentes propiedades en una propiedad abreviada denominada, sencillamente, font.

La propiedad abreviada font requiere el siguiente orden en la presentación de los valores: estilo, variante, grosor, tamaño/interlineado, familia

Tal vez te haya llamado la atención la referencia tamaño/interlineado. En la especificación actual, si utilizamos interlineado debe aparecer junto al valor de tamaño y separado del mismo por una barra de división / ).

Una buena práctica es definir en la etiqueta body las características de la fuente puesto que se heredarán para todos los elementos textuales.