Tutorial CSS: Estilos de fuente

¿Qué son los estilos de fuente y tipografía en CSS?

Los estilos de fuente y tipografía en CSS permiten controlar la apariencia visual del texto en una página web. CSS proporciona una serie de propiedades específicas que permiten manipular diferentes aspectos de la tipografía, incluyendo el tipo de letra, tamaño, peso, estilo, variante y estiramiento. Estos estilos no solo mejoran la estética de una web, sino que también mejoran la legibilidad y accesibilidad del contenido.

Tipos de fuente (Font Types)

En CSS, las fuentes pueden ser categorizadas principalmente en cuatro tipos:

1. Serif: Caracterizadas por tener pequeños adornos en los extremos de las letras. Ejemplo: Times New Roman, Georgia.
2. Sans-serif: No tienen adornos en los extremos, lo que les da un aspecto más limpio y moderno. Ejemplo: Arial, Helvetica.
3. Monospace: Cada carácter ocupa el mismo ancho, ideal para código fuente y texto donde el alineamiento es crítico. Ejemplo: Courier New, Lucida Console.
4. Cursive: Simulan la escritura manual y suelen ser usadas en contextos más casuales o decorativos. Ejemplo: Comic Sans, Brush Script MT.

Fuentes de sistema vs. fuentes personalizadas

Las fuentes de sistema son aquellas que están preinstaladas en el dispositivo del usuario. Utilizar fuentes de sistema puede mejorar el rendimiento ya que no es necesario cargar recursos adicionales.

Las fuentes personalizadas son aquellas que se importan desde archivos externos o servicios web como Google Fonts. Estas permiten un mayor control sobre la identidad visual, pero pueden afectar el rendimiento si no se gestionan adecuadamente. Ejemplo de importación de fuente:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

Unidades de medida en tipografía

Las unidades de medida utilizadas para definir las propiedades tipográficas son cruciales para ajustar la presentación del texto. Las más comunes son:

• Px (píxeles): Unidad absoluta y específica, no escalable.
• Em: Unidad relativa al tamaño de la fuente del elemento padre.
• Rem: Unidad relativa al tamaño de la fuente del elemento raíz (html).
• % (porcentaje): Basado en el tamaño de la fuente del elemento padre.

Herencia de estilos

En CSS, muchas propiedades de fuente son heredadas por los elementos hijos. Esto significa que si estableces una propiedad en un elemento contenedor, los elementos internos adoptarán esa propiedad a menos que sea sobrescrita. Ejemplo:

