Here we control how the font grows and adapts to screens.
/*---------------------------------------------------------------------------
01-02 Type Scale (BVT) FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/
:root {
/* Font Size Master -- Font size is the basis of all spacing */
--fontSize: 16px;
/* line height */
--lineHeight: calc(var(--fontSize) * 1.6);
/* Lead Paragraph Text */
--leadsize: 1.6em;
--leadlineHeight: calc(var(--fontSize) * 1.8);
/* Fine Print */
--fineprint: .8em;
--fineprintlineHeight: calc(var(--fontSize) * 1.3);
/* Heading Scaling */
--h1-size: 2.1rem;
--h2-size: 1.8rem;
--h3-size: 1.55rem;
--h4-size: 1.3rem;
--h5-size: 1.175rem;
--h6-size: .8rem;
/* Letter Spacing */
--letter_spacing-contract: -.07em;
--letter_spacing-expand: .2em;
}
/* Mobile SML DOWN (Test @ 320px Wide) */
@media (max-width: 379px) {
:root { --fontSize: 14px;
}
}
/* Tablet */
@media (min-width: 760px) {
:root { --fontSize: 16px; }
}
/* HEADING SCALING Desktop SMLx LRG & UP */
@media (min-width: 1300px) {
:root {
/* Font Size Master */
--fontSize: 16px;
/* Lead Paragraph Text */
--leadsize: 1.4em;
/* Fine Print */
--fineprint: .7em;
/* Heading Scaling */
--h1-size: 2.8rem;
--h2-size: 2.3rem;
--h3-size: 1.8rem;
--h4-size: 1.4rem;
--h5-size: 1.2rem;
--h6-size: .675rem;
}
}
/* Desktop Medium */
@media (min-width: 1500px) {
:root { --fontSize: 18px; }
}