CSS:font
Font style & weight preview
| |
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;
See also
- Font
- Font Awesome
- CSS:@font-face
-
CSS:font-family- 이 페이지로 링크 - Web Font
- Web typography#Performance Tunning
- fonttools (python - include pyftsubset)
- Web Font Loader gives you added control when using linked fonts via @font-face.