Skip to content

CSS:font

Font style & weight preview

300px

.font1 { font-style:normal;}
.font2 { font-style:italic;}
.font3 { font-style:oblique;}
.font4 { font-style:inherit; }
.font5 { font-weight:900;}/*100 ~ 900까지 설정 가능*/
.font6 { font-weight:normal;}
.font7 { font-weight:lighter;}
.font8 { font-weight:bold;}
.font9 { font-weight:bolder;}
.font10 { font-weight:inherit;}

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

Favorite site