Stuff & Nonsense product and website design

Blog and all that malarkey

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 tagged this with design, development


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


I’m available to work on new design projects.