Going to be controversial here, but typography might be one of your website’s most meaningful aspects. Full stop.
One part of implementing good web typography is setting bomb line length or measure. When your measure is too long, you can physically wear out your reader and confuse. Eew, let’s treat our users better.
This episode will show you lousy line length, sus line length, & what good line length looks should be. We will also show you how to set a good line length with Beaver Builder, Elementor, and CSS.
Bad Line Length
Not to knock the site owners, but we found a blog that does line length poorly. Speckyboy is a fantastic blog that talks a lot about doing web design right, but they need to adjust their site to better users read their content. We go into why the line length is terrible and what it will do to you.
TLDW: It makes you confused.
Sus Line length
We look at Stripe’s blog and show how you can walk the fine line between measure that is too long but still serve up acceptable reading content.
TLDW: It’s ok, but it could be better.
Good Line Length
The always beautiful League Of Moveable Type is an excellent example of the right line length in action. We talk a bit about why it works and justify the use of WHITESPACE!
Implementing good line length
Now that we touted our mind-bogglingly exceptional knowledge of line length – we put our skills to the test. We use Beaver Builder and Elementor (and CSS) to set type and show how to test your measure, set your elements to accommodate your content, and serve up bomb measure. You will learn a lot here!
Ok, let’s GoGoGo!
Tools + Articles we used in this episode:
- Measure, Chrome Extension
- Typography Inspector, Chrome Extension
- Beaver Builder
- Letter Count (Online Tool)
- League Of Moveable Type
- Readability: The Optimal Line Length
- Better Web Type
- The Elements Of Typographic Style
Music Bumpin’ In The Background:
LoFi House Mix | 2 Years of Stoner House by Katarakt