HTML: Cómo cambiar el tamaño de la fuente

Cambiar el tamaño de la fuente en HTML es un paso fundamental para que los contenidos web sean legibles y visualmente atractivos, pero una implementación correcta requiere algo más que simples ajustes superficiales.

Cambiar el tamaño de la fuente en HTML: métodos y ajustes precisos

Quien desee cambiar el tamaño de la fuente en HTML se encuentra ante una gran variedad de opciones. CSS es la herramienta más adecuada para ello, pero no todas las técnicas son igualmente adecuadas para cada proyecto. Así es como se pone en práctica la teoría:

• Estilos en línea en el elemento HTML: Inserta directamente en la etiqueta el atributo style=»font-size: 18px;», por ejemplo, en un elemento <p>. Este método es rápido, pero si se utiliza con frecuencia, el código se vuelve confuso.
• Clases CSS en el bloque <style>: Define en la sección <head> una clase como .text-large { font-size: 1.2rem; } y asígnala mediante class=»text-large». Ideal para elementos recurrentes.
• Hojas de estilo externas para garantizar la coherencia: Guarda todos los tamaños de fuente en un archivo CSS independiente e incorpóralo mediante <link href=»styles.css» rel=»stylesheet»>. Esto simplifica los cambios globales.
• Uso inteligente de las unidades relativas: Trabaja con rem (en relación con el tamaño de fuente raíz) o em (en relación con el elemento padre). Ejemplo: html { font-size: 16px; } establece la base; h1 { font-size: 2rem; } escala automáticamente los encabezados.
• Comprobación de la compatibilidad con los navegadores: comprueba si unidades como vw (ancho de la ventana de visualización) o ch (ancho de carácter) funcionan en navegadores antiguos. Las soluciones alternativas con px o rem evitan errores de visualización.
• Entender la especificidad en CSS: Evita conflictos sobrescribiendo estilos de forma selectiva. Un selector como `body p.text { font-size: 1.1rem; }` tiene mayor prioridad que las clases simples.
• Controlar los saltos de línea: La etiqueta `<wbr>` permite establecer puntos de salto manuales, por ejemplo, en URL largas. Combínela con `word-break: break-word` o `overflow-wrap: anywhere` para evitar desbordamientos antiestéticos.
• Acortar el desbordamiento de texto: Combine `text-overflow: ellipsis` con `white-space: nowrap` y `overflow: hidden` para cortar textos largos con «…», lo cual es ideal para tablas o contenedores estrechos.
• Separación automática de sílabas: activa «hyphens: auto» en el CSS para permitir la separación de sílabas según el navegador. Para un control manual, utiliza «&shy;» en el HTML.
• Espacios no separables: utiliza «&nbsp;» en el código HTML para bloquear separaciones no deseadas, por ejemplo, en fechas como «10 de julio».

Tamaños de fuente adaptativos: técnicas para diseños dinámicos

Los tamaños de fuente que se adaptan a los dispositivos y a las ventanas gráficas no son una característica opcional, sino una obligación. Con estas estrategias, los textos se mantienen perfectamente legibles en cualquier pantalla:

• Consultas de medios para puntos de ruptura claros: Define en CSS umbrales como @media (min-width: 1200px) { .text { font-size: 1.25rem; } } para adaptar los tamaños de fuente a los ordenadores de sobremesa de gran tamaño.
• Tipografía fluida con clamp(): Utiliza la función CSS clamp(1rem, 2.5vw, 1.5rem) para establecer los tamaños de fuente mínimos, ideales y máximos en una misma línea, lo que resulta perfecto para transiciones fluidas.
• Uso específico de las unidades de ventana gráfica: Combina vw con rem para evitar un escalado extremo: font-size: calc(1rem + 0.3vw);. De este modo, la fuente crece suavemente con la ventana de visualización.
• Ajustar la configuración raíz: Establezca el tamaño de fuente base en el selector html en un 62,5 % para que 1rem equivalga a 10 px. Esto simplifica los cálculos (p. ej., 1,6rem = 16 px).
• JavaScript para ajustes interactivos: Permite a los usuarios controlar el tamaño de la fuente mediante botones: document.querySelector(«.text»).style.fontSize = «1.3rem»;
• Priorizar la accesibilidad: Evita las unidades absolutas como pt o px para el texto principal. Las unidades relativas facilitan la lectura a los usuarios que utilizan el zoom del navegador.
• Anchos mínimos de los contenedores: utiliza min-width: fit-content para ajustar los elementos a la longitud del texto; esto evita que los botones o las etiquetas se reduzcan hasta volverse ilegibles.
• Aplica de forma sistemática la separación entre HTML y CSS: traslada todos los estilos a archivos CSS externos. Comenta los bloques de código como /* Configuración tipográfica */; esto facilita el mantenimiento a los equipos.