CSS 6 💻 fonts and font properties - KandZ

Fonts play a crucial role in web design, affecting readability, user experience, and overall aesthetics. CSS provides several properties to customize the appearance of text, including font family, size, weight, style, and more.

Overview of Font Properties

Property	Description	Example
`font-family`	Specifies the font family	`font-family: Arial, sans-serif;`
`font-size`	Specifies the font size	`font-size: 16px;`
`font-weight`	Specifies the boldness	`font-weight: bold;`
`font-style`	Specifies the style (italic, oblique)	`font-style: italic;`
`font-variant`	Specifies small-caps or normal	`font-variant: small-caps;`
`line-height`	Specifies the height of a line	`line-height: 1.6;`
`letter-spacing`	Specifies space between characters	`letter-spacing: 2px;`
`word-spacing`	Specifies space between words	`word-spacing: 4px;`
`text-align`	Aligns text (left, right, center, justify)	`text-align: center;`
`text-decoration`	Adds decoration (underline, overline, line-through)	`text-decoration: underline;`
`text-transform`	Transforms text (uppercase, lowercase, capitalize)	`text-transform: uppercase;`

1. font-family

Specifies the font family to be used for a text element. You can provide multiple font names as a fallback system.

.custom-font {
    /* Primary font: Arial, fallback: sans-serif */
    font-family: Arial, sans-serif;

    /* Multiple fallbacks */
    font-family: 'Times New Roman', Times, serif;

    /* Google Font (imported) */
    font-family: 'Open Sans', Arial, sans-serif;
}

Key Points:

Font names with spaces should be enclosed in quotes (e.g., "Times New Roman")
Multiple fonts are separated by commas (the browser will try each one in order)
Always end with a generic font family (serif, sans-serif, monospace, etc.)

2. font-size

Specifies the size of the font. You can use absolute units (px, pt), relative units (em, rem, %), or keywords.

/* Pixels (absolute) */
.pixel-size {
    font-size: 16px;
}

/* Ems (relative to parent) */
.em-size {
    font-size: 1.2em; /* 1.2 × parent font size */
}

/* Rems (relative to root) */
.rem-size {
    font-size: 1.2rem; /* 1.2 × root font size */
}

/* Percentage (relative to parent) */
.percent-size {
    font-size: 120%; /* 120% of parent font size */
}

/* Keywords */
.keyword-size {
    font-size: medium; /* xx-small, x-small, small, medium, large, x-large, xx-large */
    font-size: smaller; /* relative to parent */
    font-size: larger; /* relative to parent */
}

/* Viewport-based (responsive) */
.vw-size {
    font-size: 2vw; /* 2% of viewport width */
}

3. font-weight

Specifies the boldness of the font. You can use keywords or numerical values.

Value	Description	Example
`normal`	Normal weight (400)	`font-weight: normal;`
`bold`	Bold weight (700)	`font-weight: bold;`
`bolder`	One level bolder than parent	`font-weight: bolder;`
`lighter`	One level lighter than parent	`font-weight: lighter;`
`100`–`900`	Numerical values (100 = thin, 900 = black)	`font-weight: 300;`

.custom-font {
    font-weight: bold; /* 700 */
}

.thin-text {
    font-weight: 100; /* Thin */
}

.light-text {
    font-weight: 300; /* Light */
}

.regular-text {
    font-weight: 400; /* Normal */
}

.semi-bold-text {
    font-weight: 600; /* Semi-bold */
}

.black-text {
    font-weight: 900; /* Black (very bold) */
}

4. font-style

Specifies the style of the font.

Value	Description	Example
`normal`	Normal style (default)	`font-style: normal;`
`italic`	Italic style	`font-style: italic;`
`oblique`	Oblique style (slanted)	`font-style: oblique;`

.custom-font {
    font-style: italic;
}

.normal-style {
    font-style: normal;
}

.oblique-style {
    font-style: oblique;
}

5. font-variant

Specifies whether the text should be displayed in small-caps.

.small-caps {
    font-variant: small-caps;
}

.normal-variant {
    font-variant: normal;
}

6. Additional Text Properties

line-height

Controls the height of a line of text.

