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