Javier Rodriguez

Menu

01-02 Type Scale (BVT)

FRAMEWORK 2024-07-26

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; } 
    }