Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Readable, Fluid Type With Basic CSS Smarts

on Wednesday 23rd of April 2014
.flexible-layout { media-query: none; units: em; devices: all; awesomeness: 100%; }|
Today, designer Val Head builds a demo to show us how to create great looking typography for all screen sizes and resolutions without a dev’s expert assistance and without a lot of complex code.

Keeping your type at comfortably readable line lengths can be quite a challenge with responsive design. When viewports can be nearly any size under the sun, it can feel like we’re going to need a whole lot of media queries and coaxing to keep our type in check. We want our type to be stretchy, but not too stretchy, and we want it to look good across the board.

Centered, single text-column layouts are quite popular these days and are exactly the sorts of layouts that suit simple techniques to keep your type flowing flexibly and within a safe range. That’s right. I said it. Beautiful, fluid type with less work! Let me show you how.

Fluid single column layout

My media-query-free, completely fluid, single-column demo built using Typecast

First off, pick your type

For our example I choose Merriweather, a serif face with a nice tall x-height, from Google Fonts and Open Sans for the main headings. To start out, the type-related rules for my document’s body look like this:


body {
  font-size:100%; 
  line-height:1.5;
  font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
}

(In fact, here’s all of the CSS for the demo). We’re sticking with the default browser font size as a base and using a generous line height to accommodate Merriweather’s large x-height without making our lines feel crowded.

Let’s talk ems

Ems are a relative unit we often use for sizing type on the web. On most browsers, 1em is approximately 16 pixels by default (if we or the user doesn’t do anything to change it).  Sizing type in ems can take little getting used to, being that they are relative to the font size of parent elements. The advantage, though, is that when the parent’s font size changes, the font sizes of your other text elements automatically do as well, so your typographic contrast stays intact. In our example, I’ve sized the headings like so:


h1 {
  font-size: 2.747em;
}
h2 {
  font-size: 0.874em;
}
h3 {
  font-size:1.229em;
}

The relative nature of ems can also help us keep our line lengths readable. If you use ems to measure both column width and text size, your columns will grow wider relative to your text size. For example, a line of text sized in ems set in a column 32ems wide, will always break in the same place whether your global font-size is 100% or 200% (as long as the viewport can accommodate it).

For help converting px to ems, grab a calculator and try this formula:

1 ÷ parent pixel font-size × desired pixel value = em value

Or use this conversion table by Jon Tan.

The magic of max-width

The max-width property limits how far an element will stretch outwards in a browser window. It’s supported by all major browsers (bar IE6 and earlier) and is your best buddy in fluid design. It allows an element to scale down as screen sizes decrease, but at the same time lets you control when bigger is just too big. An element will widen to the limit you set, and when the browser widens beyond that point, the margins to the left and right will expand to fill the space around it.

It’s a very nice balance of flexibility and control with essentially just one CSS rule.

Find your max-width for comfortable reading length

This is where we get to some fuzzy math. Or really, more like rules of thumb since we’re dealing with ranges of numbers and not hard, fast rules.

According to Robert Bringhurst in The Elements of Typographic Style, an ideal line length for reading is between 45 and 75 characters. This rule was created well before screens or the web were around, but this range still holds true for our screen-based type.

So how many ems wide do we need our design to be to hold 45–75 characters of type? There’s not an exact formula to go by, but generally 30–35ems wide will give you a comfortable range of characters per line for any given font.

Chris Coyier Bookmarklet

Using Chris Coyier’s 45-75 bookmarklet helps me quickly see what max-width gives me a readable line length.

I used a little trial and error and Chris Coyier’s handy 45-75 bookmarklet to settle on a max-width of 32ems. The bookmarklet is great because it saves you counting characters by hand. It colors the 45th to 75th characters in a line, making the optimal reading range easy to spot.

By setting this as our max width, we know that our line length will never get too long, no matter how wide the screen it’s being viewed on is. Our margins will fill the extra space around our text column and our line lengths will stop at the maximum comfortable reading length we’ve set here.

What’s more, because we’ve set our width in ems, our text won’t reflow drastically as we zoom in and out like we often see with widths set in pixels. That’s a nice added benefit!

Make room for padding

Left and right padding of 1em will keep a cushion between our text and the edges of the screen at smaller sizes. So I’ve increased our max-width to 34ems to account for the space the padding takes up and still give the text 32ems of horizontal space to use. You can see the example in action here.

