CÓMO CAMBIAR FUENTES CON CSS EN HTML5

November 18, 2025

Introducción a la Gestión de Fuentes en CSS

En los días de HTML4, el elemento <font> permitía ajustar el tamaño, la familia y el color del texto directamente en el marcado. Sin embargo, con la llegada de HTML5, este elemento quedó obsoleto, y ahora CSS es la herramienta estándar para personalizar las propiedades tipográficas en sitios web. Este cambio refleja la necesidad de separar el contenido (HTML) del diseño (CSS), promoviendo un código más limpio y mantenible. En este tutorial, exploraremos cómo modificar el tamaño de fuente, el peso, el estilo y la familia tipográfica utilizando CSS en sus tres formas: inline, interno y externo. Este enfoque es esencial para desarrolladores que buscan crear interfaces atractivas y funcionales en proyectos web modernos. A lo largo del artículo, proporcionaremos ejemplos prácticos y recomendaciones para optimizar el uso de CSS en el diseño tipográfico.

Cambiar el Tamaño de Fuente con CSS

El tamaño de fuente define cuán grande o pequeño aparece el texto en una página web. Para ajustar esta propiedad, se utiliza font-size en CSS, con valores comúnmente expresados en píxeles (px), rem o em. Estas unidades ofrecen flexibilidad según las necesidades del proyecto: px es absoluto, mientras que rem y em son relativos, ideales para diseños responsivos. La elección de la unidad depende del contexto, pero rem es ampliamente recomendada por su consistencia en escalabilidad.

Puedes aplicar font-size de tres maneras:

CSS Inline: Estilo directamente en el elemento HTML.
```
<h1 style="font-size: 4rem;">Título Grande</h1>
```
Este método es útil para pruebas rápidas, pero no se recomienda para proyectos grandes debido a su impacto en la legibilidad del código.
CSS Interno: Dentro de un bloque <style> en el <head> del documento HTML.
```
<style>
    h1 {
        font-size: 4rem;
    }
</style>
<h1>Título Grande</h1>
```
Este enfoque es adecuado para proyectos pequeños o páginas individuales, ya que centraliza los estilos en un solo lugar.
CSS Externo: En un archivo .css separado, vinculado al HTML mediante <link>.
```

<link rel="stylesheet" href="styles.css" />
<h1>Título Grande</h1>
```
```
/* styles.css */
h1 {
    font-size: 4rem;
}
```
Este es el método preferido para proyectos grandes, ya que separa el diseño del contenido y facilita el mantenimiento.

Para centrar el texto y ajustar el fondo, puedes agregar estilos adicionales al elemento body. Por ejemplo:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f1f1f1;
}

Este código centra el contenido tanto horizontal como verticalmente y establece un fondo gris claro, mejorando la presentación visual. En un navegador, el texto aparecerá grande, centrado y con un fondo limpio, ideal para interfaces modernas.

Modificar el Peso de Fuente con CSS

El peso de fuente, controlado por la propiedad font-weight, determina cuán claro u oscuro aparece el texto, es decir, su nivel de negrita. Los valores más comunes incluyen normal, lighter, bold y bolder, aunque también se pueden usar valores numéricos como 100, 400 o 700. Estos números ofrecen un control más preciso, donde 400 equivale a normal y 700 a bold.

Puedes aplicar font-weight en las tres formas de CSS. Por ejemplo:

CSS Inline:

<h1 style="font-weight: lighter;">Texto Ligero</h1>
<h1 style="font-weight: bold;">Texto en Negrita</h1>

Aquí, el primer título aparece más claro y el segundo más oscuro.

CSS Interno:

<style>
    .lighter {
        font-weight: lighter;
    }
    .bold {
        font-weight: bold;
    }
</style>
<h1 class="lighter">Texto Ligero</h1>
<h1 class="bold">Texto en Negrita</h1>

Este método organiza los estilos en clases reutilizables.

CSS Externo:

/* styles.css */
.lighter {
    font-weight: lighter;
}
.bold {
    font-weight: bold;
}

<!-- index.html -->
<link rel="stylesheet" href="styles.css" />
<h1 class="lighter">Texto Ligero</h1>
<h1 class="bold">Texto en Negrita</h1>

Este enfoque es escalable y mantiene el HTML limpio.

En el navegador, los diferentes pesos de fuente crean un contraste visual que puede usarse para jerarquías de información, como destacar títulos o subtítulos. Por ejemplo, un peso lighter es ideal para texto secundario, mientras que bold resalta elementos importantes.

Ajustar el Estilo de Fuente con CSS

El estilo de fuente, gestionado por la propiedad font-style, define variaciones tipográficas como cursiva o inclinación. Los valores disponibles son normal, italic y oblique. Mientras que italic usa una versión cursiva diseñada específicamente por la fuente, oblique simplemente inclina el texto, lo que puede variar según la fuente utilizada. El valor normal es el predeterminado y rara vez necesita especificarse, salvo para anular otros estilos.

