Typography

Typography

Typography

One of the core foundations of our system is our type styles.

Headline Bold

The most commonly used headline on our site is PostoniWide Bold at these sizes.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Small20px1.25remBoldPostoniWideHeadlinefont-sm font-bold font--headline
Medium24px1.5remBoldPostoniWideHeadlinefont-md font-bold font--headline
Medium 228px1.75remBoldPostoniWideHeadlinefont-md2 font-bold font--headline
Medium 332px2remBoldPostoniWideHeadlinefont-md3 font-bold font--headline
Large40px2.5remBoldPostoniWideHeadlinefont-lg font-bold font--headline
Extra Large56px3.5remBoldPostoniWideHeadlinefont-xl font-bold font--headline
Extra Extra Large72px4.5remBoldPostoniWideHeadlinefont-xxl font-bold font--headline
Extra Extra Extra Large80px5remBoldPostoniWideHeadlinefont-xxxl font-bold font--headline

Headline Light

Light headlines are used most commonly on homepage, bespoke articles, and other specialized content packaging.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Small20px1.25remLightPostoniWideHeadlinefont-sm font-light font--headline
Medium24px1.5remLightPostoniWideHeadlinefont-md font-light font--headline
Medium 228px1.75remLightPostoniWideHeadlinefont-md2 font-light font--headline
Medium 332px2remLightPostoniWideHeadlinefont-md3 font-light font--headline
Large40px2.5remLightPostoniWideHeadlinefont-lg font-light font--headline
Extra Large56px3.5remLightPostoniWideHeadlinefont-xl font-light font--headline
Extra Extra Large72px4.5remLightPostoniWideHeadlinefont-xxl font-light font--headline
Extra Extra Extra Large80px5remLightPostoniWideHeadlinefont-xxxl font-light font--headline

Subhead Light

Subhead light should always be paired with headline-bold.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Extra Extra Extra Extra Small12px0.75remLightFranklinSubheadfont-xxxxs font-light font--subhead
Extra Extra Extra Small14px0.875remLightFranklinSubheadfont-xxxs font-light font--subhead
Extra Extra Small16px1remLightFranklinSubheadfont-xxs font-light font--subhead
Extra Small18px1.125remLightFranklinSubheadfont-xs font-light font--subhead
Small20px1.25remLightFranklinSubheadfont-sm font-light font--subhead
Medium24px1.5remLightFranklinSubheadfont-md font-light font--subhead
Medium 228px1.75remLightFranklinSubheadfont-md2 font-light font--subhead
Medium 332px2remLightFranklinSubheadfont-md3 font-light font--subhead
Large40px2.5remLightFranklinSubheadfont-lg font-light font--subhead
Extra Large56px3.5remLightFranklinSubheadfont-xl font-light font--subhead
Extra Extra Large72px4.5remLightFranklinSubheadfont-xxl font-light font--subhead
Extra Extra Extra Large80px5remLightFranklinSubheadfont-xxxl font-light font--subhead

Subhead Bold

Subhead bold

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Extra Extra Extra Extra Small12px0.75remBoldFranklinSubheadfont-xxxxs font-bold font--subhead
Extra Extra Extra Small14px0.875remBoldFranklinSubheadfont-xxxs font-bold font--subhead
Extra Extra Small16px1remBoldFranklinSubheadfont-xxs font-bold font--subhead
Extra Small18px1.125remBoldFranklinSubheadfont-xs font-bold font--subhead
Small20px1.25remBoldFranklinSubheadfont-sm font-bold font--subhead
Medium24px1.5remBoldFranklinSubheadfont-md font-bold font--subhead
Medium 228px1.75remBoldFranklinSubheadfont-md2 font-bold font--subhead
Medium 332px2remBoldFranklinSubheadfont-md3 font-bold font--subhead
Large40px2.5remBoldFranklinSubheadfont-lg font-bold font--subhead
Extra Large56px3.5remBoldFranklinSubheadfont-xl font-bold font--subhead
Extra Extra Large72px4.5remBoldFranklinSubheadfont-xxl font-bold font--subhead
Extra Extra Extra Large80px5remBoldFranklinSubheadfont-xxxl font-bold font--subhead

Meta Light

Meta light is the standard copy found throughout our site. Its use ranges from blurbs (brief descriptions) to timestamps, to legal text.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Extra Extra Extra Extra Small12px0.75remLightFranklinMeta Textfont-xxxxs font-light font--meta
Extra Extra Extra Small14px0.875remLightFranklinMeta Textfont-xxxs font-light font--meta
Extra Extra Small16px1remLightFranklinMeta Textfont-xxs font-light font--meta
Extra Small18px1.125remLightFranklinMeta Textfont-xs font-light font--meta
Small20px1.25remLightFranklinMeta Textfont-sm font-light font--meta
Medium24px1.5remLightFranklinMeta Textfont-md font-light font--meta
Medium 228px1.75remLightFranklinMeta Textfont-md2 font-light font--meta
Medium 332px2remLightFranklinMeta Textfont-md3 font-light font--meta
Large40px2.5remLightFranklinMeta Textfont-lg font-light font--meta
Extra Large56px3.5remLightFranklinMeta Textfont-xl font-light font--meta
Extra Extra Large72px4.5remLightFranklinMeta Textfont-xxl font-light font--meta
Extra Extra Extra Large80px5remLightFranklinMeta Textfont-xxxl font-light font--meta

