For the first time in years, I’m working on changing the look of this here blog. I’ve been bored with it in recent years, then Blaine Cook’s Beautiful Lines pushed me over the edge. As of today, if you’re reading this at rather than in one feed reader or another, the text is justified on both sides and hyphenated as necessary. There are side-effects, and I’m not sure I’m 100% happy with the results. I am sure there’s lots more work to do.

What Blaine Said · His piece makes three arguments:

  • Now we have wide variety in the pixel density on the screens we use, extra work is required to come up with density-independent designs.

  • Right-justified text should be used because “Ragged right is an abomination”.

  • Hyphenation, which has long been used in conjunction with right justification, is now easily achievable with good-quality results.

Let’s take up Blaine’s points in reverse order.

Hyphenation · In this case I agree 100%. Hyphenator.js is trivial to install and seems to Just Work; as I consider its results, I have seen very little so far that offends my eye. Also, the architecture is pleasing; it makes perfect sense to run this sort of publishing busywork on the Web’s billions of underworked client systems, rather than on its millions of often-overworked servers.

But there are a few little issues. The software works by peppering the text with soft-hyphen characters in all the places where you might want to break words, and then leaves the work of doing the hyphenation to the browser.

This character is Unicode U+00AD SOFT HYPHEN. Hyphenator.js wants to use the HTML escape ­, which caused problems with my XML-based publishing system that doesn’t know HTML escapes. I was going to use ­ but then realized that JavaScript literals are supposed to be UTF-8, so I put the literal character right there in the JavaScript source and that works fine.

Next, you have to consider the effect of having all those invisible soft-hyphens littering your deathless prose. Hyphenate.js does some magic that means when you copy text out of the browser, the soft-hyphens don’t come with it.

Also, consider the effect on in-browser search. Type Command-F or Control-F and search for “architecture”. Firefox or Chrome can find it, but Safari can’t. I suspect that this one should be easy to crush once it comes to Apple’s attention.

Of course, the only reason to hyphenate is to make justification work better. In the publishing-tech community where I spent years of my professional life, we used to just say “H&J”.

Justification · Nothing to it; insert text-align: justify; appropriately in your CSS and there you go. I do notice some subtle but obvious-to-the-eye differences in the justification algorithm from one browser to another. The ragged-right “abomination” is history.

But I’m wondering whether it really was that bad. I’m aware that there’s research out there studying the effect of various techniques including kerning and leading and H&J. But I couldn’t find it just now.

Personally, I like justification more and more as the columns get narrower and narrower; in book-length lines, I find ragged right to be sort of appealing. On the other hand, in actual real books designed by actual real professional book designers, justification is pretty universal.

I seem also to remember that narrow columns, in the style of newspapers, were found more readable. But then why are book-length texts not formatted that way? I’m sure that somewhere on the Web there’s a high-quality professional introduction to these issues. On balance, I like the way that ongoing looks all squared-up. But that may not last.

On Lines · Which leads to Blaine’s first point, about density-independence and line lengths. He posted nice clever code that does calculations with the goal of arranging that each line has more or less the same number of characters; then you get to have an amusing argument what the right number is.

This code doesn’t just drop in; it needs to hook into your page layout at just the right places. So it took a bit of quality Firebug time to get it running.

Then I took it out again. The layout here at ongoing is “liquid”, meaning it grows or shrinks, within reason, should the browser be resized. I found the effect overly twitchy and, the more I thought about it, the more I didn’t believe that number-of-characters-per-line is the right invariant.

When we routinely use displays whose dots-per-inch vary from under 100 to over 300, it seems reasonable to worry about resolution-independence in your type design.

But maybe not. I think I smell an abstraction leaking. When I say font-size: 0.95em;, I’m thinking that it’d be better if I left it to the browser to figure out how many pixels make up the best “em”, bearing in mind the physics of the display.

Having said all that, I widened the center-content area on the blog here, and increased the size to that 0.95em quoted above. The effect, I think, is more book than newspaper, which feels right to me.

Still To Do · I set up the basic CSS layout of this page between 2003 and 2006, stealing mostly from Eric Meyer. It was bleeding-edge then but is kinda mouldy and old-fashioned now, and doesn’t handle really wide browser windows nearly as well as I’d like. So I’ll have to fix that.

