日本語の美 Typography 0123
roboto.example.com
Font Demo Site
Tell a better story with better type
This is a demo site — every element on this page uses the font you just picked. Scroll down to see how it performs across sizes, weights, letter-spacing and line-height.
Get Started Learn More
Why type matters
Readability
A good body font makes long reads effortless and reduces eye strain.
Consistency
A full range of weights keeps headings, body and captions in harmony.
Personality
Type is a brand’s voice — it speaks before a single word is read.
A few thoughts on typography
Good typography places words exactly where they belong, so the reader barely notices the design yet glides through the text. Size sets the hierarchy, line-height sets the rhythm, and letter-spacing quietly tunes the overall texture.
The same typeface reveals its skeleton and character at display sizes, then steps back to serve the content at body sizes. That is exactly why we show every font in a real context — only in use will you know if it fits your project.
Typography is frozen music; the rhythm hides in the space between letters.
Interface elements
Overview Projects Members Settings
Create project Import files Read the docs
Project name Brand identity refresh 2025 Shown in the sidebar and on shared links. You can change it later.
Published In review Draft
Numerals & tables
0123456789
Monthly $39.00
vs. last month +24.8%
Billing date 2025/03/31
| Plan | Usage | Price |
|---|---|---|
| Starter | 10,000 | $0 |
| Pro | 250,000 | $39 |
| Enterprise | 3,600,000 | $449 |
Sizes & weights at a glance
48 / Display The quick brown fox jumps over the lazy dog 0123456789
32 / H1 The quick brown fox jumps over the lazy dog 0123456789
24 / H2 The quick brown fox jumps over the lazy dog 0123456789
16 / Body The quick brown fox jumps over the lazy dog 0123456789
13 / Caption The quick brown fox jumps over the lazy dog 0123456789
All available weights
300 The quick brown fox jumps over the lazy dog 0123456789
400 The quick brown fox jumps over the lazy dog 0123456789
500 The quick brown fox jumps over the lazy dog 0123456789
700 The quick brown fox jumps over the lazy dog 0123456789
900 The quick brown fox jumps over the lazy dog 0123456789
Letter-spacing
tight -0.02em The quick brown fox jumps over the lazy dog 0123456789
normal 0 The quick brown fox jumps over the lazy dog 0123456789
wide 0.15em The quick brown fox jumps over the lazy dog 0123456789
Line-height
tight 1.2
Good typography places words exactly where they belong, so the reader barely notices the design yet glides through the text. Size sets the hierarchy, line-height sets the rhythm, and letter-spacing quietly tunes the overall texture.
normal 1.6
Good typography places words exactly where they belong, so the reader barely notices the design yet glides through the text. Size sets the hierarchy, line-height sets the rhythm, and letter-spacing quietly tunes the overall texture.
loose 2.0
Good typography places words exactly where they belong, so the reader barely notices the design yet glides through the text. Size sets the hierarchy, line-height sets the rhythm, and letter-spacing quietly tunes the overall texture.
Use it on your site
Copy the snippets below to apply this font on a web page.
HTML (in <head>)
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"> CSS
body {
font-family: "Roboto", system-ui, sans-serif;
}Related fonts
-
- 永續設計 Design 2026
- Legible for everyone I l 1 0 OSans
Atkinson Hyperlegible
Braille Institute / Applied Design Works
LatinNumeralsSymbolsSIL Open Font License 1.1Italic 2 weights - ユニバーサル UD 0123
- 復古黑體 Classic
- Low-contrast Geometric