Tutorial CSS: Tipografía avanzada

Alineación vertical con vertical-align y baseline

La alineación vertical de elementos en CSS es uno de esos aspectos que parecen sencillos a primera vista, pero que pueden resultar sorprendentemente complejos en la práctica. Entender cómo funciona la propiedad vertical-align y el concepto de baseline nos ayudará a controlar con precisión la posición vertical de los elementos en línea.

Fundamentos de vertical-align

La propiedad vertical-align determina cómo se alinean verticalmente los elementos inline o inline-block dentro de su contenedor. Esta propiedad no afecta a elementos en bloque, lo cual es una confusión común entre quienes se inician en CSS.

Los valores básicos que podemos asignar a vertical-align son:

• baseline (valor por defecto)
• top
• middle
• bottom
• sub
• super
• text-top
• text-bottom
• Valores en longitud (px, em, %)

Veamos un ejemplo sencillo con imágenes y texto:

.icon {
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

.icon-top {
  vertical-align: top;
}

.icon-baseline {
  vertical-align: baseline;
}

.icon-bottom {
  vertical-align: bottom;
}

<p>
  Texto con icono <img src="icon.svg" class="icon"> alineado al medio.
  <br>
  Texto con icono <img src="icon.svg" class="icon icon-top"> alineado arriba.
  <br>
  Texto con icono <img src="icon.svg" class="icon icon-baseline"> en la línea base.
  <br>
  Texto con icono <img src="icon.svg" class="icon icon-bottom"> alineado abajo.
</p>

Entendiendo la línea base (baseline)

El concepto de baseline es fundamental para comprender la alineación vertical. La línea base es una línea imaginaria sobre la que se asientan los caracteres de texto. Algunos caracteres como "g", "j" o "p" tienen partes que descienden por debajo de esta línea.

Por defecto, los elementos inline se alinean con su línea base coincidiendo con la línea base del texto circundante. Esto explica por qué a veces vemos pequeños espacios debajo de las imágenes cuando las colocamos junto al texto.

Alineación con valores específicos

Exploremos con más detalle los valores más comunes:

• baseline: Alinea la línea base del elemento con la línea base del elemento padre.

• middle: Alinea el punto medio del elemento con la línea base del padre más la mitad de la altura de la "x" (x-height) del padre.

• top: Alinea la parte superior del elemento con la parte superior de la línea más alta.

• bottom: Alinea la parte inferior del elemento con la parte inferior de la línea.

• text-top: Alinea la parte superior del elemento con la parte superior del texto del elemento padre.

• text-bottom: Alinea la parte inferior del elemento con la parte inferior del texto del elemento padre.

Veamos un ejemplo más elaborado:

.container {
  font-size: 20px;
  line-height: 1.5;
  background-color: #f0f0f0;
  padding: 10px;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  margin-right: 10px;
}

.baseline {
  vertical-align: baseline;
}

.middle {
  vertical-align: middle;
}

.top {
  vertical-align: top;
}

.bottom {
  vertical-align: bottom;
}

.text-top {
  vertical-align: text-top;
}

.text-bottom {
  vertical-align: text-bottom;
}

<div class="container">
  Texto base
  <div class="box baseline"></div>
  <div class="box middle"></div>
  <div class="box top"></div>
  <div class="box bottom"></div>
  <div class="box text-top"></div>
  <div class="box text-bottom"></div>
</div>

Valores numéricos y porcentajes

Además de los valores predefinidos, vertical-align acepta valores numéricos y porcentajes:

.shift-up {
  vertical-align: -5px; /* Desplaza 5px hacia arriba desde la línea base */
}

.shift-down {
  vertical-align: 10px; /* Desplaza 10px hacia abajo desde la línea base */
}

.percent {
  vertical-align: 50%; /* Desplaza hacia arriba un 50% de la line-height del elemento */
}

Estos valores son relativos a la línea base. Los valores negativos mueven el elemento hacia arriba, mientras que los valores positivos lo mueven hacia abajo.

Casos prácticos de uso

1. Centrar iconos junto a texto

Un caso de uso común es alinear iconos con texto:

.icon {
  vertical-align: middle;
  margin-right: 5px;
}

<button>
  <img src="icon.svg" class="icon" alt="">
  Enviar mensaje
</button>

2. Eliminar el espacio bajo las imágenes

Para eliminar el pequeño espacio que aparece debajo de las imágenes:

img {
  vertical-align: bottom; /* o también: middle, top */
  display: block; /* Otra solución alternativa */
}

3. Alinear elementos en tablas

En celdas de tabla, podemos controlar la alineación vertical:

td {
  vertical-align: middle; /* Centra el contenido verticalmente */
  height: 100px;
}

.header-cell {
  vertical-align: bottom; /* Alinea el contenido con la parte inferior */
}

Limitaciones y consideraciones

Es importante entender algunas limitaciones de vertical-align:

• Solo funciona en elementos inline, inline-block o celdas de tabla.
• No funciona para centrar contenido verticalmente dentro de un contenedor en bloque (para esto es mejor usar flexbox o grid).
• El comportamiento puede variar ligeramente entre navegadores.

Solución de problemas comunes

Problema: Espacio no deseado debajo de imágenes

/* Solución 1: Cambiar vertical-align */
img {
  vertical-align: bottom;
}

/* Solución 2: Convertir a bloque */
img {
  display: block;
}

Problema: Alineación inconsistente de iconos con texto

/* Asegúrate de que tanto el icono como el texto tengan propiedades consistentes */
.icon {
  vertical-align: middle;
  font-size: inherit; /* Si el icono es un elemento de fuente */
}

Combinación con line-height

La propiedad line-height afecta directamente a cómo funciona vertical-align, ya que determina la altura de la línea y, por tanto, el espacio disponible para la alineación:

.container {
  line-height: 2; /* Aumenta el espacio entre líneas */
}

.icon {
  vertical-align: middle; /* El comportamiento cambiará según el line-height */
}

La interacción entre vertical-align y line-height es especialmente importante cuando trabajamos con texto de diferentes tamaños o elementos con alturas variables.

Ejemplo práctico: Formulario con iconos

Un ejemplo real donde la alineación vertical es crucial:

.input-group {
  margin-bottom: 15px;
}

.input-icon {
  vertical-align: middle;
  margin-right: 8px;
  width: 18px;
  height: 18px;
}

.form-input {
  vertical-align: middle;
  padding: 8px;
  font-size: 16px;
}

<div class="input-group">
  <img src="user-icon.svg" class="input-icon" alt="">
  <input type="text" class="form-input" placeholder="Nombre de usuario">
</div>
<div class="input-group">
  <img src="lock-icon.svg" class="input-icon" alt="">
  <input type="password" class="form-input" placeholder="Contraseña">
</div>

Entender cómo funciona vertical-align y el concepto de baseline nos permite controlar con precisión la alineación vertical de elementos en línea, mejorando significativamente la apariencia y profesionalidad de nuestros diseños web.

Font-display y estrategias de carga de fuentes

La carga de fuentes web puede tener un impacto significativo en el rendimiento y la experiencia del usuario. Cuando utilizamos fuentes personalizadas, es común experimentar el llamado "parpadeo de texto invisible" (FOIT - Flash of Invisible Text) o el "parpadeo de texto sin estilo" (FOUT - Flash of Unstyled Text). La propiedad font-display nos permite controlar cómo se comportan las fuentes durante su carga.

La propiedad font-display

La propiedad font-display se utiliza dentro de la regla @font-face y determina cómo se renderiza el texto mientras la fuente se está descargando. Esta propiedad acepta cinco valores diferentes:

• auto (comportamiento predeterminado del navegador)
• block
• swap
• fallback
• optional

Cada uno de estos valores define un comportamiento específico durante tres períodos de tiempo:

1. Período de bloqueo: tiempo durante el cual el navegador puede mostrar texto invisible mientras espera la fuente.
2. Período de intercambio: tiempo durante el cual el navegador puede mostrar una fuente alternativa mientras espera la fuente personalizada.
3. Período de fallo: momento en que el navegador decide que la fuente ha fallado en cargar.

Veamos cómo implementar font-display en una regla @font-face:

@font-face {
  font-family: 'OpenSans';
  src: url('opensans.woff2') format('woff2'),
       url('opensans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Estrategia de visualización */
}

Valores de font-display y sus comportamientos

1. font-display: auto

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: auto;
}

Con auto, el navegador utiliza su estrategia predeterminada para mostrar fuentes. Generalmente, esto significa que el texto permanecerá invisible durante un breve período mientras se carga la fuente (FOIT).

2. font-display: block

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: block;
}

