De Voorhoede

front-end developers

Wrap it, Cut it, Scroll it, Calc it, Stretch it

Responsive Text, Daft Punk Style

Since viewports vary in size indefinitely, the length of a line can quickly become too long (or too short). Here's a couple of possibilities to handle this, Daft Punk Style:

Daft Punk Technologic subtitled Wrap it, Cut it, Scroll it, Calc it, Stretch it.

Wrap it

By default the browser wraps texts on overflow.

How do you want your text to behave responsively?

Wrap it!

By default text wraps on overflow

You can prevent long strings of text from overflowing its content box:

  • use the overflow-wrap: break-word; rule in CSS to tell the browser to insert a line break.
  • use the hyphens property to specify that a word should be hyphenated. Setting this property to auto tells the browser to insert hyphens at an appropriate point, if the browser supports it.
  • use a hard (-) or soft (­) hyphen to manually specify line break points. The 'hard' hyphen will always be rendered, even if the line is not actually broken at that point. A 'soft' hyphen is not displayed unless a break is inserted, in which case a dash will appear.

Cut it

If it's okay for text to be partially hidden, you can set the overflow: hidden; rule. Modern browsers support truncating text using an ellipsis, for a more elegant way of cutting of text. Besides hiding overflow, you need to prevent wrapping on white spaces and set text-overflow: ellipsis; on the element to truncate.

How do you want your text to behave responsively?

Cut it!

Truncate text using ellipsis

Scroll it

When you want text to always be on one line and fully readable, you can set the overflow-x: scroll; and white-space: nowrap; rule. Add a subtle shadow effect to let users know there's more content.

How do you want your text to behave responsively?

Scroll it!

Scroll text on single line

Calc it

A font-size declared with viewport units will scale depending on the browser's viewport dimensions. By combining viewport units with calc() we can create fluid typography that scales well between specific values, within a specific viewport range.

:root {
  --font-range: 24 - 16;
  --min-font: 1.2em;
  --min-viewport: 400px;
  --viewport-range: 800 - 400;

h2 { 
  font-size: calc( 
   var(--min-font) + var(--font-range) 
    * (100vw - var(--min-viewport)) 
   / var(--viewport-range) ); 

By setting a minimum and maximum font size and the viewport range over which the font should scale, we don't end up with too small or ridiculously large font sizes.

How do you want your text to behave responsively?

Calc it!

Using calc() to create fluid typography

Read more about Fluid Typography on Smashing Magazine.

Stretch it

Unfortunately, browsers have no built-in method to stretch text to fit its parent element. So we need a bit of script to make this work. Fitty is a nice little script that does exactly this:

How do you want your text to behave responsively?

Stretch it!

Fitty stretches text to fit its parent

Following the idea that content is key, typography is one of the most important parts of any website's design. So make sure you take some time to think through and discuss how your text should behave responsively.

If you're playing around with typography on the web, you may also be interested in addressing the Flash of Unstyled Text (FOUT) reflow issue.