Tamaño de fuente CSS
Tamaño de fuente
La font-sizepropiedad 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.
Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para encabezados y <p> para párrafos.
El valor de tamaño de fuente puede ser un tamaño absoluto o relativo.
Tamaño absoluto:
- 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
Tamano relativo:
- 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 especifica un tamaño de fuente, el tamaño predeterminado para texto normal, como párrafos, es 16 px (16 px = 1 em).
Establecer tamaño de fuente con píxeles
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;
}
Sugerencia: si usa píxeles, aún puede usar la herramienta de zoom para cambiar el tamaño de toda la página.
Establecer tamaño de 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 píxeles.
1em es igual al tamaño de 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 de porcentaje 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 fuente sensible
El tamaño del texto se puede configurar con una vwunidad, lo que significa el "ancho de la ventana gráfica".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:
Hola Mundo
Cambie el tamaño de la ventana del navegador para ver cómo se escala el tamaño de fuente.
Ejemplo
<h1 style="font-size:10vw">Hello World</h1>
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 50 cm de ancho, 1vw es 0,5 cm.