4 Typography

Typography

Toyota Display remains on H1 and H2 levels, all text smaller than that changes to Noto Sans.

Example fonts and styles

4.1 Default typography - CORE

4.1.1 Header 1 - CORE

Header 1 - CORE

h1

This is a header 1

<h1>This is a header 1</h1>

4.1.2 Header 2 - CORE

Header 2 - CORE

h2

This is a header 2

<h2>This is a header 2</h2>

4.1.3 Header 3 - CORE

Header 3 - CORE

h3

This is a header 3

<h3>This is a header 3</h3>

4.1.4 Header 4 - CORE

Header 4 - CORE

h4

This is a header 4

<h4>This is a header 4</h4>

4.1.5 Header 5 - CORE

Header 5 - CORE

h5

This is a header 5
<h5>This is a header 5</h5>

4.1.6 Paragraph - CORE

Paragraph - CORE

p

This is paragraph text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

<p>This is paragraph text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

4.1.7 Intro text - CORE

Intro text - CORE

.intro

This is an example intro text.
<span class="intro">This is an example intro text.</span>

4.1.8 Quote text - CORE

Quote text - CORE

.quote3

This is an example quote text.

<span class="quote3"><p>This is an example quote text.</p></span>

4.1.9 Support text - CORE

Support text - CORE

.support-text

This is an example support text.
<span class="support-text">This is an example support text.</span>

4.2 Typography utility classes - EXTENDED

4.2.1 Dark and light headers - EXTENDED

Those classes are usually used when and option in tridion allows the user to either have a dark title or a light one (e.g: title inside a focus section with a background image)

header + .header-dark h1,h2,.intro | header + .header-light h1,h2,.intro

Dark title on light background

Dark subtitle on light background

Dark subtitle on light background

Light title on dark background

Light subtitle on dark background

Light subtitle on dark background

<div style="background: white; padding: 30px 15px">
	<header class="header-dark">
		<h1>Dark title on light background</h1>
		<h2>Dark subtitle on light background</h2>
		<p class="intro">Dark subtitle on light background</p>
	</header>
</div>

<div style="background: black; padding: 30px 15px">
	<header class="header-light">
		<h1>Light title on dark background</h1>
		<h2>Light subtitle on dark background</h2>
		<p class="intro">Light subtitle on dark background</p>
	</header>
</div>