Hay diferentes formas de llamar la atención sobre el texto de una página web. Tu puedes hacerlo naranja, por ejemplo. Puede audaz o subrayar eso. Puedes resaltar una frase en una frase.

Además de estas opciones de formato, también puede cambiar el tamaño de fuente del texto para atraer la atención del lector y establecer una jerarquía visual. Notarás en esta publicación de blog que el título (

) tiene el tamaño de fuente más grande. Lo siguiente son mis elementos de encabezado (

,

y

), todos más grandes que el

elementos debajo de ellos. De esta manera, el visitante (usted) sabe dónde comienzan las diferentes secciones.

Los encabezados HTML no son la única forma de cambiar el tamaño de fuente en su sitio. Supongamos que desea reducir o ampliar los tamaños de encabezado predeterminados, o desea cambiar el tamaño de fuente de otros elementos de la página. En ese caso, puede cambiar el tamaño de fuente en CSS. Veamos el proceso a continuación.

Cómo cambiar el tamaño de fuente en CSS

tamaño de fuente es la propiedad CSS que controla el tamaño de la fuente en una página web. Hay varios valores diferentes que puede utilizar para definir el tamaño de fuente propiedad. Eche un vistazo al ejemplo a continuación, que incluye diferentes valores y unidades que puede usar en CSS.

ver la pluma tamaño de fuente: diferentes valores de Christina Perricone (@hubspot) en CódigoPen.

Estos valores ofrecen diferentes enfoques para configurar el tamaño de fuente en su página web. El que elija dependerá de las necesidades y objetivos de su sitio. Echemos un vistazo más de cerca a estos valores, sopesando los pros y los contras de cada uno.

Valores de propiedad de tamaño de fuente para disminuir y aumentar el tamaño de fuente

En CSS, tamaño de fuente se puede especificar con cualquiera de los siguientes valores. Para cada valor de propiedad, daré un ejemplo de su sintaxis y una breve descripción.

Palabra clave de tamaño absoluto

 
element { font-size: small; }

Las palabras clave de tamaño absoluto se basan en el tamaño de fuente predeterminado. Por lo general, el tamaño de fuente predeterminado es medio (que se traduce en 16 píxeles o 1 em), aunque puede diferir según el navegador y la familia de fuentes. Tenga en cuenta que en HTML el tamaño de fuente predeterminado es 16px.

Las palabras clave de tamaño absoluto son:

• xx-pequeño
• extra pequeño
• pequeña
• medio
• grande
• extragrande
• xx-grande
• xxx-grande

Así es como se ve cada uno en un navegador:

ver la pluma tamaño de fuente: tamaño absoluto de Christina Perricone (@hubspot) en CódigoPen.

Las palabras clave de tamaño absoluto facilitan la configuración del texto en un tamaño específico y crean una jerarquía de fuentes para su página. Sin embargo, no permiten que un usuario cambie el tamaño del texto en todos los navegadores, lo que lo convierte en una mala elección para un diseño accesible. Para ser más inclusivo con todos los usuarios, pruebe con palabras clave de tamaño relativo.

Palabra clave de tamaño relativo

 
element { font-size: larger; }

Las palabras clave de tamaño relativo configuran la fuente más grande o más pequeña en relación con el tamaño de fuente del elemento principal. Estos tamaños relativos se basan aproximadamente en la proporción de las palabras clave de tamaño absoluto descritas anteriormente.

Entonces, si el elemento principal tiene un tamaño de fuente de grandeun elemento secundario con un tamaño relativo definido de menor tendrá un tamaño de fuente de medio. Veamos el código de este hipotético.

ver la pluma tamaño de fuente: tamaño relativo de Christina Perricone (@hubspot) en CódigoPen.

Tenga en cuenta que he usado el selector de clase «.relative» para apuntar a un H2 en lugar de usar el selector de tipo, que apuntaría a ambos H2. Puede obtener más información sobre los selectores de CSS en nuestro explicador.

Las palabras clave de tamaño relativo facilitan la configuración del tamaño del texto en relación con los elementos circundantes. Su ventaja sobre las palabras clave de tamaño absoluto es que permiten a los usuarios cambiar el tamaño del texto en todos los navegadores, lo que las convierte en una buena opción para la accesibilidad.

Longitud

Hay algunos valores de longitud que pueden definir la propiedad de tamaño de fuente en CSS. Aquí, nos centraremos en los tres más comunes: píxeles, unidades em y unidades rem.

Píxeles

 
element { font-size: 32px; }

El uso de píxeles (px) como valor de longitud le permitirá establecer el tamaño de fuente con precisión, independientemente del navegador que utilice el visitante. Puede especificar exactamente la cantidad de píxeles de altura que desea que un navegador represente su texto (aunque los resultados pueden variar ligeramente según los algoritmos que utilicen los navegadores).

ver la pluma tamaño de fuente: px de Christina Perricone (@hubspot) en CódigoPen.

Sin embargo, la naturaleza fija de los píxeles también es un inconveniente. No están optimizados para todos los dispositivos: CSS-Tricks descubrió que los sitios web en el iPad mini renderizar igual que los sitios web en el iPad, por ejemplo, y no son un valor de longitud accesible. Debido a que los usuarios no pueden cambiar el tamaño de fuente en algunos navegadores, existen opciones más inclusivas y receptivas que puede usar.

ccsme

 
element { font-size: 2em; }

La unidad em establece el tamaño de fuente en relación con el tamaño de fuente del elemento principal. Entonces, dando al texto un tamaño de fuente de 2em hará que este texto sea el doble del tamaño del texto que lo rodea.

Establecer el tamaño de fuente en unidades em es ideal para un diseño inclusivo. Dado que ems es una unidad relativa, los usuarios pueden ajustar el tamaño del texto en todos los navegadores.

El único inconveniente es ese compuesto ems. Entonces, di un elemento con un tamaño de fuente de 2em contiene otro elemento. que anidaba elemento sería el doble del tamaño, o 4em. Vea el código a continuación.

ver la pluma tamaño de fuente: em de Christina Perricone (@hubspot) en CódigoPen.

Rems

 
element { font-size: 2rem; }

Los rems son una unidad relativa como ems, pero no se componen. Esto se debe a que los ems son unidades relativas a la fuente, lo que significa que el tamaño de la fuente es relativo al tamaño de la fuente del elemento principal, mientras que los rems se basan en la raíz. Es decir, el tamaño de la fuente es relativo al tamaño de la fuente utilizada por el elemento raíz, o elemento en la parte superior del documento.

Digamos que configuro el tamaño de fuente del elemento raíz en 12 píxeles de modo que cualquier texto en el documento que no esté modificado por CSS tendrá 12 píxeles. Pero, también quiero cambiar el tamaño de fuente de un

 
element { font-size: 110%; }

 
element { font-size: 10vw; }