Ejemplos de aplicación:

CSS Inline:

<h1 style="font-style: italic;">Texto en Cursiva</h1>
<h1 style="font-style: oblique;">Texto Inclinado</h1>

Este método es directo pero no escalable.

CSS Interno:

<style>
    .italic {
        font-style: italic;
    }
    .oblique {
        font-style: oblique;
    }
</style>
<h1 class="italic">Texto en Cursiva</h1>
<h1 class="oblique">Texto Inclinado</h1>

Aquí, las clases permiten reutilizar estilos.

CSS Externo:

/* styles.css */
.italic {
    font-style: italic;
}
.oblique {
    font-style: oblique;
}

<!-- index.html -->
<link rel="stylesheet" href="styles.css" />
<h1 class="italic">Texto en Cursiva</h1>
<h1 class="oblique">Texto Inclinado</h1>

Este método es ideal para proyectos colaborativos.

En un navegador, el texto con italic aparecerá en cursiva elegante, mientras que oblique mostrará una inclinación más mecánica, dependiendo de la fuente. Estos estilos son útiles para citas, énfasis o elementos decorativos en el diseño web.

Cambiar la Familia de Fuente con CSS

La familia de fuente, controlada por la propiedad font-family, especifica el conjunto de tipografías que se aplican al texto. Cada familia tiene un diseño único, como Verdana, Arial o Roboto. Para garantizar compatibilidad, se incluyen fuentes de respaldo (fallbacks) en caso de que la fuente principal no esté disponible en el dispositivo del usuario.

Puedes definir font-family en las tres formas de CSS:

CSS Inline:
```
<h1 style="font-family: Verdana, Arial, sans-serif;">Título con Verdana</h1>
```
Aquí, el navegador intenta usar Verdana, luego Arial, y finalmente una fuente genérica sans-serif.

CSS Interno:

<style>
    h1 {
        font-family: Verdana, Arial, sans-serif;
    }
</style>
<h1>Título con Verdana</h1>

Este método centraliza los estilos en el documento.

CSS Externo:

/* styles.css */
h1 {
    font-family: Verdana, Arial, sans-serif;
}

<!-- index.html -->
<link rel="stylesheet" href="styles.css" />
<h1>Título con Verdana</h1>

Asegúrate de vincular el archivo CSS correctamente con <link>.

Para usar fuentes externas, como las proporcionadas por Google Fonts, debes importarlas en tu proyecto. Por ejemplo, para usar la fuente Roboto:

Incluye el enlace en el <head> del HTML:

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

Aplica la fuente en CSS:

h1 {
    font-family: "Roboto", sans-serif;
}

En el navegador, el texto con Roboto tendrá un aspecto moderno y limpio, mientras que las fuentes de respaldo aseguran que el diseño no se rompa si Roboto no está disponible. Este enfoque es ideal para personalizar la estética de un sitio web.

Mejores Prácticas para CSS en Proyectos Web

Elegir entre CSS inline, interno y externo depende del tamaño y la complejidad del proyecto. Para proyectos pequeños, el CSS interno es suficiente, ya que agrupa los estilos en el mismo documento HTML. Sin embargo, para proyectos grandes o colaborativos, el CSS externo es la mejor opción, ya que separa el diseño del contenido, mejora la mantenibilidad y permite reutilizar estilos en múltiples páginas.

El CSS inline debe evitarse en la mayoría de los casos, ya que mezcla el diseño con el contenido, dificultando la lectura y el mantenimiento del código. Además, el uso excesivo de inline CSS puede impactar negativamente en la optimización para motores de búsqueda (SEO), ya que los rastreadores prefieren estructuras limpias y separadas.

Otra práctica recomendada es usar unidades relativas como rem o em para font-size, ya que facilitan la escalabilidad en diseños responsivos. Para font-family, siempre incluye al menos una fuente de respaldo y una genérica (sans-serif, serif, etc.) para garantizar compatibilidad. Finalmente, aprovecha servicios como Google Fonts para acceder a tipografías modernas, pero asegúrate de optimizar su carga para no afectar el rendimiento del sitio.

Conclusiones

Este tutorial ha cubierto cómo personalizar el tamaño de fuente, el peso, el estilo y la familia tipográfica utilizando CSS en sus formas inline, interna y externa. Cada método tiene su lugar, pero el CSS externo es la opción más escalable y profesional para proyectos web modernos. Al dominar propiedades como font-size, font-weight, font-style y font-family, puedes crear diseños tipográficos atractivos y funcionales que mejoren la experiencia del usuario. Además, adoptar buenas prácticas, como evitar el CSS inline y usar unidades relativas, optimiza tanto el mantenimiento del código como el rendimiento del sitio. Con estas herramientas, estás preparado para llevar el diseño tipográfico de tus proyectos al siguiente nivel.