文字之美 Typography
プレビュー言語
notoserifjp.example.com
フォントデモサイト
良いフォントで、物語をより良く語る
これはデモ用の架空サイトで、ページ全体に今選んだフォントが適用されています。下にスクロールして、各文字サイズ・ウェイト・字間・行間での見え方を確かめてください。
はじめる 詳しく見る
なぜフォントが大切か
可読性
良い本文用フォントは長文の読書を楽にし、目の疲れを軽減します。
一貫性
豊富なウェイトが見出し・本文・キャプションの調和を保ちます。
個性
フォントはブランドの声——一文字も読まれる前から語りかけます。
タイポグラフィについての覚え書き
良いタイポグラフィは文字をあるべき場所に置き、読者が設計をほとんど意識せずに読み進められるようにします。文字サイズが情報の軽重を決め、行間がリズムをつくり、字間が全体の質感を静かに整えます。
同じフォントでも、大きな見出しでは骨格と個性を見せ、本文サイズでは一歩下がって内容を支えます。だからこそ私たちはすべてのフォントを実際の文脈で見せます——使ってみて初めて、それがあなたのプロジェクトに合うか分かるのです。
タイポグラフィは凍った音楽。リズムは文字と文字の間に潜んでいる。
UI パーツ
概要 プロジェクト メンバー 設定
プロジェクトを作成 ファイルを読み込む ドキュメントを見る
プロジェクト名 2025年 ブランドリニューアル サイドバーと共有リンクに表示されます。あとから変更できます。
公開中 レビュー待ち 下書き
数字と表組み
0123456789
月額 ¥5,800
前月比 +24.8%
請求日 2025/03/31
| プラン | 利用量 | 料金 |
|---|---|---|
| スターター | 10,000 | ¥0 |
| プロ | 250,000 | ¥5,800 |
| エンタープライズ | 3,600,000 | ¥66,000 |
サイズとウェイト一覧
48 / Display いろはにほへと 視覚デザイン Typography 0123456789
32 / H1 いろはにほへと 視覚デザイン Typography 0123456789
24 / H2 いろはにほへと 視覚デザイン Typography 0123456789
16 / Body いろはにほへと 視覚デザイン Typography 0123456789
13 / Caption いろはにほへと 視覚デザイン Typography 0123456789
利用可能なすべてのウェイト
200 いろはにほへと 視覚デザイン Typography 0123456789
300 いろはにほへと 視覚デザイン Typography 0123456789
400 いろはにほへと 視覚デザイン Typography 0123456789
500 いろはにほへと 視覚デザイン Typography 0123456789
600 いろはにほへと 視覚デザイン Typography 0123456789
700 いろはにほへと 視覚デザイン Typography 0123456789
900 いろはにほへと 視覚デザイン Typography 0123456789
字間 Letter-spacing
tight -0.02em いろはにほへと 視覚デザイン Typography 0123456789
normal 0 いろはにほへと 視覚デザイン Typography 0123456789
wide 0.15em いろはにほへと 視覚デザイン Typography 0123456789
行間 Line-height
tight 1.2
良いタイポグラフィは文字をあるべき場所に置き、読者が設計をほとんど意識せずに読み進められるようにします。文字サイズが情報の軽重を決め、行間がリズムをつくり、字間が全体の質感を静かに整えます。
normal 1.6
良いタイポグラフィは文字をあるべき場所に置き、読者が設計をほとんど意識せずに読み進められるようにします。文字サイズが情報の軽重を決め、行間がリズムをつくり、字間が全体の質感を静かに整えます。
loose 2.0
良いタイポグラフィは文字をあるべき場所に置き、読者が設計をほとんど意識せずに読み進められるようにします。文字サイズが情報の軽重を決め、行間がリズムをつくり、字間が全体の質感を静かに整えます。
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
200 The quick brown fox jumps over the lazy dog 0123456789
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
600 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.
あなたのサイトで使う
下のコードをコピーすれば、ウェブページにこのフォントを適用できます。
HTML（<head> 内）
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap"> CSS
body {
font-family: "Noto Serif JP", Georgia, "Noto Serif TC", serif;
}関連フォント
-
- Slab Serif for Screens
- ユニバーサル 明朝 0123
- 古典明體 Serif
- Display Garamond 1600
- Classic Old-style 1592