CSS Text & Typography - Complete Guide

CSS Text & Typography

Complete Guide to Font Properties, Text Styling, Web Fonts, and CSS Units

Introduction to CSS Typography

Typography is one of the most critical aspects of web design. CSS provides extensive control over text appearance, allowing developers to create beautiful, readable, and engaging content. This guide covers everything from basic font properties to advanced text styling and modern web font implementation.

CSS Typography and Text Styling - Complete Web Design Guide

Typography transforms ordinary text into engaging, readable content that enhances user experience

Font Properties

Font properties control the appearance of text characters. They define the font family, size, weight, style, and variant.

1. font-family

Font Family Examples

Poppins (Sans-serif)

Modern, geometric sans-serif font

Lora (Serif)

Elegant, well-balanced serif font

Courier (Monospace)

Fixed-width font for code

font-size

Sets the size of the font. Can use various units (px, em, rem, %, etc.).

font-size: 16px;
font-size: 1.5rem;
font-size: 150%;

font-weight

Sets the thickness of the font (normal, bold, or numeric values 100-900).

font-weight: normal;
font-weight: bold;
font-weight: 600;

Weight 100 (Thin)

Weight 400 (Normal)

Weight 700 (Bold)

Weight 900 (Black)

font-style

Sets the style of the font (normal, italic, or oblique).

font-style: normal;
font-style: italic;
font-style: oblique;

Normal Style

Italic Style

Oblique Style

font-variant

Controls the usage of small caps (normal or small-caps).

font-variant: normal;
font-variant: small-caps;

Normal Variant (ABCD)

Small Caps Variant (ABCD)

Complete Font Property Example
/* Individual font properties */
.heading {
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
}

/* Shorthand font property */
.paragraph {
    font: italic small-caps 500 1.1rem/1.6 'Roboto', sans-serif;
    /* style variant weight size/line-height family */
}

.body-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

Text Properties

Text properties control the alignment, decoration, transformation, spacing, and other visual aspects of text content.

Color and Alignment

color

Sets the color of text using color names, HEX, RGB, or HSL values.

color: #2c3e50;
color: rgb(44, 62, 80);
color: hsl(210, 29%, 24%);

Red Text

Green Text

Blue Text

text-align

Aligns text horizontally (left, right, center, justify).

text-align: left;
text-align: center;
text-align: right;
text-align: justify;

Left Aligned

Center Aligned

Right Aligned

text-decoration

Adds decoration to text (underline, overline, line-through).

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;

Underlined Text

Overlined Text

Line Through Text

Text Transformation and Effects

text-transform

Controls text capitalization (uppercase, lowercase, capitalize).

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

uppercase text

LOWERCASE TEXT

capitalize each word

text-shadow

Adds shadow effects to text (horizontal vertical blur color).

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: 0 0 10px #3498db;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #000;

Shadow Effect

Glow Effect

3D Effect

Text Spacing and Line Control

line-height

Sets the height of text lines (normal, number, length, or %).

line-height: 1.5;
line-height: 150%;
line-height: 24px;

Line height 1 (tight)
Second line example

Line height 1.8 (comfortable)
Second line example

letter-spacing

Controls spacing between characters (tracking).

letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: -1px;

Normal Spacing

Wide Spacing

Tight Spacing

word-spacing

Controls spacing between words.

word-spacing: normal;
word-spacing: 10px;
word-spacing: -2px;

Normal word spacing example

Wide word spacing example

Tight word spacing example

Complete Text Properties Example
/* Text styling example */
.heading {
    color: #2c3e50;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    letter-spacing: 1px;
}

.paragraph {
    color: #34495e;
    text-align: justify;
    line-height: 1.8;
    word-spacing: 1px;
}

.link {
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
}

.link:hover {
    text-decoration: underline;
    text-decoration-color: #2980b9;
}

.code {
    font-family: 'Courier New', monospace;
    color: #e74c3c;
    font-weight: bold;
    letter-spacing: 0.5px;
}

Web Fonts & Google Fonts

Web fonts allow you to use custom fonts on your website that aren't installed on users' computers. Google Fonts is a popular, free service that provides hundreds of web fonts.

Google Fonts Implementation

Poppins Bold

Modern geometric sans-serif

Lora Medium

Elegant well-balanced serif

Montserrat Bold

Modern geometric typeface

How to Use Google Fonts
<!-- Step 1: Add link in HTML head -->
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>

<!-- Step 2: Use in CSS -->
<style>
    body {
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
    }
    
    h1, h2, h3 {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
    }
    
    .special-text {
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        font-style: italic;
    }
</style>

Text Overflow & White Space

These properties control how text behaves when it exceeds its container boundaries and how whitespace is handled.

text-overflow

Controls how overflowed content is signaled (clip, ellipsis).

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";

This is a very long text that will be clipped

This is a very long text that will show ellipsis

white-space

Controls how whitespace inside an element is handled.

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;

This text won't wrap to new line

