Hay diferentes maneras de llamar la atención sobre el texto en un sitio web. Puedes hacerlo Naranja, por ejemplo. Puedes audaz o subrayar este. Puedes resaltar Una oración en una frase.
Además de estas opciones de formato, también puede cambiar el tamaño de fuente del texto para captar la atención del lector y establecer una jerarquía visual. En esta publicación de blog, notará que el título (
) tiene el tamaño de fuente más grande. A continuación están mis elementos de encabezado (, y ), todos mayores que elementos debajo de ellos. De esta manera, el visitante (usted) sabe dónde comienzan las secciones individuales.
Los encabezados HTML no son la única forma de cambiar el tamaño de fuente en su sitio web. Suponga 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 este 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 una propiedad CSS que controla el tamaño de fuente de la página web. Hay varios valores diferentes que se pueden utilizar para definir tamaño de fuente propiedad. Eche un vistazo al ejemplo a continuación, que tiene varios 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 sitio web. El que elijas dependerá de las necesidades y objetivos de tu sitio web. 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 reducir 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, le daré un ejemplo de su sintaxis y una breve descripción.
Palabra clave en tamaño absoluto
element { font-size: small; }
Las palabras clave de tamaño absoluto se basan en el tamaño de fuente predeterminado. La mayoría de las veces, el tamaño de fuente predeterminado es mediocre (que se traduce en 16 píxeles o 1 em), aunque esto puede variar 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
- mediocre
- largo
- extragrande
- xx-grande
- xxx-grande
Así es como se ve cada uno de ellos en el 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 lo ayudan a colocar el texto en un tamaño específico y crear una jerarquía de fuentes en la página. Sin embargo, no permiten que el 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 adaptarse mejor a 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 hacen que la fuente sea más grande o más pequeña que el tamaño de fuente 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 padre es el tamaño de fuente largoun elemento hijo con un tamaño relativo definido menor tendrá el tamaño de fuente mediocre. Veamos el código para este hipotético.
ver la pluma tamaño de fuente: tamaño relativo de Christina Perricone (@hubspot) en CódigoPen.
Tenga en cuenta que usé el selector de clase «.relative» para seleccionar un H2 en lugar de usar un selector de tipo para apuntar 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 varios valores de longitud que determinan la propiedad de tamaño de fuente en CSS. Aquí nos vamos a centrar 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á ajustar el tamaño de la fuente, independientemente del navegador que utilice el visitante. Puede especificar el número exacto de píxeles de altura que el navegador debe representar el texto (aunque los resultados pueden variar ligeramente según los algoritmos utilizados por los navegadores).
ver la pluma tamaño de fuente: píxeles de Christina Perricone (@hubspot) en CódigoPen.
Sin embargo, la naturaleza permanente de los píxeles también es una desventaja. No están optimizados para todos los dispositivos – CSS-Tricks encontró sitios web en el iPad mini renderizar igual que las páginas web en iPadpor ejemplo, y no son un valor de longitud disponible. Dado que los usuarios no pueden cambiar el tamaño de fuente en algunos navegadores, puede aprovechar las opciones más versátiles y receptivas.
ccsme
element { font-size: 2em; }
La entidad em establece el tamaño de fuente al tamaño de fuente del elemento principal. Entonces, dándole al texto un tamaño de fuente Con 2 em 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 el diseño integrador. Como ems es una unidad relativa, los usuarios pueden ajustar el tamaño del texto en todos los navegadores.
El único inconveniente es el ems. Así que dime
ver la pluma tamaño de fuente: em de Christina Perricone (@hubspot) en CódigoPen.
Rems
element { font-size: 2rem; }
Remy son una unidad relativa como em, pero no se conectan. Esto se debe a que ems son unidades dependientes de la fuente, lo que significa que el tamaño de la fuente depende del tamaño de la fuente principal, mientras que remy se basa en la raíz. Esto significa que el tamaño de fuente depende del tamaño de fuente utilizado por el elemento principal, o el elemento en la parte superior del documento.
Digamos que configuro el tamaño de fuente del elemento principal en 12px por lo tanto, cualquier texto en un documento que no esté modificado por CSS tendrá una altura de 12 píxeles. Pero también quiero cambiar el tamaño de fuente a
Observe que el elemento anidado tiene el mismo tamaño de fuente que el otro elemento .
ver la pluma tamaño de letra: rem de Christina Perricone (@hubspot) en CódigoPen.
Porcentaje
element { font-size: 110%; }
El porcentaje determina el tamaño de fuente del elemento en relación con el tamaño de fuente del elemento principal.
Decir
ver la pluma tamaño de fuente: porcentaje de Christina Perricone (@hubspot) en CódigoPen.
Tamaño de fuente CSS receptivo
Los valores de propiedad descritos anteriormente tienen una cosa en común: no responden. Si desea que el tamaño de fuente responda a todos los dispositivos y pantallas, puede usar la unidad de ancho del área visible, abreviada como vw.
element { font-size: 10vw; }
La unidad vw es otra unidad relativa. No depende del elemento principal o raíz, sino del ancho de la ventana gráfica, exactamente el 1% de la ventana gráfica. Esto significa que si la ventana tiene 100 cm de ancho, 1vw = 1 cm. Si la ventana 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.
Así es como se ve el texto cuando cambiamos el tamaño de la ventana gráfica:
El tamaño máximo de fuente en CSS
Al configurar el tamaño de fuente en unidades de máquina virtual, tenga cuidado de no hacer que el texto sea demasiado grande en pantallas grandes. Desafortunadamente, CSS no tiene una propiedad de tamaño máximo de fuente, pero puede evitar que la fuente sea demasiado grande mediante consultas de medios.
Solo necesita usar una consulta de medios en un punto de interrupción de tamaño de pantalla específico y forzar que el tamaño de fuente regrese al valor de píxel que configuró. Digamos que quiero forzar el tamaño de fuente a 30 píxeles cuando el área visible supera los 1000 píxeles. 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.
Así es como se ve el texto cuando cambiamos el tamaño de la ventana gráfica:
Controlar el tamaño de la fuente
Cambiar el tamaño de fuente en CSS es complicado 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 esté completa.
