@economist/component-typography

Typography component containing postCSS variables for font sizes and line-heights for each font size. Uses a major second modular scale.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@economist/component-typography
4.4.04 years ago7 years agoMinified + gzip package size for @economist/component-typography in KB

Readme

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.