Typography & Fonts
CSS Typography & Fonts Cheat Sheet
Font Properties
Font Family
/* Basic font family */
.text {
font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;
font-family: Georgia, serif;
font-family: Verdana, sans-serif;
}
/* Multiple fallbacks */
.text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Generic font families */
.text {
font-family: serif; /* Times, Georgia, etc. */
font-family: sans-serif; /* Arial, Helvetica, etc. */
font-family: monospace; /* Courier, Monaco, etc. */
font-family: cursive; /* Comic Sans, Brush Script, etc. */
font-family: fantasy; /* Impact, Papyrus, etc. */
font-family: system-ui; /* System default */
}Font Size
/* Absolute units */
.text {
font-size: 16px; /* Pixels */
font-size: 12pt; /* Points */
font-size: 1pc; /* Picas */
font-size: 1in; /* Inches */
font-size: 2.54cm; /* Centimeters */
font-size: 25.4mm; /* Millimeters */
}
/* Relative units */
.text {
font-size: 1em; /* Relative to parent */
font-size: 1rem; /* Relative to root */
font-size: 1.5em; /* 1.5 times parent */
font-size: 0.875rem; /* 14px if root is 16px */
}
/* Percentage */
.text {
font-size: 100%; /* Same as parent */
font-size: 150%; /* 1.5 times parent */
font-size: 75%; /* 0.75 times parent */
}
/* Viewport units */
.text {
font-size: 5vw; /* 5% of viewport width */
font-size: 3vh; /* 3% of viewport height */
font-size: 2vmin; /* 2% of smaller viewport dimension */
font-size: 4vmax; /* 4% of larger viewport dimension */
}
/* Keywords */
.text {
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium; /* Default */
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller; /* Relative to parent */
font-size: larger; /* Relative to parent */
}Font Weight
/* Numeric values */
.text {
font-weight: 100; /* Thin */
font-weight: 200; /* Extra Light */
font-weight: 300; /* Light */
font-weight: 400; /* Normal */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold */
font-weight: 700; /* Bold */
font-weight: 800; /* Extra Bold */
font-weight: 900; /* Black */
}
/* Keywords */
.text {
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: lighter; /* Relative to parent */
font-weight: bolder; /* Relative to parent */
}Font Style
.text {
font-style: normal; /* Default */
font-style: italic; /* Italic */
font-style: oblique; /* Oblique (slanted) */
}Font Variant
.text {
font-variant: normal; /* Default */
font-variant: small-caps; /* Small capitals */
font-variant: all-small-caps; /* All small capitals */
font-variant: unicase; /* Mixed case */
font-variant: titling-caps; /* Titling capitals */
}Font Stretch
.text {
font-stretch: normal; /* Default */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
}Font Shorthand
/* Complete font shorthand */
.text {
font: italic bold 16px/1.5 "Times New Roman", serif;
/* style weight size/line-height family */
}
/* Partial shorthand */
.text {
font: 16px "Arial", sans-serif; /* size family */
font: bold 18px/1.4; /* weight size/line-height */
font: italic 14px "Georgia", serif; /* style size family */
}Text Properties
Text Color
.text {
color: #333; /* Hex */
color: rgb(51, 51, 51); /* RGB */
color: rgba(51, 51, 51, 0.8); /* RGBA with opacity */
color: hsl(0, 0%, 20%); /* HSL */
color: hsla(0, 0%, 20%, 0.8); /* HSLA with opacity */
color: black; /* Named color */
color: currentColor; /* Inherit from parent */
}Text Alignment
.text {
text-align: left; /* Left align */
text-align: right; /* Right align */
text-align: center; /* Center align */
text-align: justify; /* Justify text */
text-align: start; /* Start of text direction */
text-align: end; /* End of text direction */
text-align: justify-all; /* Justify including last line */
}Text Decoration
.text {
text-decoration: none; /* No decoration */
text-decoration: underline; /* Underline */
text-decoration: overline; /* Overline */
text-decoration: line-through; /* Strikethrough */
text-decoration: underline overline; /* Multiple */
}
/* Individual properties */
.text {
text-decoration-line: underline;
text-decoration-style: solid; /* solid, double, dotted, dashed, wavy */
text-decoration-color: red;
text-decoration-thickness: 2px;
}
/* Shorthand */
.text {
text-decoration: underline red 2px wavy;
/* line color thickness style */
}Text Transform
.text {
text-transform: none; /* No transformation */
text-transform: uppercase; /* ALL CAPS */
text-transform: lowercase; /* all lowercase */
text-transform: capitalize; /* First Letter Capital */
text-transform: full-width; /* Full-width characters */
text-transform: full-size-kana; /* Full-size kana */
}Text Indent
.text {
text-indent: 0; /* No indent */
text-indent: 20px; /* Positive indent */
text-indent: -20px; /* Negative indent (hanging) */
text-indent: 2em; /* Relative to font size */
text-indent: 10%; /* Percentage of container width */
}Letter Spacing
.text {
letter-spacing: normal; /* Default spacing */
letter-spacing: 2px; /* Positive spacing */
letter-spacing: -1px; /* Negative spacing */
letter-spacing: 0.1em; /* Relative to font size */
}Word Spacing
.text {
word-spacing: normal; /* Default spacing */
word-spacing: 5px; /* Positive spacing */
word-spacing: -2px; /* Negative spacing */
word-spacing: 0.2em; /* Relative to font size */
}Line Height
.text {
line-height: normal; /* Default */
line-height: 1.5; /* 1.5 times font size */
line-height: 24px; /* Fixed height */
line-height: 150%; /* Percentage */
line-height: 1.2em; /* Relative to font size */
}White Space
.text {
white-space: normal; /* Default */
white-space: nowrap; /* No wrapping */
white-space: pre; /* Preserve whitespace */
white-space: pre-wrap; /* Preserve and wrap */
white-space: pre-line; /* Preserve line breaks */
white-space: break-spaces; /* Break spaces */
}Word Break
.text {
word-break: normal; /* Default */
word-break: break-all; /* Break at any character */
word-break: keep-all; /* Keep words together */
word-break: break-word; /* Break long words */
word-break: auto-phrase; /* Break phrases */
}Word Wrap
.text {
word-wrap: normal; /* Default */
word-wrap: break-word; /* Break long words */
word-wrap: anywhere; /* Break anywhere */
}Overflow Wrap
.text {
overflow-wrap: normal; /* Default */
overflow-wrap: break-word; /* Break long words */
overflow-wrap: anywhere; /* Break anywhere */
}Web Fonts
Google Fonts
/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
/* Use imported font */
.text {
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Light */
font-weight: 400; /* Regular */
font-weight: 700; /* Bold */
}Local Fonts with @font-face
/* Define custom font */
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff'),
url('path/to/font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap; /* Optimize loading */
}
/* Use custom font */
.text {
font-family: 'MyCustomFont', fallback, sans-serif;
}Font Display
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
font-display: auto; /* Default */
font-display: block; /* Block until loaded */
font-display: swap; /* Swap when loaded */
font-display: fallback; /* Short block, then swap */
font-display: optional; /* Optional loading */
}Advanced Typography
Text Shadow
.text {
text-shadow: none; /* No shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* x y blur color */
text-shadow: 1px 1px 2px black; /* Simple shadow */
text-shadow: 2px 2px 0 red; /* No blur */
text-shadow: 0 0 10px blue; /* Glow effect */
text-shadow: 2px 2px 2px black, /* Multiple shadows */
4px 4px 4px gray;
}Text Overflow
.text {
text-overflow: clip; /* Default */
text-overflow: ellipsis; /* ... */
text-overflow: "---"; /* Custom string */
text-overflow: fade; /* Fade out */
text-overflow: fade(10px); /* Fade with size */
}
/* Common truncation pattern */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Vertical Alignment
.text {
vertical-align: baseline; /* Default */
vertical-align: sub; /* Subscript */
vertical-align: super; /* Superscript */
vertical-align: top; /* Top align */
vertical-align: middle; /* Middle align */
vertical-align: bottom; /* Bottom align */
vertical-align: text-top; /* Text top */
vertical-align: text-bottom; /* Text bottom */
vertical-align: 10px; /* Specific offset */
vertical-align: 50%; /* Percentage offset */
}Text Direction
.text {
direction: ltr; /* Left to right */
direction: rtl; /* Right to left */
unicode-bidi: normal; /* Default */
unicode-bidi: embed; /* Embed direction */
unicode-bidi: bidi-override; /* Override direction */
}Writing Mode
.text {
writing-mode: horizontal-tb; /* Default */
writing-mode: vertical-rl; /* Vertical right to left */
writing-mode: vertical-lr; /* Vertical left to right */
writing-mode: sideways-rl; /* Sideways right to left */
writing-mode: sideways-lr; /* Sideways left to right */
}Text Orientation
.text {
text-orientation: mixed; /* Default */
text-orientation: upright; /* Upright characters */
text-orientation: sideways; /* Sideways characters */
text-orientation: sideways-right; /* Sideways right */
}Typography Best Practices
Responsive Typography
/* Fluid typography */
.text {
font-size: clamp(16px, 4vw, 32px);
line-height: clamp(1.2, 1.5vw, 1.8);
}
/* Responsive font sizes */
.text {
font-size: 16px; /* Base size */
}
@media (min-width: 768px) {
.text {
font-size: 18px; /* Larger on tablets */
}
}
@media (min-width: 1024px) {
.text {
font-size: 20px; /* Even larger on desktop */
}
}Font Loading Optimization
/* Preload critical fonts */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
/* Font loading with fallbacks */
.text {
font-family: 'CustomFont', Arial, sans-serif;
font-display: swap;
}
/* Font loading detection */
.fonts-loaded .text {
font-family: 'CustomFont', sans-serif;
}Typography Scale
/* Modular scale */
:root {
--scale: 1.25; /* Perfect fourth */
--base-size: 16px;
--text-xs: calc(var(--base-size) / var(--scale));
--text-sm: var(--base-size);
--text-md: calc(var(--base-size) * var(--scale));
--text-lg: calc(var(--base-size) * var(--scale) * var(--scale));
--text-xl: calc(var(--base-size) * var(--scale) * var(--scale) * var(--scale));
}
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }Accessibility
/* Minimum contrast ratios */
.text {
color: #333; /* Good contrast on white */
background: white;
}
/* Focus indicators */
.text:focus {
outline: 2px solid #007acc;
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.text {
animation: none;
transition: none;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.text {
color: black;
background: white;
}
}Common Typography Patterns
/* Article typography */
.article {
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 1.6;
max-width: 65ch; /* Optimal reading width */
}
/* Code typography */
.code {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 14px;
line-height: 1.4;
}
/* Heading hierarchy */
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }
/* Caption text */
.caption {
font-size: 0.875rem;
color: #666;
font-style: italic;
}Last updated