Con block, el navegador establece un período de bloqueo corto (generalmente 3 segundos) durante el cual el texto permanece invisible. Si la fuente no se carga en ese tiempo, se muestra el texto con una fuente alternativa hasta que la personalizada esté disponible.

Este valor prioriza la consistencia visual sobre la velocidad de visualización del contenido.

3. font-display: swap

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Con swap, el navegador muestra inmediatamente el texto utilizando una fuente alternativa (fallback) y luego "intercambia" a la fuente personalizada cuando ésta termina de cargarse. No hay período de bloqueo.

Este valor prioriza la visualización inmediata del contenido sobre la consistencia visual, lo que puede causar un FOUT (Flash of Unstyled Text).

4. font-display: fallback

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: fallback;
}

Con fallback, el navegador establece un período de bloqueo muy corto (100ms aproximadamente). Si la fuente no se carga en ese tiempo, se muestra el texto con una fuente alternativa. Luego hay un período de intercambio corto (3 segundos aproximadamente) durante el cual la fuente personalizada puede reemplazar a la alternativa si termina de cargarse.

Este valor busca un equilibrio entre mostrar contenido rápidamente y minimizar el cambio visual.

5. font-display: optional

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

Con optional, el navegador establece un período de bloqueo muy corto similar a fallback. La diferencia es que el navegador puede decidir no utilizar la fuente personalizada en absoluto, basándose en la velocidad de conexión del usuario.