And then there’s fun part: fonts! I’ve been offering readers the choice of Georgia and Verdana for a long time. Those were probably sensible options back in 2003. But that was then, this is now. I’ve been following the Typekit blog and glancing at Google Web Fonts and licking my lips a bit.

Also, I’m increasingly loathing Georgia’s italics.

It looks like it’ll be straightforward to shift the fonts in this space. That’s after I’ve picked new typefaces; a prospect that, frankly, intimidates me. I’m not even sure how to start thinking about it, but I’m pretty sure that I’ll have fun once I do.

By the way, I shifted this in over a day ago and mostly nobody noticed. Which is a good thing. Oh, and thanks to Blaine!


Comment feed for ongoing:Comments feed

From: Charles Wiltgen (Apr 02 2011, at 18:57)

A claim like "Ragged right is an abomination" strongly suggests that Blaine doesn't know tons about typography.

Left-justified is fine, and IMHO far preferable especially for the relatively large column widths typically used on the web.

One study:

-- Charles


From: W^L+ (Apr 02 2011, at 19:07)

I haven't been here in a while, so I can't put this down to your recent changes. Still, when I was reading this, I notice the text keeps changing into one big gray unreadable blob.

I would speculate that ragged right edges may help prevent that.


From: JohnW (Apr 02 2011, at 20:05)

While Safari can't find (command-F) architecture, the WebKit daily can find it OK. So it looks like its already been crushed, just awaiting the next release.


From: Martin Paulo (Apr 02 2011, at 20:32)

To me “Ragged right is an abomination” is simply religious opinion.

Some research into the topic can be found here:


From: Tony Lavinio (Apr 02 2011, at 21:59)

I find your justified text with the wider column width very hard to read. I never resized my browser down from fairly-large full screen before to read you, but now I must narrow it.

Please, either fewer characters/line, or go back to ragged right. For reading on relatively lower-resolution, I've always preferred left justified over full justification.

But that's just me. :)


From: Idan Gazit (Apr 02 2011, at 22:47)

I'm sorry to say that the "abomination" bit is just a poisonous bit of hogwash.

I'll be mainly repeating what other reputable sources have to say on the subject, chiefly — all of which is worthwhile reading if you care about presenting text onscreen.

The crux of the matter is hyphenation. Fully-justified text is produced by varying the spacing between words on a line in order to achieve a fixed line-length, or "measure" (the typographical term). Without proper hyphenation, often you end up with typographical rivers of whitespace (google the term). You're addressing the issue by using JS hyphenation, which has (as you note) quirks.

Unfortunately, you're fixing a problem caused by misapplication of justification in the first place.

Fully justified text appears in very specific contexts, the most common of which are newspapers and magazines where multicolumnar text layouts are the norm. The perfectly rectangular shape of each text block emphasizes the columns, or more accurately, emphasizes the perfect gutters *between* the columns; this visual separation aids the eye in staying within the story that you're reading versus jumping into the story one column over. Newspapers are meant to be consumed in situations without perfect reading conditions; folded narrow, in a jostling train, with many visual distractions. In newspapers, the simple act of *finding your place* after flicking your eyes away from the paper is a design goal, because it happens so often.

The majority of writing for the web is not multicolumnar; sidebars do not usually compete with main content for visual weight. There's no need to aid the reader in making that separation, and the measure is generally not so narrow as to benefit from the clear boundaries afforded by full justification.

I applaud your desire to make your blog more legible, but if you're looking to make some meaningful improvements, I'd start with the greater sins of web typography:

1. Measure. A good reference (again) is Rutter, Right now your line lengths are uncomfortably long—which is par for the course in most technical writing on the web. A measure which is too wide makes it difficult to read because the further the eye moves along the line, the greater chance that it has to mistakenly "skip" to one line above or below. You can combat this issue by using a shorter measure, but there are other tools at your disposal.

2. Leading: the spacing between lines. As line lengths get longer, and text grows larger, more space between lines makes it easier for the eye to track the line it is reading. Again, Rutter provides some great guidelines in, my TL;DR rule is "line-height: 1.5em" for body text.

