# Modern Font Stacks - 시스템 폰트를 사용한 폰트 스택

> Clean Markdown view of GeekNews topic #8750. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=8750](https://news.hada.io/topic?id=8750)
- GeekNews Markdown: [https://news.hada.io/topic/8750.md](https://news.hada.io/topic/8750.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-03-21T10:17:02+09:00
- Updated: 2023-03-21T10:17:02+09:00
- Original source: [modernfontstacks.com](https://modernfontstacks.com/)
- Points: 29
- Comments: 1

## Topic Body

- 최신 OS들의 '시스템 폰트'를 사용한 폰트 스택 CSS들을 제공   
- 내장 폰트라 웹폰트 다운로드가 필요 없으므로 빠른 웹페이지 구성 가능  
- 15가지 서체 종류  
  - System UI : OS의 기본 UI 폰트들   
    - `font-family: system-ui, sans-serif;`   
    - 맥/iOS San Francisco, 윈도우는 Segoe UI, Android는 Roboto, Linux는 Ubuntu 등을 사용하게 됨   
  - Transitional : 신/구의 조화   
    - `font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;`  
  - Old Style : 둥근 쉐리프가 특징인 르네상스 시대 폰트  
    - `font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;`  
  - Humanist : 유기적인 캘리그래피 형태, 르네상스시대의 손글씨에서 영감 받음. 다른 산세리프보다 읽기 쉬움   
    - `font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;`  
  - Geometric Humanist : 균일한 획 너비가 특징으로 헤드라인 용으로 자주 사용   
    - `font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;`  
  - Classical Humanist : 세리프로 끝나지 않고 획 끝에서 미묘하게 넓어짐  
    - `font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;`  
  - Neo-Grotesque : 19세기말~20세기 초에 발달한 산세리프 스타일   
    - `font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;`  
  - Monospace Slab Serif : 고정 너비 문자. 단순함. 보고서, 표, 기술문서에서 타자기 출력 에뮬레이션   
    - `font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;`  
  - Monospace Code : 프로그래밍 용. 고정폭에 읽기 쉬움   
    - `font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;`  
  - Industrial : 19세기 후반에 시작. 대담한 산세리프, 단순하고 직설적인 모양   
    - `font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;`  
  - Rounded Sans : 둥글게 휘어서 더 부드럽고 친근한 느낌. 어린이 친화적   
    - `font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;`  
  - Slab Serif : 서체 끝에 두껍고 블록모양의 세리프   
    - `font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;`  
  - Antique : 19세기에 유행. 블록 같은 세리프와 두껍고 균일한 획 두께가 특징   
    - `font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;`  
  - Didone : 모던 서체. 굵은 획. 브라케팅이 없는 헤어라인 세리프   
    - `font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;`  
  - Handwritten : 손글씨   
    - `font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;`

## Comments



### Comment 15279

- Author: xguru
- Created: 2023-03-21T10:18:01+09:00
- Points: 1

깃헙 페이지에서 보면 각 OS별로 어떻게 보이는지 손쉽게 비교가 가능합니다.  
https://github.com/system-fonts/modern-font-stacks