La propiedad font-size establece el tamaño del texto.
Poder gestionar el tamaño del texto es importante en el diseño web. Sin embargo, tu no debe utilizar ajustes de tamaño de fuente para que los párrafos parezcan títulos, o Los títulos parecen párrafos.
Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los encabezados y <p> para párrafos.
El valor del tamaño de fuente puede ser un tamaño absoluto o relativo.
Tamaño absoluto:
Establece el texto a un tamaño específico
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 al usuario cambiar el tamaño del texto en los navegadores.
Nota: Si no especifica un tamaño de fuente, el tamaño predeterminado para el texto normal, como los párrafos, es 16px (16px=1em).
Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Consejo: Si usa píxeles, aún puede usar la herramienta de zoom para cambiar el tamaño de toda la página.
Para permitir a los usuarios cambiar el tamaño del texto (en el menú del navegador), muchos los 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 16 píxeles. Entonces, el tamaño predeterminado de 1em es 16px.
El tamaño se puede calcular de píxeles a em usando esta fórmula: <i>píxeles/16=<i>em
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 */
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>
</body>
</html>
En el ejemplo anterior, el tamaño del texto en em es el mismo que el del 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.
La solución que funciona en todos los navegadores es establecer un tamaño de fuente predeterminado en porcentaje para el elemento <body>:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
¡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.
El tamaño del texto se puede configurar con una unidad vw, que significa "ancho de la ventana gráfica".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:
Resize the browser window to see how the font size scales.
<h1 style="font-size:10vw">Hello World</h1>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
La ventana gráfica 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 de 0,5 cm.