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:
Wrap it
By default the browser wraps texts on overflow.
How do you want your text to behave responsively?
Wrap it!
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
hyphensproperty to specify that a word should be hyphenated. Setting this property toautotells 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!
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!
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!
calc() to create fluid typographyRead more about Fluid Typography on Smashing Magazine.
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!
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.
