🔤 Type

🔤 Type

Effortlessly Readable

Lato combines excellent readability and warm semi-rounded details with an ‘almost invisible’ quality that lets content shine in any format.

Our base font size is 16px standard with a 12px absolute minimum size used only for meta and supporting text.

Info: Color contrast must meet the AA Color Contrast Accessibility Standards. Our brand font Lato should be applied using the following sizing, weight, line-height guidelines, and hierarchy examples. All fonts cannot be smaller than 9pt due to accessibility.

Professional warmth meets digital-age clarity

Our brand font Lato should be applied using the following sizing, weight, line-height guidelines, and hierarchy examples.

We use ExtraBold mostly for headlines and Medium and Regular through as needed.

• Semi-rounded details create a warm, inviting feel while maintaining professionalism
• Large x-height makes it highly readable for body text
• Strong cross-browser/platform compatibility
• Balanced spacing and consistent rhythm across all weights
• Clear distinctions between similar characters (like 1, l, and I)

Lato Font CSS Classes

This repository provides predefined CSS font family classes using the Lato font. These classes ensure a consistent typography system in your project, covering various font weights and styles.

Usage

To apply a specific font style, use the appropriate class in your HTML:

<p class="ayode-lato-regular">This is a paragraph with Lato Regular.</p>
<p class="ayode-lato-bold-italic">This is a paragraph with Lato Bold Italic.</p>

Available Font Classes

Thin (100)

Class: ayode-lato-thin
Displays text in Lato Thin with normal style.

Example:

<p class="ayode-lato-thin">This is Lato Thin.</p>

Class: ayode-lato-thin-italic
Displays text in Lato Thin with italic style.

Example:

<p class="ayode-lato-thin-italic">This is Lato Thin Italic.</p>

Light (300)

Class: ayode-lato-light
Displays text in Lato Light with normal style.

Example:

<p class="ayode-lato-light">This is Lato Light.</p>

Regular (400)

Class: ayode-lato-regular
Displays text in Lato Regular with normal style.

Example:

<p class="ayode-lato-regular">This is Lato Regular.</p>

Medium (500)

Class: ayode-lato-medium
Displays text in Lato Medium with normal style.

Example:

<p class="ayode-lato-medium">This is Lato Medium.</p>

Bold (700)

Class: ayode-lato-bold
Displays text in Lato Bold with normal style.

Example:

<p class="ayode-lato-bold">This is Lato Bold.</p>

Class: ayode-lato-bold-italic
Displays text in Lato Bold with italic style.

Example:

<p class="ayode-lato-bold-italic">This is Lato Bold Italic.</p>

ExtraBold (900)

Class: ayode-lato-black
Displays text in Lato Black with normal style.

Example:

<p class="ayode-lato-black">This is Lato Black.</p>