.container {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.child {
    font-size: 14px; /* Sobrescribe el tamaño de fuente heredada */
}

Consideraciones de accesibilidad

El uso de propiedades de fuente debe tener en cuenta la accesibilidad. Asegúrate de elegir tamaños y tipos de fuente que sean legibles para todos los usuarios, incluyendo aquellos con discapacidades visuales. Evitar el uso excesivo de fuentes decorativas y proporcionar alternativas para aumentar el tamaño de la fuente son buenas prácticas.

El conocimiento profundo de los estilos de fuente y tipografía en CSS permite un mayor control sobre la presentación visual del texto, mejorando tanto la estética como la funcionalidad de tu sitio web.

La propiedad font-family

La propiedad font-family en CSS se utiliza para especificar la familia de fuentes que debe aplicarse a un texto. Este atributo permite definir una lista de fuentes, en orden de preferencia, que el navegador debe intentar aplicar. Si la primera fuente de la lista no está disponible, se aplicará la siguiente, y así sucesivamente. Este comportamiento aumenta la probabilidad de que el texto se muestre de manera consistente y legible en diferentes dispositivos y navegadores.

El formato básico para definir font-family es:

element {
    font-family: "Nombre de la Fuente 1", "Nombre de la Fuente 2", familia-genérica;
}

Familias genéricas

Las familias genéricas son categorías amplias que agrupan diferentes fuentes con características similares. Incluyen:

• serif: Contiene fuentes con adornos conocidos como serifas en los extremos de las letras.
• sans-serif: Fuentes sin adornos, con un diseño más limpio y moderno.
• monospace: Fuentes en las que cada carácter ocupa el mismo ancho.
• cursive: Fuentes que simulan la escritura manual.
• fantasy: Fuentes decorativas y estilizadas.
• system-ui: Fuentes del sistema operativo del usuario.

Especificación y fallback

Al definir font-family, es recomendable incluir varias opciones de fuente y terminar con una familia genérica como fallback. Por ejemplo:

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

En este ejemplo, el navegador intentará utilizar "Roboto" primero. Si no está disponible, probará "Helvetica Neue", luego "Arial", y finalmente una fuente sans-serif genérica si ninguna de las anteriores está presente.

Fuentes de nombre múltiple

Si el nombre de la fuente contiene espacios, debe estar entre comillas:

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

Fuentes personalizadas

Para usar fuentes personalizadas no nativas del sistema, es común importarlas desde servicios web como Google Fonts. Ejemplo:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

p {
    font-family: 'Open Sans', sans-serif;
}

Otra forma de importar fuentes externas es utilizando @font-face:

@font-face {
    font-family: 'MyCustomFont';
    src: url('path/to/font.woff2') format('woff2'),
         url('path/to/font.woff') format('woff');
}

body {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

Consideraciones prácticas

Rendimiento: Al usar fuentes externas, ten en cuenta el tiempo de carga adicional. Las fuentes deben ser optimizadas y cargadas de manera asíncrona o diferida cuando sea posible.

Accesibilidad: Siempre proporciona un fallback de fuente genérica para asegurar la legibilidad en todos los dispositivos. La jerarquía de las fuentes debería favorecer fuentes ampliamente disponibles inicialmente, seguido de alternativas más específicas.

Identidad visual: Elegir una combinación adecuada de fuentes puede fortalecer la identidad visual de un proyecto web. La fuente principal debe complementar los otros estilos de texto y gráficos usados en la página.

La propiedad font-family es fundamental para la personalización y coherencia tipográfica de un sitio web, permitiendo una presentación personalizada y consistente del contenido textual.

La propiedad font-size

La propiedad font-size en CSS se utiliza para especificar el tamaño del texto. Esta propiedad puede tomar valores en diversas unidades, ofreciendo flexibilidad en cómo se dimensiona el contenido tipográfico de una página web. Controlar adecuadamente el tamaño de la fuente es crucial para la legibilidad, accesibilidad y aspecto estético del sitio.

Unidades de medida

Las unidades más comunes para definir font-size incluyen:

• Px (píxeles): Unidad absoluta que proporciona un tamaño fijo. Es útil para un control preciso del diseño pero no es escalable.

body {
    font-size: 16px;
}

• Em: Unidad relativa al tamaño de la fuente del elemento padre. Útil para diseño adaptable.

h1 {
    font-size: 2em; /* 2 veces el tamaño de la fuente del elemento padre */
}

• Rem: Similar a em pero relativa al tamaño de la fuente del elemento raíz (html).

p {
    font-size: 1.5rem; /* 1.5 veces el tamaño de la fuente del elemento raíz */
}

• % (porcentaje): Basado en el tamaño de la fuente del elemento padre.

h2 {
    font-size: 120%; /* 120% del tamaño de la fuente del elemento padre */
}

Valores absolutos y relativos

Además de las unidades mencionadas, font-size puede aceptar valores predefinidos tanto absolutos como relativos:

• Valores absolutos: xx-small, x-small, small, medium, large, x-large, xx-large. Estos valores ofrecen un control sencillo e intuitivo para tamaños básicos.

p.intro {
    font-size: large;
}

• Valores relativos: larger y smaller permiten ajustar el tamaño en relación al tamaño actual de la fuente del elemento.

aside {
    font-size: smaller;
}

Configuración inicial y herencia

El tamaño de la fuente predeterminado para la mayoría de los navegadores es 16px para el elemento raíz (html). Este tamaño puede cambiarse directamente:

html {
    font-size: 100%; /* equivalente a 16px */
}

body {
    font-size: 1rem; /* equivalente a 16px del tamaño de la fuente del elemento raíz */
}

Tipografía adaptativa

En diseños web modernos, es común utilizar tamaños de fuente que se adapten según el tamaño de la pantalla del usuario. Esto se logra utilizando unidades relativas y consultas de medios (media queries):

html {
    font-size: 100%;
}

@media (max-width: 600px) {
    html {
        font-size: 90%;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 110%;
    }
}

En este ejemplo, el tamaño de la fuente se adapta automáticamente según el ancho de la pantalla, mejorando la legibilidad en diferentes dispositivos.

Consideraciones de accesibilidad

La elección de un tamaño adecuado de fuente es esencial para garantizar la accesibilidad de la web. Respetar las directrices de la WCAG (Web Content Accessibility Guidelines) ayuda a asegurar que el texto sea legible para personas con discapacidades visuales. Por ejemplo, un tamaño mínimo recomendado es de 16px para el cuerpo de texto.

Usar unidades relativas como em y rem también facilita a los usuarios ajustar el tamaño del texto a través de las configuraciones de su navegador, proporcionando una experiencia más accesible.

La propiedad font-size es fundamental para el control tipográfico en CSS, ofreciendo múltiples opciones para adaptar la presentación del texto a diferentes contextos y necesidades.

La propiedad font-weight, font-style, font-variant, font-stretch

La propiedad font-weight en CSS se utiliza para especificar el grosor del texto. El atributo acepta valores numéricos representando el peso exacto de la fuente así como palabras clave predefinidas para simplificar su uso.

Valores numéricos entre 100 y 900, en incrementos de 100, permiten un control preciso y son comúnmente aceptados por las tipografías modernas:

p {
    font-weight: 400; /* Normal */
}

strong {
    font-weight: 700; /* Bold */
}

Alternativamente, font-weight también acepta palabras clave:

b {
    font-weight: bold; /* Equivalente a 700 */
}

span.light {
    font-weight: lighter;
}

span.normal {
    font-weight: normal; /* Equivalente a 400 */
}

span.thick {
    font-weight: bolder;
}

font-style se utiliza para especificar el estilo del texto. Los valores comunes incluyen:

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

p.normal {
    font-style: normal;
}

Es importante mencionar que italic y oblique pueden parecer similares, pero tecnológicamente son diferentes. italic hace referencia a un diseño específico de la fuente, mientras que oblique es una inclinación artificial de la fuente normal.

font-variant controla variantes específicas de la tipografía, como el texto en versalitas:

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

p.normal {
    font-variant: normal;
}

Esta propiedad también soporta algunas otras variantes como el número común y las ligaduras históricas en fuentes compatibles.

font-stretch ajusta la anchura del texto, permitiendo presentar variaciones compactas o extendidas de una fuente, aunque no todas las fuentes soportan esta propiedad. Los valores incluyen:

p.stretch-normal {
    font-stretch: normal;
}

p.stretch-expanded {
    font-stretch: expanded;
}

p.stretch-condensed {
    font-stretch: condensed;
}

p.stretch-ultra-expanded {
    font-stretch: ultra-expanded;
}

p.stretch-semi-condensed {
    font-stretch: semi-condensed;
}

Esta propiedad ofrece valores incrementales de estrechamiento y expansión, ampliando la flexibilidad tipográfica.

Juntas, estas propiedades permiten un control avanzado y granular sobre la apariencia y estilo del texto en un sitio web, mejorando tanto la estética como la accesibilidad. Utilizarlas correctamente facilita la creación de presentaciones tipográficas coherentes y visualmente atractivas.

La propiedad line-height

La propiedad line-height en CSS se utiliza para establecer la altura de la línea de texto dentro de un elemento. Esta propiedad es crucial para controlar el espaciado vertical entre las líneas de texto y puede influir significativamente en la legibilidad y percepción estética del contenido.

Unidades y valores

line-height puede tomar diferentes tipos de valores, cada uno proporcionando un modo distinto de especificar la altura de la línea:

• Números: Cuando se utiliza un valor numérico, el line-height se multiplica por el tamaño de la fuente del elemento (font-size). Por ejemplo, un valor de 1.5 significa que la altura de la línea será 1.5 veces el tamaño de la fuente.

p {
    font-size: 18px;
    line-height: 1.5; /* 18px * 1.5 = 27px */
}

• Unidades de longitud: Son valores absolutos (como px) o relativos (como em, rem). Utilizar unidades de longitud define explícitamente la altura de la línea.

p {
    line-height: 24px; /* Altura de línea fija de 24 píxeles */
}

p {
    font-size: 16px;
    line-height: 1.5em; /* Altura de línea de 1.5 veces el tamaño de la fuente */
}

• Porcentajes: Son relativos al tamaño de la fuente del elemento. Por ejemplo, 150% significa que la altura de la línea será 1.5 veces el tamaño de la fuente.

p {
    font-size: 16px;
    line-height: 150%; /* 16px * 1.5 = 24px */
}

• Palabras clave: Aunque menos comunes, las palabras clave como normal pueden ser utilizadas. La altura de línea normal suele estar alrededor de 1.2 a 1.5 veces el tamaño de la fuente.

p {
    line-height: normal; /* Valor predeterminado, generalmente entre 1.2 y 1.5 */
}

Herencia y contexto de uso

line-height es una propiedad heredable en CSS. Esto significa que si se establece en un elemento padre, se aplicará automáticamente a los elementos hijos a menos que se sobrescriba explícitamente.

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

h1 {
    font-size: 32px;
    line-height: 1.2; /* Sobrescribiendo el valor heredado */
}

p {
    /* Hereda 1.5 de body */
}

Aplicaciones prácticas

• Legibilidad: Un line-height adecuado mejora la legibilidad del texto. Un valor entre 1.4 y 1.6 suele ser óptimo para la mayoría de los casos.

article {
    line-height: 1.6; /* Mejora la legibilidad del bloque de texto */
}

• Estética: Modular la altura de línea puede ser utilizado para conseguir un diseño más aireado o más compacto según se necesite.

.compact {
    line-height: 1.2;
}

.airy {
    line-height: 2;
}

• Alineación vertical: Al trabajar con componentes y layouts complejos, line-height puede ayudar a alinear verticalmente elementos dentro de contenedores.

.container {
    display: flex;
    align-items: center;
    height: 100px;
}

.text {
    line-height: 100px; /* Texto centrado verticalmente dentro del contenedor */
}

Consideraciones de accesibilidad

La configuración adecuada de la altura de línea es importante para la accesibilidad. Un espacio de línea insuficiente puede dificultar la lectura para personas con discapacidades visuales o dislexia. Siempre considera ajustar line-height en función del tamaño de la fuente y el tipo de contenido para asegurar una experiencia accesible.

La propiedad line-height es una herramienta esencial para diseñadores y desarrolladores que buscan controlar de manera precisa la tipografía y el espaciado del texto, mejorando así la legibilidad y estética de las páginas web.

Tipografía responsiva

La tipografía responsiva es un enfoque en el diseño web que se adapta a diferentes tamaños de pantalla y dispositivos, garantizando que el texto sea legible y atractivo en cualquier contexto. Este concepto es crucial en el diseño web moderno dado que los usuarios acceden a sitios web desde una amplia variedad de dispositivos con diferentes resoluciones.

Para implementar una tipografía responsiva efectiva, se pueden utilizar unidades relativas y consultas de medios (media queries).

Unidades de medida relativas

Las unidades relativas como em, rem, y porcentajes (%) permiten que el tamaño de la fuente se ajuste dinámicamente al contexto en el que se encuentra.

rem:

rem se basa en el tamaño de la fuente del elemento raíz (<html>). Esto facilita ajustar la tipografía de manera consistente en todo el sitio web.

html {
    font-size: 16px; /* 1rem = 16px */
}

body {
    font-size: 1rem; /* 16px */
}

h1 {
    font-size: 2.5rem; /* 40px */
}

h2 {
    font-size: 2rem; /* 32px */
}

p {
    font-size: 1rem; /* 16px */
}

em:

em es relativo al tamaño de la fuente del elemento padre, lo que puede ser útil para componentes individuales.

.container {
    font-size: 1rem; /* 16px */
}

h1 {
    font-size: 2em; /* 32px dentro de .container */
}

p {
    font-size: 1em; /* 16px dentro de .container */
}

Consultas de medios (Media queries)

Las consultas de medios permiten cambiar el estilo de acuerdo con las características del dispositivo, como el ancho de la pantalla. Esto se puede utilizar para ajustar la tipografía en dispositivos móviles, tabletas y pantallas grandes.

body {
    font-size: 16px;
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 2rem; /* 28px */
    }

    p {
        font-size: 0.875rem; /* 14px */
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 3rem; /* 54px */
    }

    p {
        font-size: 1.125rem; /* 20.25px */
    }
}

Técnicas avanzadas con CSS grid y Flexbox

CSS grid y Flexbox pueden ayudar a construir layouts responsivos que afectan cómo y dónde el texto aparece en la página, mejorando la legibilidad y adaptabilidad del contenido.

CSS grid:

.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }

    .text-element {
        font-size: 1.25rem; /* 20px */
    }
}

