---
title: 'Responsive Text, Daft Punk Style | De Voorhoede'
description: |-
  How do you want your text to behave responsively?
  Wrap it, Cut it, Scroll it, Calc it, Stretch it!
language: English
url: 'http://localhost:3000/en/blog/responsive-text-daft-punk-style/'
---

Blog

# Responsive Text, Daft Punk Style

Door [Sanne](/en/team/sanne.md)

14 February 2019

* [Wrap it](#wrap-it)
* [Cut it](#cut-it)
* [Scroll it](#scroll-it)
* [Calc it](#calc-it)

Dit bericht is behoorlijk oud en bevat mogelijk achterhaalde adviezen of links. We houden het online, maar raden aan om naar nieuwere blogs te kijken of er een betere aanpak is.

[Alle blogposts](/en/blog.md)

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

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](https://www.youtube.com/watch?v=D8K90hX4PrE):

![Daft Punk Technologic subtitled Wrap it, Cut it, Scroll it, Calc it, Stretch it.](https://www.datocms-assets.com/2850/1506149533-responsive-text-daft-punk-style.jpg)

## 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](https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Browser_compatibility).
* 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](https://www.smashingmagazine.com/2016/05/fluid-typography/).

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](https://github.com/rikschennink/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](https://www.voorhoede.nl/en/blog/addressing-the-fout-reflow-issue/).

[← Alle blogposts](/en/blog.md)

## Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?

[Join our team](/en/jobs.md)

[Terug naar boven](#top)