@economist/component-typography

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.