This text has extra spaces

word-wrap / overflow-wrap

Allows long words to break and wrap onto next line.

word-wrap: break-word;
overflow-wrap: break-word;
overflow-wrap: anywhere;

Supercalifragilisticexpialidocious

CSS Units

CSS provides various units for measuring length, size, and distance. Understanding these units is crucial for responsive design and proper sizing.

Absolute Units

Absolute units are fixed and aren't affected by other elements. They're useful for print styles but less flexible for responsive web design.

Pixels (px)

Most common absolute unit
1px = 1/96th of 1 inch
Fixed size on all devices
Example: font-size: 16px;

Points (pt)

Primarily used for print
1pt = 1/72 of 1 inch
Common in word processors
Example: font-size: 12pt;

Centimeters (cm)

Absolute physical unit
Useful for print media
1cm = 37.8px approximately
Example: margin: 2cm;

Relative Units

Relative units are based on other elements' sizes, making them ideal for responsive design.

Percentage (%)

Relative to parent element
Example: width: 50%; = 50% of parent width
Common for layouts and containers

Em (em)

Relative to element's font-size
1em = current font-size
Compounds in nested elements
Example: padding: 1.5em;

Rem (rem)

Relative to root element font-size
1rem = root (html) font-size
Doesn't compound like em
Example: font-size: 1.25rem;

Viewport Width (vw)

1vw = 1% of viewport width
Great for responsive typography
Example: font-size: 5vw; scales with viewport

Viewport Height (vh)

1vh = 1% of viewport height
Useful for full-height elements
Example: height: 100vh; = full viewport height

Unit Type	Best For	Responsive	Example Use Case
px	Fixed sizes, borders	No	Border widths, small fixed elements
%	Layouts, containers	Yes	Widths, heights relative to parent
rem	Font sizes, spacing	Yes	Consistent sizing across site
em	Component-level styles	Yes	Buttons, cards, nested components
vw/vh	Full-screen elements	Yes	Hero sections, full-page layouts

CSS Units in Practice
/* Setting root font-size for rem calculations */
html {
    font-size: 16px; /* 1rem = 16px */
}

/* Using various units */
.container {
    width: 90%; /* Percentage of parent */
    max-width: 1200px; /* Fixed maximum */
    margin: 0 auto;
}

.heading {
    font-size: 2.5rem; /* 40px (2.5 * 16px) */
    margin-bottom: 1.5em; /* Relative to font-size */
}

.paragraph {
    font-size: 1rem; /* 16px */
    line-height: 1.6; /* Unitless - multiplies font-size */
    max-width: 65ch; /* Character units */
}

.hero-section {
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
}

.responsive-text {
    font-size: clamp(1rem, 2vw, 1.5rem);
    /* Minimum 1rem, scales with viewport, maximum 1.5rem */
}

.button {
    padding: 0.75em 1.5em; /* Relative to button's font-size */
    font-size: 1.125rem; /* 18px */
}

CSS Typography Practice Compiler

Practice CSS text and typography properties in the live editor below. Try different font properties, text styling, and units to see immediate results in the preview.

