También podemos usar CSS para cambiar el tamaño de nuestro texto.
Como te puedes dar cuenta, simplemente mirando los encabezados de esta página
comparados con los párrafos, el navegador ofrece
estilos predeterminados con diferentes tamaños para los distintos elementos.
Hay un tamaño de fuente para el cuerpo del texto,
y tamaños mayores para cada nivel de encabezado.
Aunque a veces queremos modificar esos tamaños.
Y podemos hacerlo mediante la propiedad "font-size" de CSS.
Por ejemplo:
¿Qué hacemos si queremos que todo el texto de nuestra página sea un poco más pequeño?
Bueno, vamos a la etiqueta de estilo,
y añadimos una regla de CSS para la etiqueta "".
Y luego dentro de esa etiqueta ponemos la propiedad "font-size".
Ahora, ¿cuál debería ser el tamaño para "font-size"?
¿Cómo medimos el tamaño de la fuente?
En realidad, ésta es una buena pregunta,
porque al menos tenemos 10 unidades diferentes
que CSS puede reconocer para "font-size".
Vamos a empezar con una unidad que ya hemos visto antes: pixeles.
Usamos pixeles para decidir qué tan grandes queremos que sean nuestras imágenes.
Y los seguiremos usando mucho en CSS.
Probemos con 11 pixeles.
Ah, todo se volvió más pequeño.
En realidad, hasta el encabezado se volvió más pequeño.
¿Por qué los encabezados se volvieron más pequeños también?
¿No deberían ser del tamaño que el navegador determinó antes para los encabezados?
No.
Porque el estilo predeterminado de los encabezados del navegador no está especificado con pixeles.
Está determinado usando una unidad diferente llamada "em".
Y esa es una unidad relativa
que hace que el tamaño de la fuente de los encabezados sea proporcional a la fuente del cuerpo del texto.
Déjenme explicar lo que quiero decir con esto.
Vamos a la regla de estilo de ""
y agregar la propiedad "font-size".
Esta vez, en lugar de pensar en pixeles, voy a pensar relativamente.
¿Qué tan grande queremos que sea "" comparado con el cuerpo del texto?
Tal vez, ¿al doble?
Para eso , escribimos "2em".
Lo que sucede ahora es que el navegador calcula
el tamaño en pixeles para la fuente.
El navegador sabe que el tamaño de la fuente del cuerpo del texto es de 11 pixeles.
Y le dijimos que "" debería ser el doble del tamaño,
así que ahora los encabezados en "" son de 22 pixeles.
Si cambiamos el tamaño de la fuente del cuerpo del texto a 12 pixeles,
entonces ¿de qué tamaño será ""?
Es correcto, 24 pixeles.
¿Qué pasa si cambiamos el tamaño de "" a 1.5em?
Ahora "" será 12 por 1.5,
que es 18 pixeles.
También podemos especificar el tamaño en pixeles para "" como lo hicimos en "",
y funciona de la misma manera.
Depende de lo que te parezca más fácil.
Y como lo mencioné antes, hay muchas unidades más que podríamos usar
además de pixeles y "em".
Éstas son sólo dos de las unidades más populares.
Pero si quieres saber más,
revisa la documentación de "font-size",
o busca otros tutoriales en Internet.
¡Es hora de que aproveches el "font-size"!