Este valor prioriza el rendimiento sobre la fidelidad visual, siendo ideal para conexiones lentas.

Estrategias de carga de fuentes

Además de font-display, existen otras técnicas para optimizar la carga de fuentes:

1. Precargar fuentes críticas con rel="preload"

<link rel="preload" href="fonts/opensans.woff2" as="font" type="font/woff2" crossorigin>

El atributo preload indica al navegador que debe comenzar a descargar este recurso lo antes posible, ya que será necesario pronto. Esto es especialmente útil para fuentes críticas que se utilizan en el contenido visible inicialmente.

2. Subconjuntos de fuentes (font subsetting)

Reducir el tamaño de los archivos de fuentes incluyendo solo los caracteres necesarios:

@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF; /* Solo caracteres latinos básicos */
  font-display: swap;
}

La propiedad unicode-range especifica qué rango de caracteres incluye esta fuente, permitiendo al navegador cargar solo los subconjuntos necesarios.

3. Formato de fuentes moderno (WOFF2)

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

El formato WOFF2 ofrece una mejor compresión (aproximadamente 30% más pequeño que WOFF), reduciendo significativamente el tiempo de carga. Es recomendable proporcionar WOFF como respaldo para navegadores más antiguos.

4. Fuentes variables

Las fuentes variables permiten incluir múltiples variaciones de una familia de fuentes en un solo archivo:

@font-face {
  font-family: 'MyVariableFont';
  src: url('myvariablefont.woff2') format('woff2-variations');
  font-weight: 100 900; /* Rango de pesos disponibles */
  font-display: swap;
}

.light-text {
  font-weight: 300;
}

.bold-text {
  font-weight: 700;
}

En lugar de cargar archivos separados para cada peso o estilo, las fuentes variables permiten ajustar estos parámetros dinámicamente desde un único archivo.

Ejemplo práctico: Estrategia completa de carga de fuentes

Veamos un ejemplo que combina varias estrategias para una carga óptima:

<!-- En el <head> del documento HTML -->
<link rel="preload" href="fonts/opensans-latin.woff2" as="font" type="font/woff2" crossorigin>

/* Fuente principal con subconjuntos */
@font-face {
  font-family: 'OpenSans';
  src: url('fonts/opensans-latin.woff2') format('woff2'),
       url('fonts/opensans-latin.woff') format('woff');
  unicode-range: U+0000-00FF; /* Caracteres latinos básicos */
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'OpenSans';
  src: url('fonts/opensans-latin-ext.woff2') format('woff2'),
       url('fonts/opensans-latin-ext.woff') format('woff');
  unicode-range: U+0100-024F; /* Caracteres latinos extendidos */
  font-weight: 400;
  font-display: fallback;
}

