Warm Welcome

Approachability in every weight

Lato's semi-rounded details create warmth without sacrificing professionalism. From light to black, it maintains the friendly character that's made it a web favorite.

Warm humanist simplicity. Lato's semi-rounded details convey approachability while maintaining professional gravitas.

corporatebloglanding page

Typefaces Used

Primarysans

Lato

Warm humanist sans with semi-rounded details. One of the most popular fonts on the web.

Released 2010

Available weights: 100, 300, 400, 700, 900

Recommended Scale

Headline One

Lato · 900 · 44px · 1.1

Headline Two

Lato · 700 · 28px · 1.2

Headline Three

Lato · 700 · 22px · 1.25

Body

Body text for paragraphs and long-form content.

Lato · 400 · 17px · 1.75

Caption

Caption and metadata text

Lato · 400 · 14px · 1.5

In Context

Design Essay · 12 min read

Warm Welcome

Approachability in every weight

Lato's semi-rounded details create warmth without sacrificing professionalism. From light to black, it maintains the friendly character that's made it a web favorite.

“Be kind whenever possible. It is always possible.”
Dalai Lama

Developer Exports

Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Lato", sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
}

h2 {
  font-family: "Lato", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-family: "Lato", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.body-text {
  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
}

.caption {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

Tailwind Config

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        lato: [""Lato"", "sans-serif"],
      },
      fontSize: {
        "h1": ["44px", { lineHeight: "1.1", fontWeight: "900" }],
        "h2": ["28px", { lineHeight: "1.2", fontWeight: "700" }],
        "h3": ["22px", { lineHeight: "1.25", fontWeight: "700" }],
        "body": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
        "caption": ["14px", { lineHeight: "1.5", fontWeight: "400" }],
      },
    },
  },
};

export default config;

AI-Ready Exports

Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.

System Description

Explain this type system to an AI

Use this typographic system:

Headings:
  Lato, 900 weight
  Used for H1–H3
  Warm humanist sans with semi-rounded details. One of the most popular fonts on the web.

Body:
  Lato, 400 weight
  Used for paragraphs and UI
  Warm humanist sans with semi-rounded details. One of the most popular fonts on the web.

Tone:
  warm, professional, friendly
  Warm humanist simplicity. Lato's semi-rounded details convey approachability while maintaining professional gravitas.

Use this scale:
  H1 — 44px / 1.1
  H2 — 28px / 1.2
  H3 — 22px / 1.25
  Body — 17px / 1.75
  Caption — 14px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Lato — 900 — 44px — line-height 1.1
H2 — Lato — 700 — 28px — line-height 1.2
H3 — Lato — 700 — 22px — line-height 1.25
Body — Lato — 400 — 17px — line-height 1.75
Caption — Lato — 400 — 14px — line-height 1.5

Headings should feel warm and professional.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.