{"data":{"type":"contents","id":"concepts/typography","attributes":{"html":"

Typography

\n

Usage

\n

Legibility

\n

Text legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.

\n

Please refer to the Colors section for more information on color contrast and accessibility.

\n

Sizes

\n

Disclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the <h1> for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all <h2> on that page need .text-xl to look like <h1> and so on.

\n

Use .text-sm for small headings or notice paragraphs.

\n
<div class=\"text-sm\">\n  Build with the teams that never stop shipping.\n</div>\n
\n

Use .text-base for body text, navigation items or links.

\n
<div class=\"text-base\">\n  Build with the teams that never stop shipping.\n</div>\n
\n

.text-base is also the default paragraph size.

\n
<div>\n  Build with the teams that never stop shipping.\n</div>\n
\n

Use .text-md for section headings. This is also the default size for the h3 element.

\n
<div class=\"text-md\">\n  Build with the teams that never stop shipping.\n</div>\n
\n

Use .text-lg for content page headings. This is also the default size for the h2 element.

\n
<div class=\"text-lg\">\n  Build with the teams that never stop shipping.\n</div>\n
\n

Use .text-xl for landing page headlines. This is also the default size for the h1 element.

\n
<div class=\"text-xl\">\n  Build with the teams that never stop shipping.\n</div>\n
\n

Use .text-hero-xl for headlines in page headers (heros).

\n
<h1 class=\"text-hero-xl\">\n  Build with the teams that never stop shipping.\n</h1>\n
\n

Use .text-hero-base for plain text in page headers (heros).

\n
<p class=\"text-hero-base\">\n  Ember.js is a productive, battle-tested JavaScript framework for building\n  modern web applications. It includes everything you need to build rich UIs\n  that work on any device.\n</p>\n
\n

Weights

\n

Use .regular

\n
<div class=\"text-md regular\">\n  Build with the teams that never stop shipping.\n</div>\n
\n

Use .bold if you must style something as bold and no semantic information needs to be carried. Prefer using <strong>.

\n
<div class=\"text-md bold\">\n  Build with the teams that never stop shipping.\n</div>\n
","content":"# Typography\n\n### Usage\n\n#### Legibility\n\nText legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.\n\nPlease refer to the Colors section for more information on color contrast and accessibility.\n\n### Sizes\n\nDisclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the `

` for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all `

` on that page need `.text-xl` to look like `

` and so on.\n\nUse `.text-sm` for small headings or notice paragraphs.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-base` for body text, navigation items or links.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\n`.text-base` is also the default paragraph size.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-md` for section headings. This is also the default size for the `h3` element.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-lg` for content page headings. This is also the default size for the `h2` element.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-xl` for landing page headlines. This is also the default size for the `h1` element.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-hero-xl` for headlines in page headers (heros).\n\n```html\n

\n Build with the teams that never stop shipping.\n

\n```\n\nUse `.text-hero-base` for plain text in page headers (heros).\n\n```html\n

\n Ember.js is a productive, battle-tested JavaScript framework for building\n modern web applications. It includes everything you need to build rich UIs\n that work on any device.\n

\n```\n\n## Weights\n\nUse `.regular`\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.bold` if you must style something as bold and no semantic information needs to be carried. Prefer using ``.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```"}}}