字體示範網站
用好的字體,說好一個故事
這是一個示範用的假網站,整頁都套用了你剛剛點選的字體。往下捲動,看看它在不同字級、字重、字距與行高下的實際表現。
為什麼字體很重要
易讀性
好的內文字體讓長篇閱讀不費力,降低視覺疲勞。
一致性
完整的字重讓標題、內文與註解層次分明卻協調。
個性
字體是品牌的聲音,未開口就先傳達了氣質與態度。
關於排版的一些想法
排版的本質,是把文字安放在恰當的位置,讓讀者幾乎察覺不到設計的存在,卻能順暢地一路讀下去。字級決定了資訊的輕重,行高影響了呼吸的節奏,而字距則在細微處左右著整體的鬆緊。
同一款字體,放大成標題時展現骨架與個性,縮小為內文時則要退居幕後、成全內容。這正是我們把每款字體都放進真實情境示範的原因——只有實際套用,你才會知道它是否適合你的專案。
字體設計是凍結的音樂,節奏就藏在字與字的間距裡。
介面元件
數字與表格
0123456789
| 方案 | 用量 | 價格 |
|---|---|---|
| 入門 | 10,000 | NT$0 |
| 專業 | 250,000 | NT$1,280 |
| 企業 | 3,600,000 | NT$14,800 |
字級與字重一覽
所有可用字重
400 視覺設計 Typography 的重點在於平衡 0123456789
500 視覺設計 Typography 的重點在於平衡 0123456789
600 視覺設計 Typography 的重點在於平衡 0123456789
字距 Letter-spacing
tight -0.02em 視覺設計 Typography 的重點在於平衡 0123456789
normal 0 視覺設計 Typography 的重點在於平衡 0123456789
wide 0.15em 視覺設計 Typography 的重點在於平衡 0123456789
行高 Line-height
排版的本質,是把文字安放在恰當的位置,讓讀者幾乎察覺不到設計的存在,卻能順暢地一路讀下去。字級決定了資訊的輕重,行高影響了呼吸的節奏,而字距則在細微處左右著整體的鬆緊。
排版的本質,是把文字安放在恰當的位置,讓讀者幾乎察覺不到設計的存在,卻能順暢地一路讀下去。字級決定了資訊的輕重,行高影響了呼吸的節奏,而字距則在細微處左右著整體的鬆緊。
排版的本質,是把文字安放在恰當的位置,讓讀者幾乎察覺不到設計的存在,卻能順暢地一路讀下去。字級決定了資訊的輕重,行高影響了呼吸的節奏,而字距則在細微處左右著整體的鬆緊。
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.
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
Numerals & tables
0123456789
| Plan | Usage | Price |
|---|---|---|
| Starter | 10,000 | $0 |
| Pro | 250,000 | $39 |
| Enterprise | 3,600,000 | $449 |
Sizes & weights at a glance
All available weights
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
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
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.
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.
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.
在你的網站使用
複製下列語法即可在網頁套用這款字體。
<link rel="stylesheet"
href="https://font.emtech.cc/css/GenWanMinTW"> body {
font-family: "GenWanMinTW", Georgia, "Noto Serif TC", serif;
} 相關字體
- 明朝体の伝統 Serif 0123
- 文字之美 Typography
- Slab Serif for Screens
- ユニバーサル 明朝 0123
- 古典明體 Serif
- Display Garamond 1600