The rules for our main text container now look like this:

 

section {
  max-width:34em;
  margin:auto;
  padding:0 1em;
}

By working in ems, we’ve created a typographic layout that will stay comfortably readable from very small screen widths to screens nearly infinitely large—all without media queries!

95% of the way there

In our example I’ve deliberately kept headlines close to the size of body text in order to keep things looking neat even as we approach the narrower viewport sizes. Even so, things start to look a little less great as we dip below 400px in width.

Our line lengths get a bit shorter than ideal reading length, and our heading starts breaking into multiple lines. In this particular example it’s probably something we can live with, but it could be a real problem in other cases.

Narrower Viewport

On small screens of 400px or less, our scale starts to break down. Our heading’s wrapping badly and our line-lengths aren’t great. But a solitary media query will sort that out.

The exact point at which this might happen will depend on the typeface you’re using, your chosen font-size, and your content. If you’re a fan of very large body text sizes like me (Does that default 16px-ish font-size look a bit small to you too?), you’ll start noticing your line lengths feeling too short sooner. Also, if your titles have longer words, or are set at very large sizes, you may find they cause horizontal scrolling at smaller viewport sizes when single words won’t break into multiple lines.

These situations can be remedied in a couple of ways. We could:

  • lower the overall font-size;
  • change the typeface used; or even
  • edit the title content to use shorter words.

However, if those won’t cut it, adding a media query just for the smallest screen sizes will do the trick. For example, I might add a media query like the one below to globally size down my type for the smallest of screen sizes:

 
@media screen and (max-width: 25em) {
  body { font-size: 90%;}
}
 

I arrived at the max-width of 25ems by dividing 400 pixels (the viewport width) by the general default 16 pixel width.  A little trial and error, plus using the 45-75 bookmarklet once again, showed that a 90% text size got my line lengths back to a more comfortable reading length. At these smallest screen sizes, it’s also a matter of balancing your desired line length with a font-size that is still large enough to read comfortably too. Just one more reason why good typography is more of an art than a science!

It’s often these smallest screen sizes where more hands-on tweaks may become necessary. But even in these cases, sizing your main text column in ems to start with will get you 95% of the way there to beautifully flexible type.

Get a bit fancier with CSS columns

Fluid Columns

This approach works really well on simple layouts with just one main column of text, like blogs, personal sites, or perhaps even web versions of books. But if you’d like to go further than the simple, single-column layout, you can pair these techniques with CSS3’s multiple column layout rules to create a fluid, multi-column design without media queries.

The trick is to set only the width and gap for your columns and not a total number of columns. This way, the browser will fit as many columns of the given width as it can within the available space. Your max-width setting lets you limit that available space and control how many fit.

In the second variation of our example, I’ve created an inner container with the class of “cols” around our chapter body text and given it the following rules :

 
.cols { 
  column-width: 25em;
  column-gap: 5em;
}
 

(I’ve removed the vendor prefixes for easier reading, but both of these column properties still require prefixes at this time. If you build your design in Typecast, the app adds the prefixes for you.)

Creating a multi-column layout in Typecast. Click to see full size demo

In Typecast you can set your CSS columns with a few clicks, and the app will take care of the code for you

To show off the effect, I changed our main section’s max-width to 87.5em (1400px). On a large monitor, you can get up to three columns in that space. As the viewport narrows, the number of columns decrease down to two or one and the text reflows. Drag your browser window to see for yourself.

Granted, a multi-column layout doesn’t give the best reading experience on really long text like I’ve used in this demo. But it could be perfect for shorter passages of text, like an article lead-in, a short summary, or multi-column lists.

Love for ems

This is just one approach to handling typography for flexible and responsive layouts, but it’s one that can really come in handy. And if you’re uneasy about working with CSS, don’t worry. You can do all of this using visual controls in Typecast and let the app write the code.

If you’ve never used ems for measuring widths before, give it a try. You might just like the results! And you’ll probably also save yourself from media query fatigue. That leaves you with more time to shop for typefaces!

A big thanks to our guest author Val Head for today’s post. You can find more from Val on her blog and Twitter. Guest authors are paid for their contribution, and all opinions are their own.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus