Source Serif 4
About Source Serif 4
Frank Griesshammer 设计的 Source Serif 4 是 Source Serif 家族的成熟演进版,作为 Adobe 旗下 Source Sans 的衬线搭档,经过多次迭代成为一款具有视觉级别和字重可变轴的精细过渡性衬线体。opsz 轴可根据尺寸变化自动调整字母细节——小尺寸时拓宽间距、开放字形,展示尺寸时收紧比例、增加对比度。西里尔、希腊和越南文字支持使其成为编辑系统、技术文档和数字图书的全球通用字体。
Character Map
NnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
!@#$%^&*()_+-=[]{}|;':",.<>?
Weight Waterfall (8)
How to Use
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@200;300;500;600;700;800;900;400&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@200;300;500;600;700;800;900;400&display=swap');
font-family: 'Source Serif 4', serif;
brew install --cask font-source-serif-4
Details
- Category
- Serif
- Style
- transitional
- Weights
- 8
- Italic
- ✓
- 韩语
- ✗
- Designer
- Frank Griesshammer
- License
- OFL
- Version
- Popularity
- #111
- Downloads
- 2
License Usage
| Web use | Allowed |
| Allowed | |
| Video / Broadcast | Allowed |
| Packaging | Allowed |
| App embedding | Allowed |
| Brand / Logo | Allowed |
| Modification | Allowed |
OFL — Free for personal & commercial use
Language Support
Best For
Similar Fonts
Typography Concepts
-
Measure
The length of a line of text, typically 45–75 characters for optimal readability. Too long or too short reduces reading comfort.
-
Font Family
A group of related fonts that share the same basic design but vary in weight, width, or style. In CSS, the font-family property specifies preferred fonts.
-
unicode-range
CSS descriptor in @font-face that specifies which Unicode characters to download from a font file, enabling automatic subsetting by the browser.
-
font-variation-settings
CSS property to control variable font axes directly — weight, width, slant, and custom axes. Lower-level than font-weight/font-stretch.
-
Optical Size
Adjusting letterform details based on the intended display size. Small text needs more spacing and heavier strokes; large text can be more refined.
-
Vertical Rhythm
Consistent spacing pattern that aligns text baselines and element spacing to a baseline grid. Creates visual harmony on the page.