La propiedad "Font"

En CSS, las características relacionadas a las fuentes son manipuladas a través de un grupo de propiedades de fuente.

Importante

Trabajar con fuentes en la web tiene algunas dificultades, específicamente dos:

Familias de fuentes
Los navegadores disponen de aquellas fuentes que los visitantes a nuestro sitio tienen instaladas en sus computadores. Los desarrolladores no tienen ninguna manera de saber qué fuentes se visualizarán y cuales no.
Tamaños
Aunque no muy común, algunos usuarios podrían requerir aumentar o disminuir el tamaño por defecto de los textos en sus navegadores, este valor es inaccesible para los desarrolladores.

Afortunadamente hay algunas buenas prácticas que podemos utilizar para manejar estas situaciones.

Especificar el nombre de la fuente - Font-Family

Para definir el tipo de fuente de un texto utilizamos la propiedad font-family.

El valor de la propiedad corresponderá a la fuente o lista de fuentes a utilizar en el sitio.

Ejemplo

body {font-family: Arial;} h1 {font-family: Courier, monospace} p {font-family:"Trebuchet MS", Verdana, sans-serif;}

¿Por qué utilizar más de una fuente?

Para superar la limitación de fuentes disponibles (descrita anteriormente), CSS nos permite crear una lista de fuentes y evaluar su disponibilidad.

En el ejemplo anterior, la fuente asignada a la etiqueta "p" será "Trebuchet MS", de no estar disponible, intentará con Verdana, si esta tampoco existe, entonces utilizará la fuente "sans-serif" predeterminada del sistema operativo.

Importante

Algunas características de la propiedad font-family:

  • Todas las fuentes deben ser escritas con la primera letra en mayúscula (a excepción de las genéricas como "serif").
  • Las fuentes cuyos nombres sean compuestos, por ejemplo "Trebuchet MS", deben escribirse entre comillas.
  • Debes incluir comas para separar cada fuente.

Unidades de medida en CSS

Las unidades de medida en CSS se encuentras bajo dos categorías: Unidades Absolutas y Unidades Relativas.

Unidades Absolutas

Estas unidades están definidas en el mundo real sus valores nunca variarán a pesar del contexto.

Estas son:

Puntos - pt
1 punto corresponde aproximadamente a 1/28cm.
Picas - pc
1 pica corresponde a 12 puntos.
Milímetros - mm
Centímetros - cm
Pulgadas - in

Las unidades absolutas no son recomendadas para la web. Sin embargo, si creamos una hoja de estilos para impresión, podríamos utilizar estas medidas para asegurarnos su correcta visualización en un medio impreso.

Unidades Relativas

Como indica su nombre las unidades relativas varían su tamaño en relación a algo, por ejemplo, a la resolución de una pantalla, al tamaño por defecto de un texto o al tamaño de un elemento contenedor (padre).

Importante

La mayoría de los navegadores fijan el tamaño por defecto de las fuentes en 16px.

Las medidas más utilizadas son:

em
1em corresponde al tamaño por defecto del navegador.
px
El tamaño de un un pixel dependerá de la resolución del monitor.
%
Los porcentajes pueden utilizarse para definir medidas.

Especificar el tamaño de la fuente - Font-Size

Para definir el tamaño de fuente utilizamos la propiedad font-size.

Podemos especificar el tamaño de un texto de distintas maneras.

A través de unidades de medida

h1 {font-size: 1.5em}

Es importante notar que el "keyword" em debe ir seguir inmediatamente después del número, sin espacios.

Como un porcentaje

p{ font-size: 0.75% }

Un valor en porcentaje es relativo al valor por defecto del navegador o al valor heredado del elemento contenedor

Keywords absolutas

h2{font-size: x-large;}

Los keyword absolutos son:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

El valor por defecto del navegador en estos términos es "medium".

Keyword relativo

Los keyword relativos aumentan o disminuyen el tamaño del texto cercano

h2{font-size: larger;}

Los keyword relativos son:

  • larger
  • smaller

Importante

Es recomendado trabajar principalmente en valores relativos como em, px y %.

Peso de la fuente - Font-weight

Definir si el texto aparece en "bold", para esto utilizamos la propiedad font-weight.

h1 {font-weight: bold;}

Estilo de la fuente - Font-style

El valor de la propiedad font-style define la postura de la fuente.

em{font-style: italics}

Otros valores aceptados

  • normal
  • italic
  • oblique
  • inherit