Tutorial de tamaño de fuente CSS: cómo cambiar el tamaño del texto en HTML

Utilice la font-sizepropiedad CSS para determinar el tamaño de su texto.

.container { font-size: 33px; } 

Esta propiedad toma varios tipos de valores:

  • Palabras clave (palabras clave de tamaño absoluto y de tamaño relativo),
  • Longitud (como píxeles (px) y unidades em), y
  • Porcentajes.
.container { 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. Le mostrará cómo usar la font-sizepropiedad y las diferencias entre sus muchos valores. Entonces, la próxima vez que necesite cambiar el tamaño de fuente de su texto, sabrá qué valor alcanzar.

Valores de palabras clave

Hay dos tipos de valores de palabras clave que puede utilizar con el tamaño de fuente: absolute-sizey relative-sizepalabras clave. Empecemos por el absoluto.

Palabras clave de tamaño absoluto

El siguiente código utiliza la palabra clave smallde tamaño absoluto para cambiar el tamaño del texto HTML.

.childElement { font-size: small; } 

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

  • xx-pequeño
  • x-pequeño
  • pequeña
  • medio
  • grande
  • x-grande
  • xx-grande
  • xxx-grande

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 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: smallery larger.

.parentElement { font-size: smaller; } 

El tamaño de fuente de un elemento con una palabra clave de tamaño relativo es relativo, más grande o más pequeño, al tamaño de fuente de su padre.

Dicho de otra manera, el tamaño de fuente del elemento principal afecta el tamaño de fuente del elemento secundario, como puede ver a continuación.

En este ejemplo, la palabra clave de tamaño relativo smallerse aplica al elemento secundario y el valor de tamaño absoluto largese aplica al elemento principal.

Valores de longitud

font-sizeacepta varios valores de longitud diferentes. Exploraremos tres de ellos: píxeles (px) y unidades em y rem. A pesar de su selección, el valor de longitud que utilice debe ser positivo.

.parentElement { font-size: 60px; } 

Pixeles

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

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

Observe que los elementos secundarios usan pixelsy tienen el mismo tamaño de fuente en el ejemplo de código anterior.

EM

Si bien puede pensar en los píxeles como fijos, piense en los valores em como variables.

Eso es porque los valores de 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 ha establecido un tamaño de fuente para el elemento principal. Tampoco ha 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 principal está configurado en 30px y el elemento secundario está configurado en 2em. Entonces, el tamaño de fuente representado del elemento secundario es 60 px (2 x 30 px = 60 px). Puede ver este escenario en el siguiente código.

Los valores de em pueden ser problemáticos debido a su efecto de combinación, que se demuestra en el siguiente ejemplo.

Cuando tiene 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.

REM

Ingrese los valores rem, que fueron creados para lidiar con el problema de capitalización de ems.

Recuerde 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 puede 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 font-sizepropiedad con un valor rem.

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

Porcentajes

Los porcentajes ofrecen una forma más de establecer el tamaño de fuente en relación con el tamaño de fuente del elemento principal.

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

He aquí un ejemplo.

Como puede ver, cuando se trata de tamaño de fuente, tiene muchas opciones para satisfacer sus necesidades.

Escribo sobre aprender a programar y las mejores formas de hacerlo en amymhaddad.com. YotambiénTweet acerca de la programación, el aprendizaje y la productividad: @amymhaddad.