Skip to content

Fonts

<a href="#">This is a basic link</a>
KSS Source

This is the default styling for a header 1

This is the same styling applied with a class
<h1>This is the default styling for a header 1</h1>
<div class="l-alpha-text">This is the same styling applied with a class</div>
KSS Source
This is a base headline
This is also a base headline achieved through adding a class
<strong>This is a base headline</strong>
<div class="l-base-headline">
This is also a base headline achieved through adding a class
</div>
KSS Source
This is base text
<div class="l-base-text">This is base text</div>
KSS Source

This is the default styling for a header 2

This is the same styling applied with a class
<h2>This is the default styling for a header 2</h2>
<div class="l-beta-text">This is the same styling applied with a class</div>
KSS Source

This is the default styling for a header 4

This is the same styling applied with a class
This is a variation on the delta text with slightly different letter spacing
<h4>This is the default styling for a header 4</h4>
<div class="l-delta-text">This is the same styling applied with a class</div>
<div class="l-sub-delta-text">
This is a variation on the delta text with slightly different letter spacing
</div>
KSS Source
This is a femto text
<div class="l-femto-text">This is a femto text</div>
KSS Source

This is the default styling for a header 3

This is the same styling applied with a class
<h3>This is the default styling for a header 3</h3>
<div class="l-gamma-text">This is the same styling applied with a class</div>
KSS Source
This is the default styling for a header 5
<h5>This is the default styling for a header 5</h5>
KSS Source
This is a micro subtext
<div class="l-femto-text">This is a micro subtext</div>
KSS Source
This is a micro text
<div class="l-micro-text">This is a micro text</div>
KSS Source
This is a nano headline
<div class="l-nano-headline">This is a nano headline</div>
KSS Source
This is a nano text
<div class="l-nano-text">This is a nano text</div>
KSS Source
This is the default styling for a header 6
This is the same styling applied with a class
<h6>This is the default styling for a header 6</h6>
<div class="l-zeta-text">This is the same styling applied with a class</div>
KSS Source
<a href="#">This is a basic link</a>
KSS Source

This is the default styling for a header 1

This is the same styling applied with a class
<h1>This is the default styling for a header 1</h1>
<div class="t-alpha-text">This is the same styling applied with a class</div>
KSS Source
This is a base headline
This is also a base headline achieved through adding a class
<strong>This is a base headline</strong>
<div class="t-base-headline">
This is also a base headline achieved through adding a class
</div>
KSS Source
This is base text
<div class="t-base-text">This is base text</div>
KSS Source

This is the default styling for a header 2

This is the same styling applied with a class
This is a variation on the beta text, using Toyota Base font instead of Toyota Semibold
<h2>This is the default styling for a header 2</h2>
<div class="t-beta-text">This is the same styling applied with a class</div>
<div class="t-sub-beta-text">
This is a variation on the beta text, using Toyota Base font instead of Toyota
Semibold
</div>
KSS Source
This is the default styling for a header 5
This is the same styling applied with a class
This is a variation on the epsilon text
<h5>This is the default styling for a header 5</h5>
<div class="t-epsilon-text">This is the same styling applied with a class</div>
<div class="t-sub-epsilon-text">This is a variation on the epsilon text</div>
KSS Source

This is the default styling for a header 3

This is the same styling applied with a class
<h3>This is the default styling for a header 3</h3>
<div class="t-gamma-text">This is the same styling applied with a class</div>
KSS Source

This is the default styling for a header 4

This is the same styling applied with a class
<h4>This is the default styling for a header 4</h4>
<div class="t-delta-text">This is the same styling applied with a class</div>
KSS Source
This is a milli headline
<div class="t-milli-headline">This is a milli headline</div>
KSS Source
This is a milli text
<div class="t-milli-text">This is a milli text</div>
KSS Source
This is the default styling for a header 6
There is no defined styling for this, so it will be styled like normal text
<h6>This is the default styling for a header 6</h6>
<div class="t-zeta-text">
There is no defined styling for this, so it will be styled like normal text
</div>
KSS Source