Font Size, Weight y Style

En el diseño web, la tipografía juega un papel fundamental para transmitir información, establecer jerarquías visuales y crear una experiencia de usuario agradable. En este artículo, profundizaremos en tres propiedades esenciales para el control tipográfico en CSS: font-size, font-weight y font-style.

Font Size (Tamaño de fuente)

La propiedad font-size controla el tamaño del texto. Esta propiedad es crucial para establecer jerarquías visuales y asegurar la legibilidad del contenido.

Unidades para font-size

Podemos especificar el tamaño de fuente utilizando diferentes unidades:

Unidades absolutas

h1 {
  font-size: 32px; /* píxeles */
}

h2 {
  font-size: 24pt; /* puntos (1pt = 1/72 de pulgada) */
}

Las unidades absolutas tienen un tamaño fijo y no cambian según el contexto. Sin embargo, no son ideales para diseños responsivos.

Unidades relativas

body {
  font-size: 16px; /* Tamaño base */
}

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

h2 {
  font-size: 1.5rem; /* 1.5 veces el tamaño raíz (html) */
}

.hero-title {
  font-size: 5vw; /* 5% del ancho de la ventana */
}

Las unidades relativas son preferibles para diseños responsivos:

• em: Relativa al tamaño de fuente del elemento padre
• rem: Relativa al tamaño de fuente del elemento raíz (html)
• vw: Relativa al ancho de la ventana (viewport width)
• vh: Relativa a la altura de la ventana (viewport height)
• %: Porcentaje relativo al tamaño del elemento padre

Tamaños de fuente responsivos

Para crear tamaños de fuente que se adapten a diferentes tamaños de pantalla, podemos usar:

Media queries

h1 {
  font-size: 1.8rem; /* Tamaño base */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.2rem; /* Tamaño para tablets */
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem; /* Tamaño para escritorio */
  }
}

Función calc()

h1 {
  /* Tamaño base + tamaño adicional proporcional al ancho de la ventana */
  font-size: calc(1.5rem + 1.5vw);
}

Función clamp()

