Fuentes CSS

La propiedad font del CSS define la familia de la fuente (tipo de letra), el grosor (negritas), el tamaño y el estilo del texto.

Diferencias entre las fuentes serif y sans-serif

Texto de ejemplo con fuentes serif.

Texto de ejemplo con fuetes sans-serif.

Familias de Fuentes CSS

En CSS, se nombran dos tipos de familias de fuente:

generic-family (Familia Generica):

Un grupo de familia de fuentes con un aspecto similar (como "Serif" o "Monospace").

font-family (familia de fuente):

Una específica familia de fuente (como "Times New Roman" o "Arial").

Familia Genérica	Familia de Fuente	Descripción
serif	Times New Roman Georgia	Las fuentes serif tienen unas pequeñas líneas en los bordes o terminaciones en los caracteres.
sans-serif	Arial Verdana	Sans significa "sin" - Estas fuentes no tienen esas pequeñas lineas en los bordes o terminaciones en los caracteres.
monspace	courier new lucida console	Todos los caracteres son monoespaciados y tienen el mismo ancho.

Familia de Fuente

La familia de fuente de un texto es especificada con la propiedad font-family. La propiedad font-family debe contener más de una familia de fuentes para funcionar como un sistema de retroceso. Si el navegador web no soporta la primera fuente prueba con la siguiente fuente establecida, y así sucesivamente. Comenzar con la fuente que se desea principalmente, y terminar con una familia genérica, para permitir que el navegador recoja una fuente similar a la familia genérica, si no hay otras fuentes disponibles.

Nota: Si el nombre de una familia de fuente tiene más de una palabra, está se debe marcar entre comillas como: "Times New Roman".

Para especificar más de una familia se listan separadas por una coma, como a continuación se muestra:

p {
  font-family: "Times New Roman", Times, serif;
}

Estilos de Fuentes

La propiedad font-style es frecuentemente usada para especificar texto en cursiva.

Esta propiedad tiene 3 valores:

• normal: El texto se muestra normalmente.
• italic: El texto se muestra en cursivas.
• oblicua: El texto se muestra inclinado (oblicua es muy similar a cursiva, pero menos compatible).

p.normal {
  font-style: normal;
}
p.cursiva {
  font-style: cursiva;
}
p.oblicue {
  font-style: oblique;
}

Tamaño de Fuente

La propiedad font-size especifica el tamaño del texto. Ser capaz de gestionar el tamaño del texto es importante en el diseño web. Sin embargo, no se debe ajustar el tamaño del texto para hacer lucir párrafos como encabezados o encabezados luzcan como parrafos. Siempre usar las etiquetas HTML, como <h1> a <h6> para encabezadas y <p> para párrafos.

El valor de tamaño de fuente puede ser un tamaño absoluto o relativo.

Tamaño absoluto:

• Establecer el texto a un tamaño específico.
• No permite a los usuarios cambiar el tamaño del texto en sus navegadores web (no recomendado por razones de accesibilidad).
• El tamaño absoluto es usado cuando se conoce el tamaño físico de salida.

Tamaño Relativo:

• Establecer el tamaño en relación a los elementos que lo contienen.
• Permite a los usuarios cambiar el tamaño del texto en sus navegadores web.

Nota: Si no se especifica el tamaño de la fuente, el tamaño predeterminado para el texto normal como el de un párrafo, es de 16px (16px = 1em).

Establecer el tamaño de fuentes en pixeles

Para fijar el tamaño de fuentes lo establecemos de la siguiente manera:

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size; 14px;
}

Tip: Si tu usas pixeles, aún puedes usar herramientas de zoom para reajustar el tamaño para toda la página.

Establecer el tamaño de fuentes en em

Para permitir al usuario especificar el tamaño del texto (desde su navegador web), muchos desarrolladores web utilizan la unidad de tamaño em en lugar de pixeles. La unidad de tamaño em es recomendada por el W3C. 1em es igual al tamaño de la fuente actual. El tamaño predeterminado en los navegadores web más populares es de 16px, así, el tamaño predeterminado de 1em es de 16px. El tamaño puede ser calculado en pixeles a em usando la formula: pixeles / 16 = em.

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
h3 {
  font-size: 0.875em; /* 14px/16=0.875em */
}

En el ejemplo anterior, el tamaño de texto en em es el mismo que el posanterior ejemplo en pixeles. Sin embargo, con el tamaño en em, es posible ajustar el tamaño del texto desde el navegador web. Cabe mencionar que hay diferencias con las versiones antiguas de Internet Explorer, el texto se muestra más grande de lo que debería cuando se ajusta de más grande desde el navegador y se muestra más pequeño de lo que debería cuando de ajusta a más pequeño desde el navegador.

Usar combinación de porcentaje y em

La solución que sirve para todos los navegadores web, es establecer el font-size (tamaño) predeterminado en la etiqueta <body>.

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Así, el código funciona bien. Esto muestra el mismo tamaño del texto para todos los navegadores web y les permite ajustar el tamaño según lo establecido al navegador web.

Ancho de Fuente

La propiedad font-weight especifica el ancho de la fuente.

p.normal {
  font-weight: normal;
}
p.negrita {
  font-weight: bold;
}

Fuente Variante

La propiedad font-variant especifíca si el texto debe ser mostrado en un tipo de fuente en mayúsculas y un poco más pequeña (small-caps).

Una fuente small-caps es un tipo de fuente en la cual todas las letras son convertidas en mayúsculas y se muestran un poco más pequeñas que las que originalmente ya son mayúsculas.

p.normal {
  font-variant: normal;
}
p.pequenia {
  font-variant: small-caps;
}