CSS:font

lastmod 2023-07-06created 2014-03-1710 edits

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;}`

Font stacks using system fonts

Provides font stack CSS using the 'system fonts' of modern OSes
Since they are built-in fonts, no web font download is needed, so web pages can be rendered quickly

15 typeface categories:

System UI - the OS's default UI fonts: font-family: system-ui, sans-serif;; Uses San Francisco on Mac/iOS, Segoe UI on Windows, Roboto on Android, Ubuntu on Linux, etc.

Transitional - a blend of new and old: font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

Old Style - Renaissance-era fonts characterized by rounded serifs: font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;

Humanist - organic calligraphic forms, inspired by Renaissance handwriting. Easier to read than other sans-serifs: font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

Geometric Humanist - characterized by uniform stroke width, often used for headlines: font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

Classical Humanist - strokes widen subtly at the ends instead of ending in serifs: font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;

Neo-Grotesque - sans-serif style developed in the late 19th to early 20th century: font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

Monospace Slab Serif - fixed-width characters. Simple. Emulates typewriter output in reports, tables, and technical documents: font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;

Monospace Code - for programming. Fixed-width and easy to read: font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

Industrial - started in the late 19th century. Bold sans-serif with simple, straightforward shapes: font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;

Rounded Sans - rounded curves for a softer, friendlier feel. Child-friendly: font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;

Slab Serif - thick, block-shaped serifs at the ends of strokes: font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;

Antique - popular in the 19th century. Characterized by block-like serifs and thick, uniform stroke weight: font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;

Didone - modern typeface. Bold strokes. Hairline serifs without bracketing: font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;

Handwritten - handwriting: font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

author Zer0 sitemap