@economist/component-typography

    4.4.0 • Public • Published

    component-typography

    Provides typography postCSS variables for other components to use.

    Provided files

    • lib/font-face.js - font faces with relative paths
    • lib/font-family.js - JS variables for font families
    • lib/typography.js - JS variables for typography

    Typography

    Available weights and styles

    Econ Sans OS

    Primary subset (aA-zZ 0-9 etc)
    Secondary subset (all other characters)

    • Econ Sans OS Light (normal, 300)
    • Econ Sans OS Light Italic (italic, 300)
    • Econ Sans OS Regular (normal, 400)
    • Econ Sans OS Italic (italic, 400)
    • Econ Sans OS Medium (normal, 500)
    • Econ Sans OS Medium Italic (italic, 500)
    • Econ Sans OS Bold (normal, 700)
    • Econ Sans OS Bold Italic (italic, 700)

    Econ Sans Condensed

    Primary subset (aA-zZ 0-9 etc)
    Secondary subset (all other characters)

    • Econ Sans Condensed Light (normal, 300)
    • Econ Sans Condensed Light Italic (italic, 300)
    • Econ Sans Condensed Regular (normal, 400)
    • Econ Sans Condensed Italic (italic, 400)
    • Econ Sans Condensed Medium (normal, 500)
    • Econ Sans Condensed Medium Italic (italic, 500)
    • Econ Sans Condensed Bold (normal, 700)
    • Econ Sans Condensed Bold Italic (italic, 700)

    Econ Sans (lining figures, 0-9 only)

    • Econ Sans Light (normal, 300)
    • Econ Sans Light Italic (italic, 300)
    • Econ Sans Regular (normal, 400)
    • Econ Sans Italic (italic, 400)
    • Econ Sans Medium (normal, 500)
    • Econ Sans Medium Italic (italic, 500)
    • Econ Sans Bold (normal, 700)
    • Econ Sans Bold Italic (italic, 700)

    Milo TE

    Primary subset (aA-zZ 0-9 etc)
    Secondary subset (all other characters)

    • Milo TE Regular (normal, 400)
    • Milo TE Italic (italic, 400)
    • Milo TE Medium (normal, 500)
    • Milo TE Medium Italic (italic, 500)
    • Milo TE Bold (normal, 700)
    • Milo TE Bold Italic (italic, 700)

    Milo TE SC (small caps)

    • Milo TE Regular (normal, 400)
    • Milo TE Italic (italic, 400)
    • Milo TE Medium (normal, 500)
    • Milo TE Medium Italic (italic, 500)
    • Milo TE Bold (normal, 700)
    • Milo TE Bold Italic (italic, 700)

    Subsets

    Complete

    Includes all glyphs:

    !"#$%&'()*+,-.\/0123456789:;<=>?@ABCDEFGHIJKLMNOPQR	STUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƏəʻʼƵƶǢǣȲȳȷƒǺǻǼ	ǽǾǿȘșȚțˆˇ˘˙˚˛˜˝ΔΩμπẀẁẂẃẄẅẊẋ⁽⁾ⁿỲỳ–—‘’‚“”„†‡•…‰‹›⁄⁰⁴⁵⁶⁷⁸⁹⁽⁾ⁿ₀₁₂₃₄₅₆₇₈₉₍₎€ℓ™Ω℮⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟←↑→↓↖↗↘↙∂∆∏∑−∕∙√∞∫≈≠≤≥⋅◊fffiflffifflst
    

    Primary

    Includes alphabet, numerals, punctuation, currency, ligatures, directional arrows:

    !"#$%&'()*+,.\/0123456789:;<=>?@ABCDEFGHIJKLMNOPQR	STUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¥€ª¯°±´←↑→↓↖↗↘↙fffiflffifflst˝-–—•…‹›∙⋅≠ƒ‘’‚“”„‰
    

    Secondary

    Includes accents and additional characters / glyphs:

    ¨«¦§¤¬®©µ¶·¸º¹²³»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƏəʻʼƵƶǢǣȲȳȷǺǻǼ	ǽǾǿȘșȚțˆˇ˘˙˚˛˜ΔΩμπẀẁẂẃẄẅẊẋ⁽⁾ⁿỲỳ†‡⁄⁰⁴⁵⁶⁷⁸⁹⁽⁾ⁿ₀₁₂₃₄₅₆₇₈₉₍₎ℓ™Ω℮⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟∂∆∏∑−∕√∞∫≈≤≥◊
    

    Lining

    Includes lining numerals:

    0123456789
    

    Variables

    Font family

    • --fontfamily-sans-default: Econ Sans OS (primary and secondary subsets)
    • --fontfamily-sans-condensed-default: Econ Sans Condensed (primary and secondary subsets)
    • --fontfamily-sans-lining-default: Econ Sans lining figures
    • --fontfamily-serif-default: Milo TE (primary and secondary subsets)
    • --fontfamily-serif-smallcaps-default: Milo TE small caps

    text-size-step-X

    (Where X is a number from -2 to 7)

    These variables contain a font-size in ems, incrementing in a modular scale (a Major Second scale, or 1.125). Use these to calculate values for font-size.

    For example, var(--text-size-step-2) is the value in ems for the font size in the second step of the modular scale.

    --text-line-height-Y-on-step-X

    (Where X is a number from -2 to 7, and Y is one or two words separated-by-dashes)

    These variables represent the line height for a combination of font weight, style and size.

    Values for Y:

    • body - Body text
    • body-bold - Body text, in bold
    • body-light - Body text, light
    • display - Display text
    • display-italic - Display text, italic

    for example, var(--text-line-height-body-bold-on-step-4) is the correct line-height value for body text in bold and in the 4th step of the modular scale.

    Keywords

    none

    Install

    npm i @economist/component-typography

    DownloadsWeekly Downloads

    46

    Version

    4.4.0

    License

    MIT

    Unpacked Size

    1.89 MB

    Total Files

    131

    Last publish

    Collaborators

    • wellingtonvieira
    • economist-org-bot