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