CSS Responsive Text

CSS Responsive Text is an approach to styling text content that ensures optimal text display across various devices and screens. This technology is an essential part of responsive web design.

Main Units of Measurement

Relative Units

• em – a relative unit dependent on the font size of the parent element
• rem – a relative unit based on the root element's font size (root em)
• vw – a unit equal to 1% of the viewport width
• vh – a unit equal to 1% of the viewport height
• vmin – the smaller value between vw and vh
• vmax – the larger value between vw and vh

Absolute Units

• px – pixels
• pt – points
• pc – picas

Properties

• font-size — font size.
• line-height — line height.
• font-weight — font weight.
• text-align — text alignment.
• word-wrap and overflow-wrap — word wrapping control.

Responsive Techniques

Fluid Typography

Fluid Typography allows text to scale smoothly depending on the screen size:

.fluid-text {
    font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Media Queries

Media queries allow different styles for different screen sizes:

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
}

The calc() Function

The calc() function allows combining different measurement units:

.adaptive-heading {
    font-size: calc(16px + 2vw);
    line-height: calc(1.1em + 0.5vw);
}

Modern CSS Functions

clamp()

The clamp() function sets minimum, preferred, and maximum values:

.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

min() and max()

The min() and max() functions help set dynamic constraints:

.paragraph {
    width: min(65ch, 100%);
    font-size: max(1rem, 2vw);
}

Usage Examples

Responsive Heading

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: calc(1rem + 2vw);
}

Readable Paragraph

p {
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    max-width: 65ch;
    margin: 0 auto;
}

Result of applying readable text:

Test code at separate page

Practical Tips

• Use relative units instead of absolute ones
• Combine various techniques for optimal results
• Test layouts on different devices
• Consider text readability
• Define minimum and maximum values to prevent extreme sizes

Browser Support

Function	Chrome	Firefox	Safari	Edge
clamp()	79+	75+	13.1+	79+
calc()	19+	4+	6+	12+
vw/vh	20+	19+	6+	12+