Utiliza la propiedad de font-size (tamaño de fuente) de CSS para determinar el tamaño de tu texto.

.contenedor {
    font-size: 33px;
}

Esta propiedad toma varios tipos de valores:

• Palabras clave (palabras clave de tamaño absoluto y relativo),
• Longitud (como píxeles (px) y unidades em), y
• Porcentajes.

.contenedor {
    font-size: xx-large;
}

La pregunta es: ¿qué tipo de valor debería elegir y por qué?

Esa es la pregunta que aborda este artículo. Te mostrará cómo usar la propiedad de font-size y las diferencias entre sus muchos valores. Así, la próxima vez que necesites cambiar el tamaño de fuente de tu texto, sabrás qué valor usar.

Valores de palabras clave

Hay dos tipos de valores de palabras clave que puede usar con el tamaño de fuente: palabras clave de tamaño absoluto y de tamaño relativo. Empecemos con lo absoluto.

Palabras clave de tamaño absoluto

El siguiente código utiliza la palabra clave de tamaño absoluto small para ajustar el tamaño del texto HTML.

.elemento_hijo {
    font-size: small;
}

Hay más opciones de palabras clave de tamaño absoluto para elegir:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

El valor de una palabra clave de tamaño absoluto está determinado por el tamaño de fuente predeterminado del navegador. Normalmente, ese tamaño es medium (mediano).

Palabras clave de tamaño relativo

Las palabras clave de tamaño relativo son otra opción de palabra clave a considerar. Tienes dos para elegir: smaller y larger.

.elemento_padre {
    font-size: smaller;
}

El tamaño de fuente de un elemento con una palabra clave de tamaño relativo es relativo, mayor o menor, al tamaño de fuente de su padre.

Dicho de otra manera, el tamaño de fuente del elemento padre afecta el tamaño de fuente del elemento hijo, como puedes ver a continuación(inglés).

En este ejemplo, la palabra clave de tamaño relativo smaller se aplica al elemento hijo, y el valor de tamaño absoluto large se aplica al elemento padre.

Valores de longitud

font-size acepta varios valores de longitud diferentes. Exploraremos tres de ellos: píxeles px, y unidades em y rem. Cual sea tu selección, el valor de longitud que utilices debe ser positivo.

.elemento_padre {
    font-size: 60px;
}

Píxeles

Los píxeles son una unidad de longitud absoluta. Eso significa que no se ven afectados por otros elementos, como el elemento padre o el tamaño de la ventana.

Como resultado, los píxeles son precisos: tu defines el número exacto de píxeles que necesitas en un elemento y, por lo general, eso es lo que obtienes. Sin embargo, puede haber ligeras diferencias entre los navegadores.

Observa que los elementos hijo usan píxeles y tienen el mismo tamaño de fuente en el ejemplo de código anterior(inglés).

EMs

Si bien puedes pensar en los píxeles como fijos, piensa en los valores em como variables.

Eso es porque los valores em son una unidad de longitud relativa. El tamaño de fuente de un elemento que usa un valor em es relativo al tamaño de fuente de su padre.

Sin embargo, supongamos que no has establecido un tamaño de fuente para el elemento padre. Tampoco has configurado uno en otro lugar más arriba en el DOM. En este caso, el valor em se calcula utilizando el valor predeterminado del navegador (a menudo, 16px).

Hagamos esta idea concreta.

Digamos que el elemento padre está configurado en 30px y el elemento hijo está configurado en 2em. Luego, el tamaño de fuente representado del elemento hijo es de 60px (2 x 30px = 60px). Puedes ver este escenario en el código siguiente(inglés).

Los valores de em pueden ser problemáticos debido a su efecto compuesto, que se demuestra en el siguiente ejemplo(inglés).

Cuando tienes varios elementos que usan valores em anidados entre sí, los valores de tamaño de fuente se componen: se hacen cada vez más grandes. Este es el efecto compuesto en acción.

REMs

Ingresa los valores rem, que fueron creados para lidiar con el problema de efecto compuesto de los em.

Recuerda que los valores de em son relativos al elemento padre. Por el contrario, los valores rem son relativos al tamaño de fuente del elemento raíz (html).

Esto significa que puedes aplicar un valor rem a un elemento y no se verá afectado por el tamaño de fuente del padre. Esto evade el efecto compuesto que experimentamos anteriormente.

Este ejemplo usa la propiedad font-size con un valor rem(inglés).

Aquí hay un punto clave del ejemplo anterior: el tamaño de fuente del elemento padre no afecta el tamaño de fuente de los elementos hijos.

Porcentajes

Los porcentajes ofrecen una forma más de establecer el tamaño de fuente relativo al tamaño de fuente del elemento padre.

El elemento con el porcentaje se refiere a su elemento padre para determinar su tamaño de fuente. El valor porcentual debe ser positivo.

Aquí tienes un ejemplo(inglés).

Como puedes ver, en lo que respecta al tamaño de fuente, hay muchas opciones que se adaptan a tus necesidades.

Amy escribe sobre aprender a programar, y las mejores formas de hacerlo en amymhaddad.com. También twittea sobre programación, aprendizaje y productividad: @amymhaddad.

Traducido del artículo de Amy Haddad - CSS Font Size Tutorial – How to Change Text Size in HTML