3. Font size: we do not read the screen at the same distance which we read a paper; screens are further away from our eyes (on average). Thus, a larger body text size is called for. Wilson Miner wrote a lovely post on the subject: I often set my body text to 18px (depending on the font) and rarely smaller than 16px. Without adjusting other factors (chiefly measure and leading) it can look awful, but as soon as these three are in harmony, it looks great. WIlson's blog is a great example of this principle.

The only "downside" to giving your text more room to breathe is that your page lengths will become necessarily longer. An irrational fear of nonscrolling users persists on the web like a stubborn virus, but given your audience, I don't think that it is an issue.

Good luck with the redesign! Congrats on taking these issues into account, it is heartening to see more and more authors considering how their text is read onscreen.


From: Michael (Apr 02 2011, at 23:03)

As far as I can tell, Mr. Cook does not make actually argue that "right justification is an abomination". He simply makes an unsupported assertion.

There are many good reasons to go with right-justified text most anywhere, especially online, including "form follows function", the decrease in readability from extra hyphenation, and the decrease in readability from uneven word spacing and rivers of whitespace.

When I was working in usability, James Hartley was one of the leading researchers in this area. A quick Google of "James Hartley readability" indicates his work has continued for a long time now. See for instance


From: Max Lybbert (Apr 02 2011, at 23:55)

Unfortunately I can no long remember which books taught me typography. However, yes, you are right that shorter line lengths are generally easier to read. The best reference I can find is the last question on Paul Graham's FAQ: .

As to full justification: I have to echo what others have said, full justification requires just a little more effort to read because the spaces between letters and words aren't uniform. It may well be more popular with graphic designers, but there's a difference between writing meant to be read and writing meant to be looked at.


From: Ralph Haygood (Apr 03 2011, at 00:02)

Warning: flagrant subjectivity follows.

You (Tim) said, "I seem also to remember that narrow columns, in the style of newspapers, were found more readable. But then why are book-length texts not formatted that way?" I'm not a book designer, and I have no idea what a book designer would say about this. I am a book reader, however, and it seems to me the single-column format typical of books is associated, at least in my mind, with a different, more leisurely mode of reading than the multi-column formats typical of newspapers. This difference of mood (for want of a better term) is often reinforced by choices of font, tracking, etc. that tend to give book text a less compressed look than newspaper text. To what degree this fairly subtle difference I experience in the psychology of reading inheres in the formats rather than being just an association formed through repeated exposure to them, I couldn't say.

It may be worth noting that multi-column formats actually are common in some kinds of books, such as textbooks.

Thanks for this post, by the way. You've given me the nudge I needed to start experimenting with "H&J" on some of my own pages.


From: at (Apr 03 2011, at 01:07)

Very interesting thoughts. But why 0.95em? Just to have it still a bit smaller than the user's preference? Or just to be sure it will not be an even number? If you want to leave font rendering to the browser, why not also leave font size to the preference of the user? Readability reasons seem unlikely.


From: Ray (Apr 03 2011, at 01:21)

Put me down as not a fan of the justified text.

In these comments I see that the justified text butts up against the grey boxes surrounding them is very distracting. The presence of the vertical edges of the boxes abutting the text makes it very difficult to read. If you don't change anything else, please provide some padding around those.

The article itself is easier to read, but even at the full 700px width, and especially with your san-serif font the text seems blurry to me.

Also, at full width finding the beginning of the next line on the fly back becomes difficult. It's eased somewhat because most of the paragraphs I find looking around Ongoing are less than 5 lines long at that width so there is a landmark; I'm either going to the line after the first, the line before the last or the last line. Narrowing the width makes the flyback to the beginning of the next line easier.


From: George Gruschow (Apr 03 2011, at 01:33)

(Disclaimer: I am an insomniac, not a designer.)

This layout looks fantastic! That is... on a web browser sized to 800 pixels wide.

It seems like it should be similarly fantastic on my phone given the mobile browsers' encouragement to full-screen just the column of text. At least for me & my phone though, it appears I need more space between lines to read it with the smaller screen and fonts.

The above links seem to support the following conclusion:

