_typography.vars.css

/**
 *  Typography CSS vars declarations.
 *
 *  1. Anything from 45 to 75 characters is widely regarded as a satisfactory
 *    length of line for a single-column page set in a serifed text face in a
 *    text size.
 *    The 66-character line (counting both letters and spaces) is widely
 *    regarded as ideal.
 *    For multiple column work, a better average is 40 to 50 characters.
 *    @see http://webtypography.net/2.1.2
 *
 * 2. Letter-spacing values are meant for uppercase text.
 */

:root {
    --w-typo-ratio: 33; /* 1 */
    --w-typo-ratio-l: 50;

    --golden-ratio: 1.61803398875;

    --font-size-ratio: 1;
    --font-size: calc(var(--font-size-ratio) * 16);
    --line-height: 1.4;

    --font-family: sans-serif;
    --font-family-loaded: 'Quattrocento Sans', sans-serif;
    --font-familyB: sans-serif;
    --font-familyB-loaded: 'Raleway', sans-serif;

    /*  Google web fonts weights (from URI) :
        Quattrocento+Sans:400,400i,700|Raleway:200,400,500,500i,700
    */
    --font-weight: 400;
    --font-weightB: 500;
    --font-weight-bold: 700;
    --font-weight-light: 400;
    --font-weight-thin: 200;

    --letter-spacing-s: .03em; /* 2 */
    --letter-spacing: .1em; /* 2 */
    --letter-spacing-m: .2em; /* 2 */
    --letter-spacing-l: .25em; /* 2 */


    /*  T-shirt sizes presets : XS < S < base < M < L < XL < XXL
        Expansion examples :
        XXS < XS < S < base < MS < M < ML < MLL < L < LL < LLL < XL < XLL < XXL < XXXL
    */

    --font-size-ratio-xs: .8;
    --font-size-xs: calc(var(--font-size) * var(--font-size-ratio-xs));
    --line-height-xs: 1.2;

    --font-size-ratio-s: .9;
    --font-size-s: calc(var(--font-size) * var(--font-size-ratio-s));
    --line-height-s: 1.2;

    --font-size-ratio-m: 1.25;
    --font-size-m: calc(var(--font-size) * var(--font-size-ratio-m));
    --line-height-m: var(--line-height);

    --font-size-ratio-l: 1.5;
    --font-size-l: calc(var(--font-size) * var(--font-size-ratio-l));
    --line-height-l: 1.15;

    --font-size-ratio-ll: 2.15;
    --font-size-ll: calc(var(--font-size) * var(--font-size-ratio-ll));
    --line-height-ll: 1.1;

    --font-size-ratio-xl: 2.5;
    --font-size-xl: calc(var(--font-size) * var(--font-size-ratio-xl));
    --line-height-xl: 1.1;

    --font-size-ratio-xll: 3;
    --font-size-xll: calc(var(--font-size) * var(--font-size-ratio-xll));
    --line-height-xll: 1;

    --font-size-ratio-xxl: 4;
    --font-size-xxl: calc(var(--font-size) * var(--font-size-ratio-xxl));
    --line-height-xxl: 1;
}