Flexbox:

.flex-container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .flex-container {
        flex-direction: row;
    }

    .text-element {
        font-size: 1.25rem; /* 20px */
        margin: 1rem;
    }
}

Integración de variaciones tipográficas

Al crear una tipografía responsiva, es esencial mantener la coherencia visual adaptando la tipografía no solo en tamaño, sino también en otros atributos como font-weight, line-height, y letter-spacing.

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    body {
        line-height: 1.4;
        letter-spacing: 0.4px;
    }
}

Consideraciones de accesibilidad

Asegurarse de que la tipografía sea accesible implica más que solo ajustar el tamaño. El contraste, el espaciado entre las letras y las palabras, y la altura de la línea deben ser considerados.

body {
    font-size: 1rem; 
    color: #333;
    background-color: #f9f9f9;
}

a {
    color: #007acc;
    text-decoration: underline;
}

a:hover {
    color: #005f99;
}

p {
    line-height: 1.6;
    letter-spacing: 0.02em;
}

A través de estas técnicas, es posible crear una tipografía responsiva que se adapte eficazmente a las necesidades de diferentes usuarios y dispositivos, garantizando una experiencia de lectura óptima y accesible en todo momento.

Importación de fuentes externas

En CSS, la importación de fuentes externas permite la utilización de fuentes que no están instaladas en el dispositivo del usuario, proporcionando flexibilidad adicional en el diseño y estilo de texto para aplicaciones web. Existen varios métodos para importar fuentes externas: a través de servicios web como Google Fonts, utilizando la regla @import y mediante la regla @font-face.

