Drop in real product copy. Adjust size, weight, and tracking. See how the family handles your sentences before you commit.
A workspace your team will actually open.
SIZE
WEIGHT
TRACKING
CASE
SAMPLE
—— SPECIMENLato · Thin → Black
How it reads at every size.
A single typeface, shown from headline to footnote — the same words at every step of the scale.
72px / 700
Build the better web.
48px / 700
Build the better web.
32px / 700
Build the better web.
22px / 400
Build the better web. Lato handles every size in the hierarchy without missing a beat.
16px / 400
Build the better web. Lato handles the everyday body sizes — the same family will set the headline above and the footnote below.
12px / 400
Build the better web. Footnotes, captions, and the small-print never feel like a different typeface — the rhythm holds at every step of the scale.
BODY · 16/1.6
Lato was drawn for screens, with tall x-heights and open apertures that hold their shape at small sizes. The letterforms keep an even rhythm whether set as a headline or buried in a footnote. Spacing has been tuned across the weight range so running text feels settled rather than crowded. It is a workhorse that rarely calls attention to itself, which is precisely the point.
CAPTION · 13/1.5
Lato was drawn for screens, with tall x-heights and open apertures that hold their shape at small sizes. The letterforms keep an even rhythm whether set as a headline or buried in a footnote. Spacing has been tuned across the weight range so running text feels settled rather than crowded. It is a workhorse that rarely calls attention to itself, which is precisely the point.
—— WEIGHTS10 styles · 100, 300, 400, 700, 900
Every weight, every angle.
THIN
The thin variant whispers without disappearing.
wght 100
THIN ITALIC
The thin variant whispers without disappearing.
wght 100 · italic
LIGHT
Light slips beneath the headline without distracting.
wght 300
LIGHT ITALIC
Light slips beneath the headline without distracting.
wght 300 · italic
REGULAR
Regular is where the work usually lives.
wght 400
ITALIC
Regular is where the work usually lives.
wght 400 · italic
BOLD
Bold carries a marketing line without shouting.
wght 700
BOLD ITALIC
Bold carries a marketing line without shouting.
wght 700 · italic
BLACK
Black — for the loudest type only.
wght 900
BLACK ITALIC
Black — for the loudest type only.
wght 900 · italic
Single files are provided under the same license — see the full family download above.
Four flavors: CDN link, npm package, @fontsource, or static font files.
— index.html
<!-- Drop into <head> --><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"rel="stylesheet">/* In your stylesheet */body { font-family: 'Lato', system-ui, sans-serif; }
— terminal
# Install the packagenpm install @fontsource/lato# Then import in your entry fileimport'@fontsource/lato/400.css';
import'@fontsource/lato/700.css';
Good typography is the foundation of great design. It guides the reader's eye, establishes hierarchy, and gives a product its voice. Lato brings its own personality to every sentence.
All Weights
Thin 100Hamburgefons
Light 300Hamburgefons
Regular 400Hamburgefons
Bold 700Hamburgefons
Black 900Hamburgefons
Characters
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&?
FONT B
Type Scale
48
24
16
12
Body
Good typography is the foundation of great design. It guides the reader's eye, establishes hierarchy, and gives a product its voice. brings its own personality to every sentence.
All Weights
Characters
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&?
is an icon/symbol font — Latin specimens are suppressed here because its glyphs aren't letters.