Tamaño de la fuente
La propiedad font-size establece el tamaño del texto.
Ser capaz de administrar el tamaño del texto es importante en el diseño web. Sin embargo, no debe usar ajustes de tamaño de fuente para hacer que los párrafos parezcan encabezados o que los encabezados parezcan párrafos.
Siempre utilice las etiquetas HTML, como <h1> - <h6> para encabezados y <p> para párrafos.
El valor de font-size puede ser un tamaño absoluto o relativo.
Tamaños absolutos:
Establece el texto en un tamaño especificado
No permite que un usuario cambie el tamaño del texto en todos los navegadores (malo por razones de accesibilidad)
El tamaño absoluto es útil cuando se conoce el tamaño físico de la salida
Tamaños relativos:
Establece el tamaño relativo a los elementos circundantes
Permite a un usuario cambiar el tamaño del texto en los navegadores
Nota: Si no especificas un tamaño de fuente, el tamaño predeterminado para texto normal, como párrafos, es
16px(16px = 1em).
Tamaño de la fuente con px
Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto:
Ejemplo:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Tip: Si usas píxeles, aún puedes usar la herramienta zoom para cambiar el tamaño de toda la página.
Tamaño de la fuente con em
Para permitir a los usuarios cambiar el tamaño del texto (en el menú del navegador), muchos desarrolladores usan em en lugar de px.
1em es igual al tamaño de la fuente actual. El tamaño de texto predeterminado en los navegadores es 16px. Entonces, el tamaño predeterminado de 1em es 16px.
El tamaño se puede calcular de píxeles a em usando esta fórmula: píxeles/16=em
Ejemplo:
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
En el ejemplo anterior, el tamaño del texto en em es el mismo que el ejemplo anterior en píxeles. Sin embargo, con el tamaño em, es posible ajustar el tamaño del texto en todos los navegadores.
Desafortunadamente, todavía hay un problema con las versiones anteriores de Internet Explorer. El texto se vuelve más grande de lo que debería cuando se hace más grande y más pequeño de lo que debería cuando se hace más pequeño.
Use una combinación con % y em
La solución que funciona en todos los navegadores es establecer un tamaño de fuente predeterminado en porcentaje para el elemento <body>:
Ejemplo:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Nuestro código ahora funciona muy bien. Muestra el mismo tamaño de texto en todos los navegadores y permite que todos los navegadores hagan zoom o cambien el tamaño del texto.
Tamaño de la fuente responsivo
El tamaño del texto se puede configurar con una unidad vw, que significa el "ancho de la ventana gráfica" (viewport width).
Ejemplo:
viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50cm de ancho, 1vw es 0,5cm.
Resumen
El tamaño de la fuente en CSS se puede establecer en valores absolutos o relativos. Los tamaños absolutos no permiten que los usuarios cambien el tamaño del texto y son útiles cuando se conoce el tamaño físico de la salida. Los tamaños relativos se establecen en relación con los elementos circundantes y permiten a los usuarios cambiar el tamaño del texto. Usar píxeles da un control total sobre el tamaño del texto, mientras que usar em permite a los usuarios cambiar el tamaño del texto en el menú del navegador. La solución que funciona en todos los navegadores es establecer un tamaño de fuente predeterminado en porcentaje para el elemento <body>. El tamaño del texto también se puede configurar con una unidad vw, que significa el ancho de la ventana gráfica.
Traducido con 💚 desde W3Schools.com