Saltar al contenido

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

febrero 21, 2022
Site owner using CSS font size property.jpgkeepProtocol

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.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

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

elemento que es similar al mencionado en el ejemplo anterior. Veamos el código para eso a continuación.

Observe cómo el elemento anidado tiene el mismo tamaño de fuente que el otro elemento .

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

Porcentaje

 
element { font-size: 110%; }

Un valor de porcentaje establece el tamaño de fuente de un elemento en relación con el tamaño de fuente del elemento principal.

di un

elemento que está configurado para 36px contiene una

elemento y dos elementos. los tamaño de fuente de El los elementos se establecen en 50% y 200% respectivamente. Entonces el el elemento con el valor del 50% será 18px y el elemento con el valor de 200% será 27px. Así es como se ve ese código en acción:

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

Tamaño de fuente receptivo en CSS

Todos los valores de propiedad descritos anteriormente tienen una cosa en común: no responden. Si desea configurar su tamaño de fuente para que responda a todos los dispositivos y pantallas, puede usar la unidad de ancho de la ventana gráfica, abreviada como vw.

 
element { font-size: 10vw; }

La unidad vw es otra unidad relativa. No es relativo a un elemento principal o elemento raíz, sino al ancho de la ventana gráfica, el 1% de la ventana gráfica para ser exactos. Es decir, si la ventana gráfica tiene 100 cm de ancho, 1vw = 1 cm. Si la ventana gráfica tiene 50 cm de ancho, 1vw = 0,5 cm, y así sucesivamente.

Digamos que quiero que el tamaño de fuente de mi párrafo sea el 10% del ancho de la ventana del navegador. Así es como se ve el código:

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

Y así es como se ve el texto cuando cambiamos el tamaño de la ventana gráfica:

una demostración visual del cambio de tamaño de fuente a medida que cambia la ventana del navegador

Tamaño máximo de fuente en CSS

Al establecer el tamaño de fuente en unidades vm, tenga cuidado de que su texto no sea demasiado grande en pantallas grandes. Desafortunadamente, CSS no tiene la propiedad max-font-size, pero puede evitar que su fuente sea demasiado grande mediante consultas de medios.

Solo tiene que usar la consulta de medios en un determinado punto de interrupción del tamaño de la pantalla y forzar el tamaño de la fuente a un valor de píxel establecido. Digamos que quiero forzar el tamaño de mi fuente a 30 px cuando la ventana gráfica supera los 1000 px. Así es como se ve el código:

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

Y así es como se ve el texto cuando cambiamos el tamaño de la ventana gráfica:

una demostración visual del cambio de tamaño de fuente a medida que cambia la ventana del navegador, luego se reduce en el punto de interrupción de 1000px

Controlar el tamaño de fuente

Cambiar el tamaño de fuente en CSS es complejo en comparación con la facilidad de cambiar el tamaño de fuente en Google Docs o Microsoft Word, pero se puede dominar con algo de práctica en HTML y CSS.

Nota del editor: esta publicación se publicó originalmente en mayo de 2020 y se actualizó para que sea más completa.

Nueva llamada a la acción