h1 {
  /* Mínimo, preferido (escalable), máximo */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

La función clamp() es especialmente útil, ya que establece un tamaño mínimo y máximo, con un valor preferido que escala según el tamaño de la ventana.

Escala tipográfica

Una escala tipográfica bien definida crea coherencia visual en todo el sitio:

:root {
  --ratio: 1.25; /* Escala mayor tercera */
  --base-size: 1rem;
  
  --text-xs: calc(var(--base-size) / var(--ratio));
  --text-sm: var(--base-size);
  --text-md: calc(var(--base-size) * var(--ratio));
  --text-lg: calc(var(--text-md) * var(--ratio));
  --text-xl: calc(var(--text-lg) * var(--ratio));
  --text-2xl: calc(var(--text-xl) * var(--ratio));
  --text-3xl: calc(var(--text-2xl) * var(--ratio));
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { font-size: var(--text-sm); }
.small { font-size: var(--text-xs); }

Font Weight (Peso de fuente)

La propiedad font-weight controla el grosor o peso visual de la fuente. Esta propiedad es esencial para crear énfasis y contraste en el texto.

Valores numéricos

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

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

h1 {
  font-weight: 900; /* Extra negrita */
}

Los valores numéricos van desde 100 (muy ligero) hasta 900 (muy grueso), en incrementos de 100:

• 100: Thin (Extra Light)
• 200: Extra Light (Ultra Light)
• 300: Light
• 400: Normal (Regular)
• 500: Medium
• 600: Semi Bold (Demi Bold)
• 700: Bold
• 800: Extra Bold (Ultra Bold)
• 900: Black (Heavy)

Valores con palabras clave

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

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

Valores relativos

p {
  font-weight: lighter; /* Más ligero que el elemento padre */
}

strong {
  font-weight: bolder; /* Más grueso que el elemento padre */
}

Disponibilidad de pesos

Es importante tener en cuenta que no todas las fuentes tienen todos los pesos disponibles. Si especificas un peso que no está disponible, el navegador utilizará el peso disponible más cercano.

/* Si la fuente solo tiene los pesos 400 y 700 */
.medium {
  font-weight: 500; /* El navegador usará 400 */
}

.extra-bold {
  font-weight: 800; /* El navegador usará 700 */
}

Cargar múltiples pesos con Google Fonts

Para asegurarte de tener disponibles los pesos que necesitas, puedes cargar específicamente esos pesos:

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

.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.black { font-weight: 900; }

Fuentes variables

Las fuentes variables modernas permiten utilizar cualquier peso dentro de un rango definido:

@font-face {
  font-family: 'MiFuenteVariable';
  src: url('mi-fuente-variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* Rango de pesos soportados */
}

.custom-weight {
  font-family: 'MiFuenteVariable';
  font-weight: 547; /* Cualquier valor entre 100 y 900 */
}

Font Style (Estilo de fuente)

La propiedad font-style controla si el texto se muestra en cursiva o no.

Valores

p {
  font-style: normal; /* Texto normal */
}

em {
  font-style: italic; /* Texto en cursiva */
}

.special {
  font-style: oblique; /* Similar a italic, pero técnicamente diferente */
}

La diferencia entre italic y oblique:

• italic utiliza una versión específicamente diseñada para cursiva
• oblique simplemente inclina los caracteres de la versión normal

Grado de inclinación para oblique

En algunas fuentes, puedes especificar el grado de inclinación para oblique:

.slightly-oblique {
  font-style: oblique 10deg;
}

.very-oblique {
  font-style: oblique 20deg;
}

Disponibilidad de estilos

Al igual que con los pesos, no todas las fuentes tienen versiones en cursiva disponibles. Si una fuente no tiene una versión en cursiva, el navegador aplicará una inclinación artificial (oblique).

Combinando propiedades

Las propiedades de fuente a menudo se combinan para crear estilos tipográficos efectivos:

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  font-style: normal;
}

.destacado {
  font-size: 1.2em;
  font-weight: 600;
  font-style: italic;
}

Propiedad abreviada font

La propiedad abreviada font permite establecer varias propiedades de fuente en una sola declaración:

h1 {
  /* font: font-style font-variant font-weight font-size/line-height font-family */
  font: normal normal 700 2.5rem/1.2 'Roboto', sans-serif;
}

.destacado {
  font: italic normal 600 1.2em/1.5 'Merriweather', serif;
}

Ejemplos prácticos

Sistema de encabezados

:root {
  --font-primary: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

h5 {
  font-size: 1.1rem;
  font-weight: 600;
}

h6 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Artículo de blog

.article {
  font-family: 'Georgia', serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #333;
}

.article h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 2em;
}

.article .lead {
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: #555;
}

.article blockquote {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  border-left: 4px solid #ddd;
  padding-left: 1em;
}

.article .caption {
  font-size: 0.875rem;
  font-style: italic;
  color: #666;
}

Tarjeta de producto

<div class="product-card">
  <div class="badge">Nuevo</div>
  <h3 class="product-title">Auriculares Inalámbricos</h3>
  <p class="product-description">Auriculares con cancelación de ruido y 20 horas de batería.</p>
  <div class="product-price">$99.99</div>
  <button class="buy-button">Comprar ahora</button>
</div>

.product-card {
  font-family: 'Inter', sans-serif;
}

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-description {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
}

.product-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e63946;
}

.buy-button {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Mejores prácticas

Legibilidad

1. Tamaño adecuado: Utiliza un tamaño base de 16px o mayor para el texto principal.
2. Contraste: Asegúrate de que haya suficiente contraste entre el texto y el fondo.
3. Espaciado: Utiliza un line-height adecuado (generalmente entre 1.4 y 1.6 para texto de párrafo).

Responsividad

1. Unidades relativas: Prefiere rem, em o unidades viewport sobre píxeles.
2. Tamaños mínimos: Establece tamaños mínimos para garantizar la legibilidad en dispositivos móviles.
3. Escala proporcionada: Utiliza clamp() o media queries para escalar proporcionalmente.

Rendimiento

1. Limita los pesos: Carga solo los pesos de fuente que realmente necesitas.
2. Subconjuntos: Utiliza subconjuntos de caracteres cuando sea posible.
3. Precargar: Considera precargar fuentes críticas.

Accesibilidad

1. Redimensionable: Asegúrate de que el texto se pueda redimensionar sin romper el diseño.
2. Contraste: Cumple con las pautas WCAG para contraste de texto.
3. Jerarquía clara: Utiliza tamaños y pesos para establecer una jerarquía visual clara.

Conclusión

El control preciso del tamaño, peso y estilo de las fuentes es fundamental para crear diseños web efectivos y accesibles. Estas propiedades, cuando se utilizan correctamente, pueden mejorar significativamente la legibilidad, establecer una jerarquía visual clara y reforzar la identidad de marca.

Recuerda siempre considerar la responsividad y la accesibilidad al definir tus estilos tipográficos, y aprovecha las características modernas de CSS como variables, funciones clamp() y fuentes variables para crear experiencias tipográficas ricas y adaptables.