Una fórmula para el tamaño de fuente responsivo
(jameshfisher.com)- Muchos sitios web como The New York Times, Medium y Substack usan breakpoints (como 768px) y cambian el tamaño de la fuente según ese criterio (1.125rem y 1.25rem)
- Usando
calcde CSS se puede escribir un valor parecido:calc(1.0625rem + 0.2604vw) - Si se redondea, se puede expresar como
1rem + 0.25vw. Por eso ahora uso el siguiente CSS en la mayoría de los sitios web
:root {
font-size: calc(1rem + 0.25vw);
}
3 comentarios
Si se quiere implementar igual que el diseño en PC, quizá también habría que incluir en la fórmula una variable de CSS que excluya el ancho de la barra de desplazamiento. Tengo entendido que la unidad
vwse basa en el ancho total, incluyendo el ancho de la barra de desplazamiento.En casos como la imagen completa, donde incluso los márgenes de los elementos alrededor deben aumentar o disminuir con la misma proporción, también podría servir como referencia la forma de configurar la fuente del siguiente sitio. En el caso del Galaxy Fold (320px) o de monitores de alta resolución, también parece razonable aplicar límites adecuados con breakpoints.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
Es una aproximación útil, pero es difícil que reemplace por completo los breakpoints que se usan en la tipografía fluida real.
Por lo general,
clamp(min_rem, calc_relative_vw, max_rem)se aplica de forma distinta en cada breakpoint según la legibilidad del contenido y la forma del contenedor; si se intenta resolver todo con una sola fórmula, se vuelve difícil cubrir form factors poco comunes.Por ejemplo, entornos como ventanas emergentes de Android, monitores 21:9 o dispositivos HMD.
No sé mucho sobre cosas como los pop-ups de Android o los HMD...
¿para casos como 21:9 no estaría bien usar también
vh?Algo como
calc(1rem + min(1vw, 1vh) * 0.25).