Cuando agregas texto a tu archivo HTML con una etiqueta HTML, no siempre querrás que el texto permanezca con el tamaño predeterminado. También vas a querer ajustar cómo se muestra el texto en el navegador.

En este artículo, aprenderás cómo cambiar el tamaño del texto mediante una etiqueta HTML.

Antes de empezar, debes saber que solo hay una forma de hacer esto: a través de la propiedad font-size de CSS. Podemos usar la propiedad font-size a través del estilo inline, interno o externo.

En el pasado, podíamos ajustar el tamaño del texto dentro de nuestra etiqueta HTML sin usar CSS. Pero eso fue antes de HTML5. Entonces agregábamos texto usando la etiqueta, que dispone de un atributo de tamaño como se ve a continuación:

<font size="5">
    Hola Mundo 
</font>

Este atributo size puede tomar valores de 1 a 7, en el que el tamaño del texto aumenta de 1 a 7. Pero como decíamos, esto quedó en desuso hace mucho tiempo, y la mayoría de personas ni siquiera saben que existía.

En caso de que tengas prisa por ver cómo puedes cambiar el tamaño de tu texto, aquí está:

// Usando CSS inline
<h1 style="font-size: valor;">¡Hola Mundo!</h1>

// Usando CSS interno/externo
selector {
    font-size: valor;
}

Pero supongamos que no tienes prisa. Vamos a sumergirnos brevemente en el asunto.

Cómo cambiar el tamaño del texto con CSS inline

El CSS inline te permite aplicar estilos a elementos HTML específicos. Esto significa que estamos poniendo CSS directamente en una etiqueta HTML. Usaremos el atributo style, que ahora contiene todos nuestros estilos.

<h1 style="...">¡Hola Mundo!</h1>

De esta forma usamos la propiedad font-size  junto con nuestro valor para cambiar el tamaño del texto usando CSS inline. Este valor puede usar cualquiera de tus unidades CSS preferidas como em, px, rem, etc.

<h1 style="font-size:4em; "> ¡Hola Mundo! </h1>
<p style="font-size:14px; "> Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

Una sintaxis perfecta sería:

<ETIQUETA-DE-TEXTO style="font-size:valor;"> ... </ETIQUETA-DE-TEXTO>

Cómo cambiar el tamaño del texto con CSS interno o externo

El enfoque que debes usar para cambiar el tamaño del texto en el estilo CSS interno y externo es similar, ya que usarás un selector. La sintaxis general para esto es:

selector {
    font-size: valor;
}

El selector puede ser nuestra etiqueta HTML o tal vez una clase o un ID. Por ejemplo:

// HTML
<p> Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

// CSS
p {
    font-size: 14px;
}

O podríamos usar una clase:

// HTML
<p class="mi-parrafo" > Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

// CSS
.mi-parrafo {
    font-size: 14px;
}

Resumen

En este artículo, aprendiste cómo cambiar el tamaño de fuente/texto de un elemento HTML usando CSS. También viste cómo lo hacían los desarrolladores antes de la introducción de HTML5.

Además, ten en cuenta que siempre es mejor dar estilo a tus elementos HTML usando estilos internos o externos, ya que ofrecen mucha más flexibilidad en comparación con los estilos inline.

Por ejemplo, puedes hacer uso de una sola clase CSS para todas tus etiquetas p en lugar de tener que agregar estilos inline a todos los elementos de tu etiqueta p.

Usar estilos inline no se considera una buena práctica porque resulta demasiado repetitivo y no podrás reutilizar los estilos en otro lugar. Para aprender más, puedes leer mi artículo sobre estilos inline en HTML.

Espero que este tutorial te brinde el conocimiento para cambiar el tamaño de tu texto HTML y logres hacerlo más atractivo.

¡Diviértete programando!