Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Propiedades de fuentes en CSS

Las fuentes son una de las herramientas más potentes de CSS para darle personalidad a una web. Con propiedades como font-family, font-size, o font-weight, puedes controlar desde el tipo de letra hasta su tamaño y estilo. Pero atención: no todas las fuentes funcionan igual en todos los navegadores, y algunas dependen de lo que el usuario tenga instalado o de las fuentes web que cargue la página. Por eso es importante especificar mas de un tipo de fuente.

font-family

Define el tipo de letra. Puedes especificar una lista de fuentes, separadas por comas, para que el navegador use la primera disponible. Es buena práctica terminar con una familia genérica.

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

Familias genéricas: serif, sans-serif, monospace, cursive, fantasy, system-ui.

Nota: Usa comillas para nombres de fuentes con espacios.

<p style="font-family: 'Open Sans', sans-serif;">Texto</p>

@font-face

Permite usar fuentes personalizadas desde archivos externos.

@font-face {
    font-family: "MiFuente";
    src: url("/fonts/mifuente.woff2") format("woff2");
}

Después puedes usarla normalmente:

body {
    font-family: "MiFuente", sans-serif;
}

font-style

Indica si el texto es normal, cursiva o inclinado.

Valores: normal, italic, oblique.

h1 { font-style: italic; }
h1 em { font-style: normal; }

font-variant

Transforma el texto en mayúsculas pequeñas.

Valores: normal, small-caps.

h3 {
    font-variant: small-caps;
}

CSS3: Usa font-variant-caps o font-variant-ligatures para más control.

font-weight

Controla el grosor de la fuente.

  • normal: 400
  • bold: 700
  • bolder, lighter: relativo al valor heredado
  • Valores numéricos: 100 a 900
p { font-weight: normal; }
h1 { font-weight: 700; }
span { font-weight: 200; }

Nota: No todas las fuentes permiten todos los grosores. Algunas solo tienen normal y bold.

font-size

Define el tamaño del texto.

Opciones:

  • Absolutas: xx-small hasta xx-large
  • Relativas: smaller, larger
  • Porcentajes: relativo al valor heredado
  • Unidades: px, em, rem, vw, ch, etc.
h1 { font-size: 2rem; }
p  { font-size: 150%; }

CSS3: Usa clamp() para tamaños adaptables:

p {
    font-size: clamp(16px, 4vw, 18px);
}

Accesibilidad: Usa rem o em para respetar los ajustes del navegador del usuario.

line-height

Define el espacio entre líneas.

Valores: número sin unidad (relativo al font-size), unidades, o porcentaje.

p {
    font-size: 16px;
    line-height: 1.5;
}

Buena práctica: Usa números sin unidad para que escale con el tamaño del texto.

font (abreviada)

Permite declarar varias propiedades en una sola línea.

p {
    font: italic small-caps bold 16px/1.5 "Open Sans", sans-serif;
}

Importante: font-size y font-family son obligatorias. line-height se incluye tras una barra.

Buenas prácticas

Valores universales: Puedes usar initial, inherit y unset en cualquier propiedad de fuente:

  • initial: valor predeterminado del navegador.
  • inherit: hereda del elemento padre.
  • unset: combina los dos anteriores según la propiedad.

Fuentes de respaldo: Termina siempre con una familia genérica como sans-serif.

Fuentes web: Usa @font-face o servicios como Google Fonts, pero asegúrate de optimizar (por ejemplo usando woff2).

Responsividad: Usa unidades relativas y funciones como clamp() para adaptar el texto.

Accesibilidad: Usa tamaños legibles (mínimo 16px), y un line-height de 1.5 a 1.8 para textos largos.

Compatibilidad: Verifica si la fuente admite los grosores o estilos deseados. Algunas propiedades como font-variant-caps no tienen soporte total en todos los navegadores.

Pruebas: Revisa cómo se ve el texto en distintos dispositivos, sistemas operativos y configuraciones de usuario.

TOP