.text {
    line-height: 1.6;   /* Unitless — 1.6 × font size */
    line-height: 24px;  /* Fixed pixel value */
    line-height: 150%;  /* Percentage of font size */
}

letter-spacing

Controls the space between characters.

.text {
    letter-spacing: 2px;   /* Adds space between letters */
    letter-spacing: -1px;  /* Reduces space between letters */
}

word-spacing

Controls the space between words.

.text {
    word-spacing: 4px;   /* Adds space between words */
}

text-align

Aligns text horizontally.

.text {
    text-align: left;     /* Left-aligned (default) */
    text-align: right;    /* Right-aligned */
    text-align: center;   /* Center-aligned */
    text-align: justify;  /* Justified (spread across line) */
}

text-decoration

Adds decoration to text.

.text {
    text-decoration: underline;           /* Underline */
    text-decoration: overline;            /* Overline */
    text-decoration: line-through;        /* Strikethrough */
    text-decoration: underline overline;  /* Multiple decorations */
}

text-transform

Transforms the case of text.

.text {
    text-transform: uppercase;   /* ALL CAPS */
    text-transform: lowercase;   /* all lowercase */
    text-transform: capitalize;  /* First Letter Capitalized */
    text-transform: none;        /* Original case */
}

The Shorthand `font` Property

You can combine multiple font properties into a single font shorthand.

/* Shorthand: style variant weight size/line-height family */
.font-shorthand {
    font: italic small-caps bold 16px/1.6 Arial, sans-serif;
}

/* Minimal shorthand: size family */
.font-shorthand-minimal {
    font: 16px Arial, sans-serif;
}

Order:

font-style (optional)
font-variant (optional)
font-weight (optional)
font-size (required)
/ line-height (optional)
font-family (required)

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Properties</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            background: #e9ecef;
            border-left: 4px solid #007bff;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .grid-2 .demo-box {
            border-left: 4px solid #28a745;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== FONT DEMOS ====== */

        /* ---- font-family ---- */
        .ff-arial {
            font-family: Arial, sans-serif;
        }

        .ff-times {
            font-family: 'Times New Roman', Times, serif;
        }

        .ff-courier {
            font-family: 'Courier New', monospace;
        }

        .ff-georgia {
            font-family: Georgia, 'Times New Roman', serif;
        }

        /* ---- font-size ---- */
        .fs-px {
            font-size: 16px;
        }

        .fs-em {
            font-size: 1.5em;
        }

        .fs-rem {
            font-size: 1.5rem;
        }

        .fs-vw {
            font-size: 2vw;
        }

        .fs-small {
            font-size: small;
        }

        .fs-large {
            font-size: large;
        }

        /* ---- font-weight ---- */
        .fw-thin {
            font-weight: 100;
        }

        .fw-light {
            font-weight: 300;
        }

        .fw-normal {
            font-weight: 400;
        }

        .fw-bold {
            font-weight: 700;
        }

        .fw-black {
            font-weight: 900;
        }

        /* ---- font-style ---- */
        .fs-normal {
            font-style: normal;
        }

        .fs-italic {
            font-style: italic;
        }

        .fs-oblique {
            font-style: oblique;
        }

        /* ---- font-variant ---- */
        .fv-smallcaps {
            font-variant: small-caps;
        }

        /* ---- text-decoration ---- */
        .td-underline {
            text-decoration: underline;
        }

        .td-overline {
            text-decoration: overline;
        }

        .td-line-through {
            text-decoration: line-through;
        }

        .td-combined {
            text-decoration: underline overline;
        }

        /* ---- text-transform ---- */
        .tt-uppercase {
            text-transform: uppercase;
        }

        .tt-lowercase {
            text-transform: lowercase;
        }

        .tt-capitalize {
            text-transform: capitalize;
        }

        /* ---- letter-spacing & word-spacing ---- */
        .ls-wide {
            letter-spacing: 4px;
        }

        .ls-tight {
            letter-spacing: -1px;
        }

        .ws-wide {
            word-spacing: 8px;
        }

        /* ---- text-align ---- */
        .ta-left {
            text-align: left;
        }

        .ta-center {
            text-align: center;
        }

        .ta-right {
            text-align: right;
        }

        .ta-justify {
            text-align: justify;
        }

        /* ---- line-height ---- */
        .lh-tight {
            line-height: 1.2;
        }

        .lh-normal {
            line-height: 1.6;
        }

        .lh-loose {
            line-height: 2.5;
        }

        /* ---- Shorthand ---- */
        .font-shorthand {
            font: italic bold 18px/1.8 'Georgia', serif;
        }
    </style>
