Tipografia en CSS

Como ya antes había publicado, el uso de fuente va muy ligado a la página y al tema de la misma, siempre sin descuidar el tamaño de la fuente. Aquí veremos como implementar la fuente de tu elección en una página web mediante CSS.

Al definir una fuente en CSS, para un selector cualquiera, se utiliza la siguiente propiedad o atributo:

selector {
  font:oblique small-caps 900 12px/14px arial;
}

Que puede ser desglosada de la siguiente manera, es decir, lo de aqui abajo es exactamente lo mismo:

selector {
  font-style:oblique;
  font-variant:small-caps;
  font-weight:900;
  font-size:12px;
  line-height:14px;
  font-family:arial;
}

font-style: Es el estilo con el que se muestra la fuente, tiene cuatro opciones:

inherit: Hereda la fuente
normal: Muestra la fuente sin cambios
oblique: Muestra la fuente en cursiva
italic: Muestra la fuente en cursiva

font-variant: Indica si el texto debe mostrarse solo en mayusculas, tiene dos opciones:

small-caps: Muestra todas las letras en Mayúsculas, pero las anteriormente mayúsculas se muestran mas grande que las demás.
normal: No hace ningún cambio

font-weight: Es el ancho con que se muestra la fuente, tiene cinco opciones:

de 100 a 900: El 100 es lo mas delgado, mientras 900 lo mas grueso
lighter: En referencia al elemento padre muestra la fuente mas delgada
bolder: En referencia al elemento padre muestra la fuente mas gruesa
bold: Muestra la fuente gruesa
normal: Muestra la fuente normal

font-size: Modifica el tamaño de la fuente, tiene varias opciones:

xx-small, x-small, small, medium, large, x-large, xx-large: Medidas de fuente siendo xx-small la mas pequeña y xx-large la mas grande.
larger: En referencia al elemento padre muestra la fuente mas grande
smaller: En referencia al elemento padre muestra la fuente mas chica
Tambien se pueden usar medidas absolutas(px,em,%)

line-height: El tamaño de la linea, con varias opciones:

Pueden usarse medidas absolutas(px,em,%)
normal: una o dos veces el tamaño actual de la letra.

font-family: El nombre de la fuente, puede ser cualquier fuente, si son mas de una deben estar separados por una coma, y si lleva espacios debe estar entre comillas.

CSS y Javascript

Para modificar el tipo de fuente o cualquier propiedad de la misma, en javascript, debes eliminar los guiones(-) y de la segunda palabra la primer letra debe estar en mayuscula, ejemplo:

#selector {
  font-weight:900;
}

En javascript sería algo así:

getElementById('selector').style.fontWeight="900";