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

• 최신 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;

[xguru]

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