Google Fonts

Google Fonts es uno de los métodos más simples y populares para importar fuentes externas. Ofrece una amplia variedad de tipografías gratuitas que pueden ser fácilmente integradas en un proyecto web.

Para utilizar Google Fonts, primero accede a su sitio web, selecciona las fuentes deseadas y copia el enlace de importación generado, que típicamente tiene este formato:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

Incorpora este enlace dentro del <head> de tu documento HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <title>Importación de fuentes externas</title>
</head>
<body>
    <p style="font-family: 'Roboto', sans-serif;">Este es un ejemplo usando la fuente Roboto</p>
</body>
</html>

Ahora, puedes utilizar la fuente Roboto en tu CSS mediante la propiedad font-family:

body {
    font-family: 'Roboto', sans-serif;
}

Regla @import

Otra manera de importar fuentes desde Google Fonts o cualquier otra fuente es utilizando la regla @import en tu archivo CSS:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

h1 {
    font-family: 'Open Sans', sans-serif;
}

Este método funciona de manera similar a la inclusión de un enlace en el archivo HTML, pero puede ser más conveniente si prefieres mantener todas tus declaraciones de estilo en un solo archivo CSS.

Regla @font-face

La regla @font-face proporciona un método más flexible y robusto para importar fuentes personalizadas. Permite especificar una fuente utilizando una URL directa al archivo de la fuente, lo que puede ser especialmente útil si tienes una fuente alojada en tu propio servidor:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

