Stuff & Nonsense product and website design

About those long line lengths

Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.


About those long line lengths on really wide screens. Several people pointed out that line lengths on some of the pages can get pretty long. It’s true. This time around, instead of assigning a width to the content container, I used left and right margins. Although I reset these margins at certain breakpoints I don’t limit the content width in any way.

There’s two reasons for this.

One. Just like I can never predict the width of someone’s browser window, I can also not predict what font size they’re seeing. I’ll give you an example:

My eyesight’s been changing over the last year and I like to read things on my 27" iMac big. I mean really big. So I make my browser window wide and zoom up the text so big that I can read comfortably without my glasses.

Tyler Galpin yelled (between Bud Lights) on Twitter 1:

Yay for completely unreadable line lengths on a screen larger than a laptop. Constraints, dude.

The thing is, I don’t want to put constraints on line-length. That’s not a designers’ job. It’s a user’s job. If anyone wants to change the measure in a flexible layout, they can do it easily by changing the browser window width on their Mac or PC.

By me not limiting line-length, a user can let big text fill their screen and see more of it at a time. A constrained, narrow width would force them to scroll and I don’t want that. If you think my logic’s flawed, or you can think of a better solution, I’m all ears.

Wez Maynard asked on Twitter:

Any reason you're not playing with font sizing? Be nice to hear a reason not to.

Yeah. While I was working on the new design, I used viewport sized typography. That’s another reason why I don’t want to constrain the content by imposing a max-width.

Vw-based font-sizing works a treat in browsers that support it. But, with everything else I needed to do for the launch date, I ran out of time for testing, so I switched back to rems.

But. Yes, but.

I will be installing percentage-based font-sizing on some templates in the coming weeks and when I do, I’ll write up what I’ve done and maybe you’ll help me test it out.

  1. Not embedded, because, you know.

Written by Andy Clarke who filed this in design , development .


Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. Sign up today and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up.

    Hire me. I’m available for coaching and to work on design projects.