Meta Bold

Meta bold is the standard copy found throughout our site. Its use ranges from blurbs (brief descriptions) to timestamps, to legal text.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Extra Extra Extra Extra Small12px0.75remBoldFranklinMeta Textfont-xxxxs font-bold font--meta
Extra Extra Extra Small14px0.875remBoldFranklinMeta Textfont-xxxs font-bold font--meta
Extra Extra Small16px1remBoldFranklinMeta Textfont-xxs font-bold font--meta
Extra Small18px1.125remBoldFranklinMeta Textfont-xs font-bold font--meta
Small20px1.25remBoldFranklinMeta Textfont-sm font-bold font--meta
Medium24px1.5remBoldFranklinMeta Textfont-md font-bold font--meta
Medium 228px1.75remBoldFranklinMeta Textfont-md2 font-bold font--meta
Medium 332px2remBoldFranklinMeta Textfont-md3 font-bold font--meta
Large40px2.5remBoldFranklinMeta Textfont-lg font-bold font--meta
Extra Large56px3.5remBoldFranklinMeta Textfont-xl font-bold font--meta
Extra Extra Large72px4.5remBoldFranklinMeta Textfont-xxl font-bold font--meta
Extra Extra Extra Large80px5remBoldFranklinMeta Textfont-xxxl font-bold font--meta

Body (Article)

This style is used for article body copy only.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Extra Extra Extra Extra Small12px0.75remLightGeorgiaArticle Bodyfont-xxxxs font-light font--body
Extra Extra Extra Small14px0.875remLightGeorgiaArticle Bodyfont-xxxs font-light font--body
Extra Extra Small16px1remLightGeorgiaArticle Bodyfont-xxs font-light font--body
Extra Small18px1.125remLightGeorgiaArticle Bodyfont-xs font-light font--body
Small20px1.25remLightGeorgiaArticle Bodyfont-sm font-light font--body
Medium24px1.5remLightGeorgiaArticle Bodyfont-md font-light font--body

Font Sans Serif

Font sans serif is used when the meta font or subhead default headline does not work for the use case. Font-sans-serif can be paired with our supported line-heights.

SizePixel SizeREM SizeWeightFont-FamilyExampleCSS
Extra Extra Extra Extra Small12px0.75remBoldFranklinSan Seriffont-xxxxs font-bold font-sans-serif
Extra Extra Extra Small14px0.875remBoldFranklinSan Seriffont-xxxs font-bold font-sans-serif
Extra Extra Small16px1remBoldFranklinSan Seriffont-xxs font-bold font-sans-serif
Extra Small18px1.125remBoldFranklinSan Seriffont-xs font-bold font-sans-serif
Small20px1.25remBoldFranklinSan Seriffont-sm font-bold font-sans-serif
Medium24px1.5remBoldFranklinSan Seriffont-md font-bold font-sans-serif
Medium 228px1.75remBoldFranklinSan Seriffont-md2 font-bold font-sans-serif
Medium 332px2remBoldFranklinSan Seriffont-md3 font-bold font-sans-serif
Large40px2.5remBoldFranklinSan Seriffont-lg font-bold font-sans-serif
Extra Large56px3.5remBoldFranklinSan Seriffont-xl font-bold font-sans-serif
Extra Extra Large72px4.5remBoldFranklinSan Seriffont-xxl font-bold font-sans-serif
Extra Extra Extra Large80px5remBoldFranklinSan Seriffont-xxxl font-bold font-sans-serif

Line-heights

The following are the supported line-heights that can be paired with Font Sans Serif.

NamePixel SizeREM SizeValueExampleCSS
Line Height 1--1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-1 font-sans-serif
Line Height Small--1.1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-sm font-sans-serif
Line Height Medium--1.25Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-md font-sans-serif
Line Height Large--1.5Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-lg font-sans-serif
Line Height Default--1.75Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-default font-sans-serif
Line Height Extra Large--2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-xl font-sans-serif
Line Height Extra Extra Large--2.4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Velit lorem arcu et volutpat ultricies thoncus diam praesent. Etiam ultrices ornare diam in at arcu nisi, sit. Sed velit sit massa justo, nunc nunc id adipiscing sem. Enim quam tellus, pellentesque ornare posuere elementum vitae.lh-xxl font-sans-serif