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.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Small | 20px | 1.25rem | Bold | PostoniWide | Headline | font-sm font-bold font--headline |
| Medium | 24px | 1.5rem | Bold | PostoniWide | Headline | font-md font-bold font--headline |
| Medium 2 | 28px | 1.75rem | Bold | PostoniWide | Headline | font-md2 font-bold font--headline |
| Medium 3 | 32px | 2rem | Bold | PostoniWide | Headline | font-md3 font-bold font--headline |
| Large | 40px | 2.5rem | Bold | PostoniWide | Headline | font-lg font-bold font--headline |
| Extra Large | 56px | 3.5rem | Bold | PostoniWide | Headline | font-xl font-bold font--headline |
| Extra Extra Large | 72px | 4.5rem | Bold | PostoniWide | Headline | font-xxl font-bold font--headline |
| Extra Extra Extra Large | 80px | 5rem | Bold | PostoniWide | Headline | font-xxxl font-bold font--headline |
Headline Light
Light headlines are used most commonly on homepage, bespoke articles, and other specialized content packaging.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Small | 20px | 1.25rem | Light | PostoniWide | Headline | font-sm font-light font--headline |
| Medium | 24px | 1.5rem | Light | PostoniWide | Headline | font-md font-light font--headline |
| Medium 2 | 28px | 1.75rem | Light | PostoniWide | Headline | font-md2 font-light font--headline |
| Medium 3 | 32px | 2rem | Light | PostoniWide | Headline | font-md3 font-light font--headline |
| Large | 40px | 2.5rem | Light | PostoniWide | Headline | font-lg font-light font--headline |
| Extra Large | 56px | 3.5rem | Light | PostoniWide | Headline | font-xl font-light font--headline |
| Extra Extra Large | 72px | 4.5rem | Light | PostoniWide | Headline | font-xxl font-light font--headline |
| Extra Extra Extra Large | 80px | 5rem | Light | PostoniWide | Headline | font-xxxl font-light font--headline |
Subhead Light
Subhead light should always be paired with headline-bold.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Extra Extra Extra Extra Small | 12px | 0.75rem | Light | Franklin | Subhead | font-xxxxs font-light font--subhead |
| Extra Extra Extra Small | 14px | 0.875rem | Light | Franklin | Subhead | font-xxxs font-light font--subhead |
| Extra Extra Small | 16px | 1rem | Light | Franklin | Subhead | font-xxs font-light font--subhead |
| Extra Small | 18px | 1.125rem | Light | Franklin | Subhead | font-xs font-light font--subhead |
| Small | 20px | 1.25rem | Light | Franklin | Subhead | font-sm font-light font--subhead |
| Medium | 24px | 1.5rem | Light | Franklin | Subhead | font-md font-light font--subhead |
| Medium 2 | 28px | 1.75rem | Light | Franklin | Subhead | font-md2 font-light font--subhead |
| Medium 3 | 32px | 2rem | Light | Franklin | Subhead | font-md3 font-light font--subhead |
| Large | 40px | 2.5rem | Light | Franklin | Subhead | font-lg font-light font--subhead |
| Extra Large | 56px | 3.5rem | Light | Franklin | Subhead | font-xl font-light font--subhead |
| Extra Extra Large | 72px | 4.5rem | Light | Franklin | Subhead | font-xxl font-light font--subhead |
| Extra Extra Extra Large | 80px | 5rem | Light | Franklin | Subhead | font-xxxl font-light font--subhead |
Subhead Bold
Subhead bold
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Extra Extra Extra Extra Small | 12px | 0.75rem | Bold | Franklin | Subhead | font-xxxxs font-bold font--subhead |
| Extra Extra Extra Small | 14px | 0.875rem | Bold | Franklin | Subhead | font-xxxs font-bold font--subhead |
| Extra Extra Small | 16px | 1rem | Bold | Franklin | Subhead | font-xxs font-bold font--subhead |
| Extra Small | 18px | 1.125rem | Bold | Franklin | Subhead | font-xs font-bold font--subhead |
| Small | 20px | 1.25rem | Bold | Franklin | Subhead | font-sm font-bold font--subhead |
| Medium | 24px | 1.5rem | Bold | Franklin | Subhead | font-md font-bold font--subhead |
| Medium 2 | 28px | 1.75rem | Bold | Franklin | Subhead | font-md2 font-bold font--subhead |
| Medium 3 | 32px | 2rem | Bold | Franklin | Subhead | font-md3 font-bold font--subhead |
| Large | 40px | 2.5rem | Bold | Franklin | Subhead | font-lg font-bold font--subhead |
| Extra Large | 56px | 3.5rem | Bold | Franklin | Subhead | font-xl font-bold font--subhead |
| Extra Extra Large | 72px | 4.5rem | Bold | Franklin | Subhead | font-xxl font-bold font--subhead |
| Extra Extra Extra Large | 80px | 5rem | Bold | Franklin | Subhead | font-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.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Extra Extra Extra Extra Small | 12px | 0.75rem | Light | Franklin | Meta Text | font-xxxxs font-light font--meta |
| Extra Extra Extra Small | 14px | 0.875rem | Light | Franklin | Meta Text | font-xxxs font-light font--meta |
| Extra Extra Small | 16px | 1rem | Light | Franklin | Meta Text | font-xxs font-light font--meta |
| Extra Small | 18px | 1.125rem | Light | Franklin | Meta Text | font-xs font-light font--meta |
| Small | 20px | 1.25rem | Light | Franklin | Meta Text | font-sm font-light font--meta |
| Medium | 24px | 1.5rem | Light | Franklin | Meta Text | font-md font-light font--meta |
| Medium 2 | 28px | 1.75rem | Light | Franklin | Meta Text | font-md2 font-light font--meta |
| Medium 3 | 32px | 2rem | Light | Franklin | Meta Text | font-md3 font-light font--meta |
| Large | 40px | 2.5rem | Light | Franklin | Meta Text | font-lg font-light font--meta |
| Extra Large | 56px | 3.5rem | Light | Franklin | Meta Text | font-xl font-light font--meta |
| Extra Extra Large | 72px | 4.5rem | Light | Franklin | Meta Text | font-xxl font-light font--meta |
| Extra Extra Extra Large | 80px | 5rem | Light | Franklin | Meta Text | font-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.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Extra Extra Extra Extra Small | 12px | 0.75rem | Bold | Franklin | Meta Text | font-xxxxs font-bold font--meta |
| Extra Extra Extra Small | 14px | 0.875rem | Bold | Franklin | Meta Text | font-xxxs font-bold font--meta |
| Extra Extra Small | 16px | 1rem | Bold | Franklin | Meta Text | font-xxs font-bold font--meta |
| Extra Small | 18px | 1.125rem | Bold | Franklin | Meta Text | font-xs font-bold font--meta |
| Small | 20px | 1.25rem | Bold | Franklin | Meta Text | font-sm font-bold font--meta |
| Medium | 24px | 1.5rem | Bold | Franklin | Meta Text | font-md font-bold font--meta |
| Medium 2 | 28px | 1.75rem | Bold | Franklin | Meta Text | font-md2 font-bold font--meta |
| Medium 3 | 32px | 2rem | Bold | Franklin | Meta Text | font-md3 font-bold font--meta |
| Large | 40px | 2.5rem | Bold | Franklin | Meta Text | font-lg font-bold font--meta |
| Extra Large | 56px | 3.5rem | Bold | Franklin | Meta Text | font-xl font-bold font--meta |
| Extra Extra Large | 72px | 4.5rem | Bold | Franklin | Meta Text | font-xxl font-bold font--meta |
| Extra Extra Extra Large | 80px | 5rem | Bold | Franklin | Meta Text | font-xxxl font-bold font--meta |
Body (Article)
This style is used for article body copy only.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Extra Extra Extra Extra Small | 12px | 0.75rem | Light | Georgia | Article Body | font-xxxxs font-light font--body |
| Extra Extra Extra Small | 14px | 0.875rem | Light | Georgia | Article Body | font-xxxs font-light font--body |
| Extra Extra Small | 16px | 1rem | Light | Georgia | Article Body | font-xxs font-light font--body |
| Extra Small | 18px | 1.125rem | Light | Georgia | Article Body | font-xs font-light font--body |
| Small | 20px | 1.25rem | Light | Georgia | Article Body | font-sm font-light font--body |
| Medium | 24px | 1.5rem | Light | Georgia | Article Body | font-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.
| Size | Pixel Size | REM Size | Weight | Font-Family | Example | CSS |
|---|---|---|---|---|---|---|
| Extra Extra Extra Extra Small | 12px | 0.75rem | Bold | Franklin | San Serif | font-xxxxs font-bold font-sans-serif |
| Extra Extra Extra Small | 14px | 0.875rem | Bold | Franklin | San Serif | font-xxxs font-bold font-sans-serif |
| Extra Extra Small | 16px | 1rem | Bold | Franklin | San Serif | font-xxs font-bold font-sans-serif |
| Extra Small | 18px | 1.125rem | Bold | Franklin | San Serif | font-xs font-bold font-sans-serif |
| Small | 20px | 1.25rem | Bold | Franklin | San Serif | font-sm font-bold font-sans-serif |
| Medium | 24px | 1.5rem | Bold | Franklin | San Serif | font-md font-bold font-sans-serif |
| Medium 2 | 28px | 1.75rem | Bold | Franklin | San Serif | font-md2 font-bold font-sans-serif |
| Medium 3 | 32px | 2rem | Bold | Franklin | San Serif | font-md3 font-bold font-sans-serif |
| Large | 40px | 2.5rem | Bold | Franklin | San Serif | font-lg font-bold font-sans-serif |
| Extra Large | 56px | 3.5rem | Bold | Franklin | San Serif | font-xl font-bold font-sans-serif |
| Extra Extra Large | 72px | 4.5rem | Bold | Franklin | San Serif | font-xxl font-bold font-sans-serif |
| Extra Extra Extra Large | 80px | 5rem | Bold | Franklin | San Serif | font-xxxl font-bold font-sans-serif |
Line-heights
The following are the supported line-heights that can be paired with Font Sans Serif.
| Name | Pixel Size | REM Size | Value | Example | CSS |
|---|---|---|---|---|---|
| Line Height 1 | - | - | 1 | Lorem 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.1 | Lorem 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.25 | Lorem 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.5 | Lorem 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.75 | Lorem 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 | - | - | 2 | Lorem 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.4 | Lorem 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 |