Tipografía
Escala tipográfica
Una rampa de tamaños con su alto de línea, y fluida si la necesitas.
La escala
--text-4xlTipografía que respira40 px2,49 rem · 1,26--text-3xlTipografía que respira33 px2,07 rem · 1,29--text-2xlTipografía que respira28 px1,73 rem · 1,33--text-xlTipografía que respira23 px1,44 rem · 1,38--text-lgTipografía que respira19 px1,20 rem · 1,43--text-baseTipografía que respira16 px · base1,00 rem · 1,50--text-smTipografía que respira13 px0,83 rem · 1,58--text-xsTipografía que respira11 px0,69 rem · 1,60El CSS, listo para copiar
Calculado sobre una raíz de 16 px, que es lo que traen todos los navegadores. El término en rem no es adorno: un font-size que fuera solo vw dejaría de responder al zoom.
:root {
--text-xs: 0.6944rem;
--text-xs-lh: 1.6;
--text-sm: 0.8333rem;
--text-sm-lh: 1.58;
--text-base: 1rem;
--text-base-lh: 1.5;
--text-lg: 1.2rem;
--text-lg-lh: 1.43;
--text-xl: 1.44rem;
--text-xl-lh: 1.38;
--text-2xl: 1.728rem;
--text-2xl-lh: 1.33;
--text-3xl: 2.0736rem;
--text-3xl-lh: 1.29;
--text-4xl: 2.4883rem;
--text-4xl-lh: 1.26;
}