/* Definición de fuentes alternativas */
body {
  font-family: 'OpenSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

En este ejemplo:

1. Precargamos la fuente latina básica que se usará inmediatamente.
2. Utilizamos subconjuntos para cargar solo los caracteres necesarios.
3. Aplicamos diferentes estrategias de font-display según la prioridad del contenido.
4. Proporcionamos una cascada de fuentes alternativas de sistema de alta calidad.

Consideraciones de rendimiento

• Limita el número de fuentes: Cada fuente adicional aumenta el tiempo de carga.
• Prioriza formatos modernos: WOFF2 ofrece la mejor compresión.
• Considera el uso de fuentes del sistema: Las fuentes del sistema no requieren descarga y pueden ofrecer una buena experiencia de usuario.

/* Ejemplo de stack de fuentes del sistema */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

• Monitoriza el rendimiento: Utiliza herramientas como Lighthouse o WebPageTest para evaluar el impacto de tus estrategias de carga de fuentes.

La elección de la estrategia adecuada de font-display y las técnicas de optimización dependerá de las prioridades específicas de tu proyecto: si priorizas la consistencia visual, la velocidad de carga del contenido o buscas un equilibrio entre ambas.

Ajuste de kerning y ligaduras con font-feature-settings

La tipografía profesional va mucho más allá de elegir una fuente bonita. Los detalles tipográficos como el espaciado entre caracteres específicos (kerning) y las ligaduras pueden marcar la diferencia entre un diseño amateur y uno profesional. CSS nos ofrece control preciso sobre estos aspectos mediante la propiedad font-feature-settings.

¿Qué son el kerning y las ligaduras?

Antes de sumergirnos en el código, es importante entender estos conceptos:

• Kerning: Es el ajuste del espacio entre pares de caracteres específicos para mejorar la legibilidad y apariencia visual. Por ejemplo, en pares como "AV", "To" o "Wa", un buen kerning acerca estos caracteres de manera que el espacio entre ellos parezca ópticamente consistente.

• Ligaduras: Son caracteres especiales que combinan dos o más glifos en uno solo. Las ligaduras más comunes son "fi", "fl", "ff", donde las letras se fusionan para evitar colisiones entre partes de los caracteres y mejorar la estética del texto.

La propiedad font-feature-settings

La propiedad font-feature-settings nos permite acceder a características tipográficas avanzadas que están incluidas en muchas fuentes OpenType modernas. Esta propiedad utiliza etiquetas de características OpenType de cuatro caracteres para activar o desactivar funcionalidades específicas.

La sintaxis básica es:

.elemento {
  font-feature-settings: "xxxx" on/off, "yyyy" on/off;
}

Donde "xxxx" e "yyyy" son las etiquetas de características OpenType.

Control del kerning

Para controlar el kerning, utilizamos la etiqueta kern:

.texto-con-kerning {
  font-feature-settings: "kern" on;
}

.texto-sin-kerning {
  font-feature-settings: "kern" off;
}

También existe una propiedad específica para el kerning que es más recomendable usar cuando solo queremos ajustar esta característica:

.texto-con-kerning {
  font-kerning: normal; /* Activa el kerning */
}

.texto-sin-kerning {
  font-kerning: none; /* Desactiva el kerning */
}

La propiedad font-kerning acepta tres valores:

• auto: El navegador decide si aplicar kerning o no
• normal: Activa el kerning
• none: Desactiva el kerning

Trabajando con ligaduras

Las ligaduras se controlan mediante varias etiquetas, dependiendo del tipo de ligadura que queramos activar:

• liga: Ligaduras estándar (fi, fl, ff)
• dlig: Ligaduras discrecionales (más decorativas)
• hlig: Ligaduras históricas
• clig: Ligaduras contextuales

Ejemplo de implementación:

.texto-con-ligaduras-estandar {
  font-feature-settings: "liga" on;
}

.texto-con-todas-ligaduras {
  font-feature-settings: "liga" on, "dlig" on, "hlig" on, "clig" on;
}

.texto-sin-ligaduras {
  font-feature-settings: "liga" off;
}

Al igual que con el kerning, CSS ofrece propiedades específicas para las ligaduras:

.texto {
  font-variant-ligatures: common-ligatures; /* Activa ligaduras comunes */
}

.texto-avanzado {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

.texto-sin-ligaduras {
  font-variant-ligatures: no-common-ligatures;
}

Ejemplo práctico combinando kerning y ligaduras

Veamos un ejemplo completo que aplica tanto kerning como ligaduras:

.texto-tipografico {
  /* Enfoque con propiedades específicas (recomendado) */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  
  /* Alternativa con font-feature-settings */
  /* font-feature-settings: "kern" on, "liga" on, "dlig" on; */
}

<p class="texto-tipografico">
  Affinity Typography offers fine kerning adjustments for professional text layouts.
</p>

Características tipográficas adicionales

Además del kerning y las ligaduras, font-feature-settings permite controlar muchas otras características tipográficas:

Números de estilo antiguo vs. alineados

.numeros-alineados {
  font-feature-settings: "lnum" on; /* Lining numbers */
}

.numeros-estilo-antiguo {
  font-feature-settings: "onum" on; /* Old-style numbers */
}

Números tabulares vs. proporcionales

.numeros-tabulares {
  font-feature-settings: "tnum" on; /* Tabular numbers - mismo ancho */
}

.numeros-proporcionales {
  font-feature-settings: "pnum" on; /* Proportional numbers - ancho variable */
}

Fracciones

.fracciones {
  font-feature-settings: "frac" on; /* Convierte 1/2 en ½ */
}

Versalitas (small caps)

.versalitas {
  font-feature-settings: "smcp" on; /* Small caps */
}

Combinando múltiples características

Podemos combinar varias características en una sola declaración:

.texto-financiero {
  font-feature-settings: "kern" on, "liga" on, "tnum" on, "frac" on;
}

Este ejemplo activaría el kerning, las ligaduras estándar, los números tabulares y las fracciones, ideal para un texto con contenido financiero.

Propiedades específicas vs. font-feature-settings

Aunque font-feature-settings es muy potente, es preferible usar propiedades CSS específicas cuando sea posible:

/* Mejor enfoque: usar propiedades específicas */
.texto-tipografico {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-variant-caps: small-caps;
}

/* Enfoque alternativo: usar font-feature-settings */
.texto-tipografico-alternativo {
  font-feature-settings: "kern" on, "liga" on, "onum" on, "tnum" on, "smcp" on;
}

Las propiedades específicas tienen mejor soporte en navegadores y son más fáciles de mantener.

Verificación de soporte de características

No todas las fuentes soportan todas las características OpenType. Para verificar qué características están disponibles en una fuente específica, puedes usar herramientas como:

• Wakamai Fondue
• Font Squirrel Webfont Generator

Ejemplo práctico: Texto editorial profesional

Veamos un ejemplo completo para un texto editorial que requiere alta calidad tipográfica:

.articulo {
  font-family: 'Equity Text', Georgia, serif;
  line-height: 1.5;
  
  /* Características tipográficas */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  
  /* Para navegadores que no soportan las propiedades anteriores */
  font-feature-settings: "kern" on, "liga" on, "clig" on, "onum" on, "pnum" on;
}

.articulo h1, .articulo h2 {
  font-variant-caps: small-caps;
  font-feature-settings: "kern" on, "liga" on, "smcp" on;
}

.articulo .datos-financieros {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern" on, "liga" on, "lnum" on, "tnum" on;
}

Consideraciones de rendimiento y compatibilidad

• Rendimiento: Activar muchas características OpenType puede afectar ligeramente el rendimiento de renderizado, especialmente en dispositivos de gama baja.

• Compatibilidad: Aunque el soporte para font-feature-settings es bueno en navegadores modernos, siempre es recomendable proporcionar alternativas para navegadores más antiguos.

• Tamaño de archivo: Las fuentes con muchas características OpenType tienden a ser más grandes, lo que puede afectar los tiempos de carga.

/* Enfoque progresivo */
.texto {
  /* Solución básica para todos los navegadores */
  font-family: 'Mi Fuente', serif;
  
  /* Mejoras para navegadores modernos */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  
  /* Fallback para navegadores que solo soportan font-feature-settings */
  font-feature-settings: "kern" on, "liga" on;
}

Uso en interfaces de usuario

Para interfaces de usuario, es importante considerar la legibilidad por encima de la estética:

.ui-elemento {
  /* Priorizar legibilidad en UI */
  font-kerning: normal;
  font-variant-ligatures: no-common-ligatures;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern" on, "liga" off, "lnum" on, "tnum" on;
}

En interfaces, los números alineados y tabulares suelen ser preferibles para mantener la consistencia visual, mientras que las ligaduras pueden desactivarse para mejorar la legibilidad en tamaños pequeños.

El dominio de estas características tipográficas avanzadas te permitirá crear diseños web con una calidad tipográfica profesional, mejorando tanto la estética como la legibilidad de tus proyectos.