</head>
<body>

    <h1>Font Properties</h1>

    <!-- ====== 1. font-family ====== -->
    <section>
        <h2>1. font-family</h2>
        <div class="grid-2">
            <div class="demo-box ff-arial"><strong>font-family:</strong> Arial, sans-serif</div>
            <div class="demo-box ff-times"><strong>font-family:</strong> 'Times New Roman', Times, serif</div>
            <div class="demo-box ff-courier"><strong>font-family:</strong> 'Courier New', monospace</div>
            <div class="demo-box ff-georgia"><strong>font-family:</strong> Georgia, 'Times New Roman', serif</div>
        </div>
        <div class="code-block">
            font-family: Arial, sans-serif;
            font-family: 'Times New Roman', Times, serif;
            font-family: 'Courier New', monospace;
            font-family: Georgia, 'Times New Roman', serif;
        </div>
    </section>

    <!-- ====== 2. font-size ====== -->
    <section>
        <h2>2. font-size</h2>
        <div class="grid-2">
            <div class="demo-box fs-px"><strong>font-size:</strong> 16px</div>
            <div class="demo-box fs-em"><strong>font-size:</strong> 1.5em (1.5 × parent)</div>
            <div class="demo-box fs-rem"><strong>font-size:</strong> 1.5rem (1.5 × root)</div>
            <div class="demo-box fs-vw"><strong>font-size:</strong> 2vw (2% of viewport width)</div>
            <div class="demo-box fs-small"><strong>font-size:</strong> small (keyword)</div>
            <div class="demo-box fs-large"><strong>font-size:</strong> large (keyword)</div>
        </div>
        <div class="code-block">
            font-size: 16px;
            font-size: 1.5em;
            font-size: 1.5rem;
            font-size: 2vw;
            font-size: small;
            font-size: large;
        </div>
    </section>

    <!-- ====== 3. font-weight ====== -->
    <section>
        <h2>3. font-weight</h2>
        <div class="grid-2">
            <div class="demo-box fw-thin">font-weight: 100 (Thin)</div>
            <div class="demo-box fw-light">font-weight: 300 (Light)</div>
            <div class="demo-box fw-normal">font-weight: 400 (Normal)</div>
            <div class="demo-box fw-bold">font-weight: 700 (Bold)</div>
            <div class="demo-box fw-black">font-weight: 900 (Black)</div>
        </div>
        <div class="code-block">
            font-weight: 100;  /* Thin */
            font-weight: 300;  /* Light */
            font-weight: 400;  /* Normal */
            font-weight: 700;  /* Bold */
            font-weight: 900;  /* Black */
        </div>
    </section>

    <!-- ====== 4. font-style ====== -->
    <section>
        <h2>4. font-style</h2>
        <div class="grid-2">
            <div class="demo-box fs-normal">font-style: normal</div>
            <div class="demo-box fs-italic">font-style: italic</div>
            <div class="demo-box fs-oblique">font-style: oblique</div>
        </div>
        <div class="code-block">
            font-style: normal;
            font-style: italic;
            font-style: oblique;
        </div>
    </section>

    <!-- ====== 5. font-variant ====== -->
    <section>
        <h2>5. font-variant</h2>
        <div class="demo-box fv-smallcaps">font-variant: small-caps</div>
        <div class="code-block">
            font-variant: small-caps;
        </div>
    </section>

    <!-- ====== 6. text-decoration ====== -->
    <section>
        <h2>6. text-decoration</h2>
        <div class="grid-2">
            <div class="demo-box td-underline">text-decoration: underline</div>
            <div class="demo-box td-overline">text-decoration: overline</div>
            <div class="demo-box td-line-through">text-decoration: line-through</div>
            <div class="demo-box td-combined">text-decoration: underline overline</div>
        </div>
        <div class="code-block">
            text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through;
            text-decoration: underline overline;
        </div>
    </section>

    <!-- ====== 7. text-transform ====== -->
    <section>
        <h2>7. text-transform</h2>
        <div class="grid-2">
            <div class="demo-box tt-uppercase">text-transform: uppercase</div>
            <div class="demo-box tt-lowercase">TEXT-TRANSFORM: lowercase</div>
            <div class="demo-box tt-capitalize">text-transform: capitalize</div>
        </div>
        <div class="code-block">
            text-transform: uppercase;  /* ALL CAPS */
            text-transform: lowercase;  /* all lowercase */
            text-transform: capitalize; /* First Letter Capitalized */
        </div>
    </section>

    <!-- ====== 8. letter-spacing & word-spacing ====== -->
    <section>
        <h2>8. letter-spacing & word-spacing</h2>
        <div class="grid-2">
            <div class="demo-box ls-wide">letter-spacing: 4px (wide)</div>
            <div class="demo-box ls-tight">letter-spacing: -1px (tight)</div>
            <div class="demo-box ws-wide">word-spacing: 8px (wide words)</div>
        </div>
        <div class="code-block">
            letter-spacing: 4px;
            letter-spacing: -1px;
            word-spacing: 8px;
        </div>
    </section>

    <!-- ====== 9. text-align ====== -->
    <section>
        <h2>9. text-align</h2>
        <div class="grid-2">
            <div class="demo-box ta-left">text-align: left</div>
            <div class="demo-box ta-center">text-align: center</div>
            <div class="demo-box ta-right">text-align: right</div>
            <div class="demo-box ta-justify" style="width: 300px;">
                text-align: justify — this text will be spread across the entire line width.
            </div>
        </div>
        <div class="code-block">
            text-align: left;
            text-align: center;
            text-align: right;
            text-align: justify;
        </div>
    </section>

    <!-- ====== 10. line-height ====== -->
    <section>
        <h2>10. line-height</h2>
        <div class="grid-2">
            <div class="demo-box lh-tight" style="width: 300px;">
                line-height: 1.2 (tight) <br>
                This is a second line.
            </div>
            <div class="demo-box lh-normal" style="width: 300px;">
                line-height: 1.6 (normal) <br>
                This is a second line.
            </div>
            <div class="demo-box lh-loose" style="width: 300px;">
                line-height: 2.5 (loose) <br>
                This is a second line.
            </div>
        </div>
        <div class="code-block">
            line-height: 1.2;
            line-height: 1.6;
            line-height: 2.5;
        </div>
    </section>

    <!-- ====== 11. Shorthand ====== -->
    <section>
        <h2>11. font Shorthand</h2>
        <div class="demo-box font-shorthand">
            font: italic bold 18px/1.8 'Georgia', serif;
        </div>
        <div class="code-block">
            /* Shorthand: style variant weight size/line-height family */
            font: italic small-caps bold 16px/1.6 Arial, sans-serif;
            font: italic bold 18px/1.8 'Georgia', serif;
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>12. Reference Tables</h2>

        <h3>Font Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>font-family</code></td>
                <td>Specifies the font family</td>
                <td><code>font-family: Arial, sans-serif;</code></td>
            </tr>
            <tr>
                <td><code>font-size</code></td>
                <td>Specifies the font size</td>
                <td><code>font-size: 16px;</code></td>
            </tr>
            <tr>
                <td><code>font-weight</code></td>
                <td>Specifies the boldness</td>
                <td><code>font-weight: bold;</code></td>
            </tr>
            <tr>
                <td><code>font-style</code></td>
                <td>Specifies the style</td>
                <td><code>font-style: italic;</code></td>
            </tr>
            <tr>
                <td><code>font-variant</code></td>
                <td>Specifies small-caps</td>
                <td><code>font-variant: small-caps;</code></td>
            </tr>
            <tr>
                <td><code>line-height</code></td>
                <td>Specifies the line height</td>
                <td><code>line-height: 1.6;</code></td>
            </tr>
            <tr>
                <td><code>letter-spacing</code></td>
                <td>Specifies space between characters</td>
                <td><code>letter-spacing: 2px;</code></td>
            </tr>
            <tr>
                <td><code>word-spacing</code></td>
                <td>Specifies space between words</td>
                <td><code>word-spacing: 4px;</code></td>
            </tr>
            <tr>
                <td><code>text-align</code></td>
                <td>Aligns text horizontally</td>
                <td><code>text-align: center;</code></td>
            </tr>
            <tr>
                <td><code>text-decoration</code></td>
                <td>Adds decoration</td>
                <td><code>text-decoration: underline;</code></td>
            </tr>
            <tr>
                <td><code>text-transform</code></td>
                <td>Transforms text case</td>
                <td><code>text-transform: uppercase;</code></td>
            </tr>
        </table>

        <h3>font-weight Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr><td><code>100</code></td><td>Thin / Hairline</td></tr>
            <tr><td><code>200</code></td><td>Extra Light (Ultra Light)</td></tr>
            <tr><td><code>300</code></td><td>Light</td></tr>
            <tr><td><code>400</code></td><td>Normal (default)</td></tr>
            <tr><td><code>500</code></td><td>Medium</td></tr>
            <tr><td><code>600</code></td><td>Semi Bold (Demi Bold)</td></tr>
            <tr><td><code>700</code></td><td>Bold</td></tr>
            <tr><td><code>800</code></td><td>Extra Bold (Ultra Bold)</td></tr>
            <tr><td><code>900</code></td><td>Black (Heavy)</td></tr>
            <tr><td><code>normal</code></td><td>Equivalent to 400</td></tr>
            <tr><td><code>bold</code></td><td>Equivalent to 700</td></tr>
        </table>

        <h3>Generic Font Families</h3>
        <table class="reference-table">
            <tr>
                <th>Generic Family</th>
                <th>Description</th>
                <th>Example Fonts</th>
            </tr>
            <tr><td><code>serif</code></td><td>Fonts with decorative strokes</td><td>Times New Roman, Georgia, Garamond</td></tr>
            <tr><td><code>sans-serif</code></td><td>Fonts without decorative strokes</td><td>Arial, Helvetica, Verdana, Open Sans</td></tr>
            <tr><td><code>monospace</code></td><td>Fonts with fixed character width</td><td>Courier New, Consolas, Monaco</td></tr>
            <tr><td><code>cursive</code></td><td>Fonts that resemble handwriting</td><td>Brush Script, Comic Sans</td></tr>
            <tr><td><code>fantasy</code></td><td>Decorative fonts</td><td>Impact, Papyrus</td></tr>
        </table>
    </section>

