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.

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.

Propiedad: font-variant

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

Ejemplos:

aquí se ha aplicado small-caps a un texto escrito totalmente en minúsculas. ESTE SERÍA EL TAMAÑO NORMAL DE LAS MAYÚSCULAS DE ESTA FUENTE

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, 200, ...hasta 900 en las que el valor normal es el 400, y 700 el equivalente a la negrita, siendo el resto grosores relativos con respecto a este. A pesar de que esta sea la especificaciónm la visualización en pantalla no es progresiva, como puedes comprobar.

Ejemplos:

Letra bold

100 200 300 400 500 600 700 800 900
grosor grosor grosor grosor grosor grosor grosor grosor grosor

Este fragmento esta en grosor normal. Aquí se ha aplicado bolder. Y ahora aplicamos lighter y volvemos a "adelgazar" la fuente hasta su grosor normal

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), pixels (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 medianto palabras reservadas que indican los valores relativos, de menor a mayor, respeto 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)

Ejemplos:
Tamaño 250%
Tamaño 18 puntos
Tamaño 2 em Tamaño 1 em
Tamaño 3 ex Tamaño 1 ex
Tamaño 18 píxels
Tamaño 1 centímetro
Tamaño 0,5 pulgadas

xx-small x-small small medium large x-large xx-large
tamaño tamaño tamaño tamaño tamaño tamaño tamaño


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.

MUY IMPORTANTE: Si utilizas unidades absolutas (px, pt, in, cm) la mayoría de los navegadores no serán capaces de modificar el tamaño cuando el usuario lo solicite y manejarán mal los tamaños relativos. Sería conveniente utilizar como unidad de medida la em que adoptará la anchura por defecto (o la ex que tomará la altura) del valor por defecto cada uno de los navegadores y permitirá unos ajustes correctos al redimensionar.

Interlineado

Repetimos la referencia al interlineado porque también podemos considerarlo como una propiedad aplicable a las fuentes.

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 (%).

Ejemplos:

En esta línea se ha empleado un interlineado del 200%, de forma que presente una distancia doble a la habitual, respecto a la anterior y la posterior .

En esta línea se ha empleado un interlineado de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar que la parte superior de las letras llega hasta la base del renglón anterior.

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.

Ejemplos: Podríamos hacer una referencia del tipo font-family:Arial,Helvetica,Verdana,sans-serif

Familia serif
Familia sans-serif
Familia monospace
Familia cursive
Familia fantasy

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.

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.

Ejemplos:

body {font: italic small-caps bold 12pt/35px sans-serif} Haría que todo el texto de la página tomara como base la apariencia que muestra este párrafo.

body {font: bold 11pt/9px serif} haría que todo el texto de la página tomara como base la apariencia que se muestra aquí (al no haber incluido valores de estilo ni variante se toma el valor por defecto).
 

 

Márgenes

Propiedad: margin

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px), anchuras de eme (em) o alturas de x (ex)

Los márgenes se suelen especificar dentro de la etiqueta body ya que habitualmente se utilizan para definir toda la página.

 

Interlineado

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 (%).

Ejemplos:

En esta línea se ha empleado un interlineado del 200%, de forma que presente una distancia doble a la habitual, respecto a la anterior y la posterior .

En esta línea se ha empleado un interlineado de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar que la parte superior de las letras llega hasta la base del renglón anterior.