p.custom-font {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

Gestión de formatos y compatibilidad

Es importante considerar múltiples formatos de archivo para asegurar la compatibilidad con todos los navegadores. Los formatos más comunes incluyen WOFF2, WOFF, TTF y EOT. En general, WOFF2 se recomienda como la primera opción debido a su eficaz compresión y soporte moderno.

Ejemplo de incluir varios formatos en @font-face:

@font-face {
    font-family: 'ExampleFont';
    src: url('/path/to/font.woff2') format('woff2'),
         url('/path/to/font.woff') format('woff'),
         url('/path/to/font.ttf') format('truetype'),
         url('/path/to/font.eot') format('embedded-opentype');
}

Subconjuntos y rendimiento

Cuando trabajes con fuentes externas, siempre es ideal cargar solo los subconjuntos de caracteres necesarios para optimizar el rendimiento. Servicios como Google Fonts permiten especificar subconjuntos al generar la URL de la fuente.

Además, puedes optimizar la carga de fuentes utilizando técnicas como font-display para controlar cómo se maneja la transición entre las fuentes durante la carga:

@font-face {
    font-family: 'ExampleFont';
    src: url('/path/to/font.woff2') format('woff2');
    font-display: swap; /* Utiliza una fuente alternativa mientras se carga la personalizada */
}

font-display soporta varios valores, siendo swap comúnmente utilizado para mejorar la experiencia del usuario al prevenir el "flash de texto invisible".

Estos métodos de importación de fuentes externas proporcionan herramientas eficaces para personalizar la tipografía de una aplicación web, mejorando tanto la estética como la funcionalidad del diseño tipográfico.