</body>
</html>

Quick Reference

Property	Description	Common Values
`font-family`	Font family	`Arial, sans-serif`
`font-size`	Font size	`16px`, `1rem`, `1.2em`
`font-weight`	Boldness	`normal`, `bold`, `100`–`900`
`font-style`	Style	`normal`, `italic`, `oblique`
`font-variant`	Variant	`normal`, `small-caps`
`line-height`	Line height	`1.6`, `24px`, `150%`
`letter-spacing`	Character spacing	`2px`, `-1px`
`word-spacing`	Word spacing	`4px`
`text-align`	Horizontal alignment	`left`, `center`, `right`, `justify`
`text-decoration`	Decoration	`none`, `underline`, `overline`, `line-through`
`text-transform`	Case transformation	`none`, `uppercase`, `lowercase`, `capitalize`

Best Practices

✅ Do This:

/* Use rem for font sizes (accessibility) */
html { font-size: 16px; }
h1 { font-size: 2rem; }  /* 32px */
p { font-size: 1rem; }   /* 16px */

/* Always provide fallback fonts */
font-family: 'Open Sans', Arial, sans-serif;

/* Use line-height for readability */
body { line-height: 1.6; }

/* Use relative units for responsive typography */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

❌ Don’t Do This:

/* Don't use px for font sizes (accessibility issue) */
font-size: 16px;  /* Prefer rem */

/* Don't forget fallback fonts */
font-family: 'CustomFont';  /* If font fails, browser default is used */

/* Don't set line-height to a fixed unit for body text */
body { line-height: 24px; }  /* Prefer unitless (1.6) */

Pro Tip: Use rem for font sizes to ensure accessibility (users can change the root font size in their browser settings). Use em for component-based sizing (e.g., within a card or button). Always provide fallback fonts and end with a generic family. Use line-height: 1.6 for optimal readability on the web!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!