<!DOCTYPE html>
<html>
<head>
    <title>Typography Practice</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&family=Lora:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        /* Base styles with CSS Units */
        html {
            font-size: 16px; /* Base for rem units */
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.7;
            color: #333;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        /* Font Properties Examples */
        .font-demo {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            color: #2c3e50;
            text-align: center;
            margin-bottom: 1.5rem;
            letter-spacing: -0.5px;
        }
        
        h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 600;
            color: #34495e;
            margin: 1.5rem 0 1rem;
            border-left: 4px solid #3498db;
            padding-left: 1rem;
        }
        
        .serif-example {
            font-family: 'Lora', serif;
            font-size: 1.25rem;
            font-style: italic;
            color: #2c3e50;
            line-height: 1.8;
        }
        
        /* Text Properties Examples */
        .text-transform-demo {
            background: #f8f9ff;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1.5rem 0;
        }
        
        .uppercase {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            color: #e74c3c;
        }
        
        .capitalize {
            text-transform: capitalize;
            color: #27ae60;
        }
        
        /* Text Shadow and Decoration */
        .shadow-box {
            background: #2c3e50;
            color: white;
            padding: 2rem;
            border-radius: 8px;
            margin: 1.5rem 0;
            text-align: center;
        }
        
        .glow-text {
            text-shadow: 0 0 10px #3498db, 0 0 20px #3498db;
            font-size: 2rem;
            font-weight: 700;
        }
        
        .underline-demo {
            text-decoration: underline;
            text-decoration-color: #e74c3c;
            text-decoration-thickness: 3px;
            text-underline-offset: 5px;
        }
        
        /* Spacing Examples */
        .spacing-demo {
            background: #f0f8ff;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1.5rem 0;
        }
        
        .tight-spacing {
            letter-spacing: -0.5px;
            line-height: 1.4;
        }
        
        .wide-spacing {
            letter-spacing: 3px;
            word-spacing: 10px;
            line-height: 2;
        }
        
        /* Units Demonstration */
        .units-demo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }
        
        .unit-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            border-top: 4px solid #3498db;
        }
        
        .px-unit {
            font-size: 16px; /* Absolute */
            padding: 10px;
        }
        
        .rem-unit {
            font-size: 1rem; /* Relative to root */
            padding: 1rem;
        }
        
        .percent-unit {
            width: 100%; /* Relative to parent */
            padding: 5%;
        }
        
        /* Text Overflow Example */
        .overflow-box {
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 6px;
            margin: 1.5rem 0;
        }
        
        .ellipsis {
            text-overflow: ellipsis;
        }
        
        /* Responsive Typography */
        .responsive-text {
            font-size: clamp(1rem, 2vw, 1.5rem);
            /* Scales between 1rem and 1.5rem based on viewport */
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>CSS Typography Mastery</h1>
    
    <div class="font-demo">
        <h2>Font Properties</h2>
        <p class="serif-example">
            This paragraph demonstrates the Lora serif font with italic style. Notice the elegant serifs and balanced proportions that make it perfect for body text.
        </p>
        
        <div style="display: flex; gap: 2rem; margin-top: 1.5rem;">
            <div style="flex: 1;">
                <h3 style="font-weight: 300; color: #7f8c8d;">Light Weight (300)</h3>
                <p>Thin and elegant for headings</p>
            </div>
            <div style="flex: 1;">
                <h3 style="font-weight: 400; color: #7f8c8d;">Regular Weight (400)</h3>
                <p>Standard weight for body text</p>
            </div>
            <div style="flex: 1;">
                <h3 style="font-weight: 700; color: #7f8c8d;">Bold Weight (700)</h3>
                <p>Strong emphasis for important text</p>
            </div>
        </div>
    </div>
    
    <div class="text-transform-demo">
        <h2>Text Transformation</h2>
        <p class="uppercase">This text is transformed to uppercase with increased letter spacing.</p>
        <p class="capitalize">this sentence will have each word capitalized automatically.</p>
        <p style="text-transform: lowercase;">THIS SENTENCE WILL BE IN LOWERCASE.</p>
    </div>
    
    <div class="shadow-box">
        <h2>Text Effects</h2>
        <p class="glow-text">GLOWING TEXT EFFECT</p>
        <p style="font-size: 1.5rem; margin-top: 1rem; color: #ecf0f1;">
            This box has a dark background with <span class="underline-demo">underlined text</span> and
            <span style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">shadow effects</span>.
        </p>
    </div>
    
    <div class="spacing-demo">
        <h2>Text Spacing Control</h2>
        <p class="tight-spacing">
            This paragraph has tight letter spacing and line height. It's useful for compact layouts where space is limited.
        </p>
        <p class="wide-spacing">
            This paragraph has wide letter and word spacing with increased line height. It creates an open, airy feel perfect for luxury brands or minimalist designs.
        </p>
    </div>
    
    <div>
        <h2>CSS Units Demonstration</h2>
        <div class="units-demo">
            <div class="unit-card">
                <h3>Pixels (px)</h3>
                <p class="px-unit">Fixed size: 16px font, 10px padding</p>
                <p style="font-size: 0.9rem; color: #7f8c8d;">Absolute unit, not responsive</p>
            </div>
            
            <div class="unit-card">
                <h3>Root Ems (rem)</h3>
                <p class="rem-unit">Relative to root: 1rem font, 1rem padding</p>
                <p style="font-size: 0.9rem; color: #7f8c8d;">Scales with root font-size</p>
            </div>
            
            <div class="unit-card">
                <h3>Percentage (%)</h3>
                <div class="percent-unit" style="background: #f0f8ff; border-radius: 6px;">
                    <p>Width: 100%, Padding: 5%</p>
                    <p style="font-size: 0.9rem; color: #7f8c8d;">Relative to parent container</p>
                </div>
            </div>
        </div>
    </div>
    
    <div>
        <h2>Text Overflow & White Space</h2>
        <div class="overflow-box">
            <p class="ellipsis">This is a very long text that will be truncated with an ellipsis when it exceeds the container width.</p>
        </div>
        <p style="white-space: pre; background: #f8f9fa; padding: 1rem; border-radius: 6px; margin-top: 1rem;">
This text preserves   all   whitespace
including    multiple   spaces
and line breaks exactly as written.
        </p>
    </div>
    
    <div style="margin-top: 3rem; padding: 2rem; background: #e8f4fc; border-radius: 12px;">
        <h2>Responsive Typography</h2>
        <p class="responsive-text">
            This text uses responsive units (clamp function) to scale between 1rem and 1.5rem based on viewport width. Resize your browser to see it in action!
        </p>
        <p style="text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: #7f8c8d;">
            Try editing the CSS in the editor to see live changes to all typography properties!
        </p>
    </div>
</body>
</html>