Keep the H&J if you're going to switch to 2 columns. However, switching to 2 columns without also switching to paginated text seems really really awkward... if the text was longer than 1 page you'd have to scroll back up to continue reading.

H&J looks great lined up against another vertical column. It has that constant width gutter. You seem to get that effect here on the top of the article with the 800 pixel wide browser and the vertical bar on the right side. When the browser width exceeds ~1100 pixels though, the gap grows and the column doesn't seem like it's next to anything anymore. The same thing happens as you scroll down past the end of the vertical bar.


From: Paul Downey (Apr 03 2011, at 02:15)

Great stuff! Thanks to Blaine I've also been thinking about adding Hyphenator.js to my own, minimalist blog. You might want to add some responsive design so the second column drops beneath the text on a narrow display.

As for fonts, the open ones are fun for headings ( has a wider selection than Google's hosting), but for readability I much prefer standard fonts for body text:

Probably due to ageing eyesight I read most Web pages using a hacked local copy of the Readability bookmarklet. Thanks to client-side Web, this seems to be supplanting the RSS button in the endangered browser bar and which allow people to read content obscured by JavaScript and work around strange layouts, colours and fonts!


From: Michael Norrish (Apr 03 2011, at 02:26)

I don't much mind the new look, except in the comments where the grey background is exactly the same width as the text (this is on an uptodate iPad). This looks horrible.


From: Jacek Kopecky (Apr 03 2011, at 05:31)

Tim, can you please write a few words on your reasons for .95em-sized main text?


From: Dirkjan Ochtman (Apr 03 2011, at 07:10)

Nice discussion. Expanding on Idan's excellent comment, I seem to remember (but have no reputable source) that about 60-80 characters per line is easiest to read on average. This blog post, on a random line I sampled, had 104.

Finally, I found the hyphenation rather distracting. I'm not sure why, surely I see it a lot in books, but apparently web reading uses slightly different paths in my brain. In any case, the "ragged right" hasn't ever bothered me much, I think; I think it would probably vary with line length (i.e. ragged right is less naturally annoying on long lines, because the variance relative to the full line length is smaller).


From: James Moore (Apr 03 2011, at 08:04)

For most blogs, this one included, it's formatted however my RSS reader formats it.


From: David Magda (Apr 03 2011, at 08:06)

If you're traveling a decent amount, you may want to get "The Elements of Typographic Style" by Robert Bringhurst for your next flight. It's not too long (~300pp, plus optional-to-read appendixes), and covers most of what the layman would probably ever care about.

On ragged vs. justification he states (§2.1.3): Good compositors like to avoid consecutive hyphenated line-ends, but frequent hyphens are better than sloppy spacing, and ragged setting is better yet.

Things are certainly helped with Hypthenation.js, but until more browsers use (say) La/TeX's spacing algorithm to make things look nice, please don't use it.

For text width (§2.1.2): "Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in serifed text face in a text size. The 66-character line (counting both letters and space) is widely regarded as ideal." He then goes to into detail, with some simply math involved points (pt) and picas.

Most online advice I've come across mentions the "em" unit—the length of the character 'm' in any particular typeface—to figure out line length Personally I found "ex" units (width of an 'x') to be more helpful.

Instead of using the complicated JavaScript way to figure out max-width in your #centercontent, try just using "81ex" instead. It should end up scaling nicely to whatever font size the reader uses, and it avoids the dpi-dependent units completely.


From: Keith Gaughan (Apr 03 2011, at 08:32)

Get a copy of Bringhurst's "Elements of Typographic Style", as Blaine mentions. It's a fantastic book and though technical, you'll learn a lot. It's key though that you don't apply everything in it slavishly though, as it's primarily a commentary on typography on paper, not on a webpage, where the constraints are very different.

As everybody has mentioned, the whole full justification thing is nonsense. In browsers, even with good hyphenation, you'll end up with uneven colour, which can make the text much more difficult to read, especially for people with reading difficulties, such as dyslexia. Without the tiny adjustments to letter shape, letter spacing and word spacing that the likes of TeX can make, full justification is actually much *worse* than ragged right.

Much more important is linespacing. The rule of thumb, as others have mentioned, is to go for roughly 66 to 70 letters per line, which will comfortably take a line height of 1.3. With proportionately narrower lines (such as headings that use larger typefaces), you can afford to shrink the line height to improve text colour. If it's necessary to use wider lines, increase the linespacing to compensate.


From: Cedric (Apr 03 2011, at 09:19)

A few random thoughts:

Most of your readers didn't notice probably because they read blogs off RSS feeds, where pretty much all the styling information is discarded anyway. I know I only go to web sites when some content is not showing up in my RSS reader, such as certain videos or Flash content.

The problem with full justification is that each first and last letter is now extremely close to the border. Not a big deal for the content of your blog, but check a look at the comments, which are laid out on a grey background. At the very least, make sure you add a bit of margin on each side.

I have always found hyphenation more difficult to read, it just bothers me to start reading a word and then having to do a mental newline to complete it. I do agree that it seems to be necessary if you go down the full justification route, or you'll be showing vertical rivers of white spaces.

Following up on this thought, the idea behind legible full justification is to cram as many characters as possible on each line, in order to avoid these rivers of white space. A side effect of this is that the kind of lay out you are experimenting with now tends to look a lot more crowded than its counterpart (left justified + no hyphenation).


From: Norman Walsh (Apr 03 2011, at 10:50)

Put me in the "do not like" column for the justified layout. And I second Paul's suggestion that you move the sidebar down to the bottom on narrow displays.

(Also, this text box weirdly overlaps the sidebar on the Galaxy Tab.)


From: IBBoard (Apr 04 2011, at 02:39)

I agree with Cedric - the hyphenation at the end of lines just makes things more difficult to read. Things like "On balance" become "On bal.....ance" - it just breaks the flow of the words and sentences.

Perhaps a professional type-setter would do it better when laying out a book, but a script on a web page can only follow rules rather than doing what looks best.

Maybe a Javascript blocker is necessary this days - not for the adverts, but for the extra bits people add to their page.

But what do I know, I'm just a member of the audience rather than a "graphics expert" ;)


From: Ralph Elliott (Apr 04 2011, at 04:32)

I'm sorry to report that I'm seeing several downsides and no upside to your changes:

- Ragged right was fine, justified is slightly less so.

- As others have noted, text comments' gray backgrounds with not so much as a pixel of extra space are not at all pleasing.

- Text now looks mushier, less dense than it used to (may be due to something in my browser prefs, but if so it didn't happen before).

- Saving the most serious until last: Photos overflow into the right margin -- presumably because my preferred browser window size is relatively narrow (roughly square on a 13" MacBook Pro) -- but, again, this didn't happen before, and I'd prefer it not to happen now.


From: Sm (Apr 04 2011, at 04:50)

For several years I read through RSS and if I need to find a post I use google search :)

I'll go with no hypenation and cute abomination. The only rational reason for current approach is cost. Newspapers, books have budget of symbols they try to squeeze in as much as they can. No such reason on the web. And irrational reason is cuteness. Many people prefer pretty to readable, though this is not a reason I read Ongoing through RSS. :) I use RSS so that I don't miss a post and thank you for putting all of it in the feed, including beautiful images.

The rational reason to avoid hypenation would be that people with reasonable skill read whole word at once, i read several word chunks. Hypenation requires to reassamble. Also reminds me of childhood struggles how I learned to read and write. :)


From: Daniel Grady (Apr 04 2011, at 10:55)

Agree with David Magda. It's great that there are so many projects working to bring better options for typography to the web, but littering your text with soft hyphens accomplishes very little when the justification algorithms in wide use by browsers don't make good use of them. Also, there are plenty of professional designers and authors who choose ragged-right in their published works.

I also recently wrote a rambling post about this ( which is probably trumped by the discussion here, but there are a few links to other research on the issue.

Another interesting project to check out is, which implements the TeX line-breaking algorithm whole-hog in JavaScript, but uses HTML canvas to render the results.


From: Doug K (Apr 04 2011, at 11:29)

"Personally, I like justification more and more as the columns get narrower and narrower; in book-length lines, I find ragged right to be sort of appealing. "

With longer lines, ragged right makes it easier to keep your place. Narrow columns with ragged right start to look like Alice in Wonderland,

"Fury said to

a mouse, That

he met

in the


'Let us

both go

to law:

I will



Come, I'll

take no


and notice how amusingly the justification of that goes awry when cut/pasted..

My preferences accord with yours. I suppose the problem is when reading mobile the column will be extremely short, hence the blocky statuesque columns are needed for the brave new platforms. Otherwise it is only de gustibus, and calling my preferences an abomination reminds me of Fr. Robert's translation of that tag: "De gustibus non est disputandum: that means I find your tastes disgusting".

Being mostly a text-based lifeform myself, I have Firefox configured to enforce all my preferences for fonts, sizing and background over the website's specifications. This works well for text-based lifeforms on the web but fails dismally on Javascripted portals, merchandising Flashy sites and so on. For those I wince, open in an IE tab, and close as fast as possible..


From: Joe Clark (Apr 04 2011, at 13:07)

So to sum up the expert opinions articulated here: The premise is wrong; justification is misapplied to a mere blog; your method alters your source text, relies on scripting, and is by your admission a kluge; and even your font sizing is nonsensical.

As the saying goes, you have demonstrated just enough knowledge of typography to be dangerous – in this case, to your readers.

On another day, we’ll discuss the nonsemantics of your nonheading nonelements.

Please just bang out plain ASCII and let’s not pretend what you’re providing is “typography.”


From: Daniel (Apr 04 2011, at 23:58)

@Joe Clark: The only real danger in the context of typography are when the truly obsessed care more for their opinion than the risk of hurting anyone.


From: Blaine Cook (Apr 05 2011, at 06:42)

Went offline for a weekend, lovely to see the experiment continuing!

If the pundits are to be believed, the hyphenation will be gone, but I (unsurprisingly) like it. Also, it's worth noting that several of the "experts" above have mis-quoted Bringhurst, who says to use ragged right in short measures, when doing so would produce long runs of hyphenation.

I agree 100% about the "use 1.0em and let the browser / device sort out how many pixels/points that is" – my concern to date is that [especially high dpi devices] do not do this, hence the hack. The hack itself needs some work, since (as mentioned above) the ideal line length described by Bringhurst is for books held at book-reading distance; I have it on good advice that the number of words-per-line should be fewer for mobile devices that you hold close to your face, and more for things like laptops and big screens.

Also, probably most interestingly, the kludge of soft hyphens is something that will go away in the near future - the most recent CSS3 text module drafts include hyphenation support (superseding the work that Hyphenator.js does), and early support is available in Webkit (working as of iOS 4.2). Link:


From: len (Apr 05 2011, at 08:41)

"“Ragged right is an abomination”."

Wrong. Ragged right helps the eye track line to line. Right justification lends to eye fatigue.

Graphic prettiness of layout is a wet dream for those who don't read enough.


From: Typesetter from way back (Apr 10 2011, at 06:57)

The justification on this blog posting makes me focus on the look of the page rather than on the content. I'm seeing the rivers of white space and the hyphenations, and getting distracted from what you're saying, which seems like exactly the wrong direction to go on the Web, if your aim is to discuss ideas. On the other hand, I love the discussion this posting has sparked! Wonderful links.


From: Kayla Block (Apr 10 2011, at 09:34)

I find your blog hard to read due to the justified right. I don't get that as an "abomination."

I haven't studied web typography in awhile, but it seems that research suggests sans serif is easier to read on a monitor and I personally concur.

Still, it was interesting to learn what's possible and impossible with hyphenation these days.


From: Bonnie Britt (Apr 11 2011, at 06:00)

This blog's type is butting up against the left and right edges of the type area. Consider adding a few pixels on both sides to better frame the text both in the blog area and in comments, where the butting against the edges is seen most sharply due to the shading.


author · Dad · software · colophon · rights
picture of the day
April 01, 2011
· Technology (77 fragments)
· · Publishing (154 more)
· · Web (385 more)

By .

I am an employee
of, but
the opinions expressed here
are my own, and no other party
necessarily agrees with them.

A full disclosure of my
professional interests is
on the author page.