Get in Touch

How can we help?

Whether you are looking to redesign your site or simply refresh your brand, we are here to help!

Prefer to send us an email? hello@imarc.net

Lunchroom Banter (Volume VII)

Posted by Dave Tufts on January 19, 2007.

Confusion at the Coffee Shop: Today's Lunchroom Banter is an overheard conversation at the Starbucks across the street.

The customer just purchased two large coffees...

  1. Barista: Would you like a tray for those?
  2. Customer: No thanks, could I have a holder thingy?
  3. Barista: (hands the man a tray)
  4. Customer: Thanks.

A Case For Shorter Lines

Posted by Dave Tufts on January 10, 2007.

Line length, in typography, refers to how many characters occupy a single line in a paragraph. Line length is also called column width, characters per line, measure, or even words per line.

Since most characters - letters, numbers, spaces, punctuation - vary in width, line length is usually thought of as a range.

For instance, right now (as of January 2007), this blog uses a line length of 90-105 characters per line. This is a result of a number of factors, the three most basic being:

  • typeface - Some fonts are wider than others.
  • font size - If we change our text size from 12px to 11px, we fit a more characters on each line.
  • page size- Currently, the area allocated to this blog content is about 520px. If we expand that to 620px, the line length will increase.

However these factors are all interrelated. Using the numbers above, if we change our page size from 520px to 620px, but also increase our font size from 12px to 15px, the characters per line remains about the same.

Line Length on the Web

The following is a list of popular websites and how many characters per line they use.

Chart of the number of characters per line used by various websites

What's the 'correct' line length?

Obviously, there's no 'correct' measure, but most people feel that 50 - 80 characters per line is good.

Here are what some others have to say on the topic of line length:

Elements of Typographic Style – By Robert Bringhurst (from the section, "Choose a comfortable measure.")

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

Grid Systems in Graphic Design – By Josef Muller-Brockmann (from the section, "Column Width")

The question of column width is not merely one of design or of format; the question of legibility is of equal importance.

According to a well-known empirical rule there should be 7 words per line for a text of any length. If we want to have 7-10 words per line, the length of the line can be readily calculated.

Every difficulty standing in the reader's way means loss of quality in communication and memorability. Just as overlong lines tire, so do overshot ones.

Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and ut the reader off by obliging the eye to change lines too rapidly.

Sufficient leading between the lines is of the first importance for easy reading. If the lines are too closely set the eye is forced to "take in" the neighboring lines while reading.

About Face - Reviving the rules of typography – By David Jury (from the section, "Words per line")

The full width of a column or length of a single line of type is called the 'measure'.

For readability, the width of a line is less important than the number of characters it contains. Somewhere between 54 and 80 characters and spaces has been found to be the most conducive to efficient 'long distance' reading. At an average of five characters and one interword space per word in English, this means an approximate average of nine to twelve words per line.

The width of a measure might also reflect [...] the commitment expected of the reader. A wider measure [...] suggests an efficient use of the reader's energy appropriate for a longer read. Shorter measures offer a more staccato reading experience, providing a sense of urgency, enabling the reader to scan quickly down the page; an appropriate reading experience for newspapers.

The readability of a wider measure will be dramatically improved by the use of additional leading. It provides stronger definition to the line of text so helping to keep the reader's eye on the line and also enabling the reader to track back to the beginning of the next line of text.

Conclusion

Most websites could benefit from a few less characters on each line.

My favorite approach to specifying a line length is described on the companion site to Robert Bringhurst's book, Elements of Typographic Style Applied to the Web. On one of the examples there, page size (or column width) is referenced in em's. This is the easiest way to ensure a desired line length.

#content_area { width: 33em; }

Since the average character is about .5em, specifying the column as 33em's means about 66 characters per line, no matter what font-size is specified.

I like that.

Lunchroom Banter (Volume VI)

Posted by Dave Tufts on December 13, 2006.

The double negative edition:

  1. Rob: are such notices not useful to you?
  2. Dave: no.
Unfortunately, the following statement is not false:
Volume 6 (VI) of the Lunchroom Banter series was not authored in vi

Fall Photos

Posted by Dave Tufts on December 6, 2006.

iMarc's 9-Year Birthday Bash

From our office party, celebrating 9 years of typing < and >



Superhero Movie Out-takes

View the movie



MITX Awards

We Won One!

Posted by Fred LeBlanc on November 9, 2006.

I'm one of the first ones in this morning, so I guess I get to talk about it. We won a MITX award! Not knowing what to expect, it felt like we were venturing into this weird unknown territory of geeks. (That's not an insult, we're all geeky and proud.) There were platters of decadent foods that I've only heard of on television. There were a bunch of people from big companies that I've heard of around the 'net, but was sure hadn't heard of us. There were hundreds of people with messenger bags. After figuring out that the best deal at the bar was a straight up scotch on the rocks, I was set for an evening of fun. We stood out in the hallway where the food was for about an hour. I actually found the school I went to as they had purchased a table for a couple of teachers and students. I made some connections there, and after what felt like waiting forever on Christmas morning we got to move into the conference room where the award show was happening. We had two pretty good seats somewhat near the front. We were next to Adobe and Backbone Media and a couple others. The night's MC was Mike Birbiglia, a comedian that I had seen on Comedy Central a couple of times and thought I remembered to be kinda funny. He actually turned out to be really funny and he did a good job of keeping things moving while prodding us (the collective, all of us) about our nerdity. They went through category after category, and we weren't winning anything, but finally, Harvey Tool won an award! WAAAAAAHOOOOOO! Nick and Bill went up to claim the prize. I think they may have also got their pictures taken. And then that was that. During intermissions between people talking they showed our video with a couple of other videos. Ours fit in nicely with the group, and Mr. Birbiglia rated ours the nerdiest, but that we were proud of it and he said that we should be. (And we are.) Seeing me on a 40-foot screen was humbling, but the good news is that you can't be embarrassed after a bunch of scotch, a bit of wine and a beer. I visited with my school again after the ceremony and they thought the video was pretty funny. All in all it was a pretty good night. We laughed a bunch, we had a reason to celebrate, and we got to meet a bunch of people just like us. But more importantly, where we may have been the unknowns going in, after hearing our names for our seven nominations, seeing our video on that gigantic screen, and seeing us take home a plaque I think we made quite a name for ourselves. What more can you ask for? (The answer: Winning more awards next year.)

Harvey Tool website wins MITX award

Posted by Nils Menten on November 8, 2006.

Blog imageThe Massachusetts Innovation and Technology Exchange (MITX) announced the winners in its 2006 awards dinner, and iMarc client Harvey Tool took the honors in the Manufacturing category! Harvey Tool's website, www.harveytool.com, includes a comprehensive (and huge) product database, in-stock availability checker, and suggests alternate options if the desired tool is out of stock. The site enhances Harvey Tool's customer service and their customer satisfaction, as well as improving sales and distributor referrals. The MITX Awards is the largest and most prestigious awards competition in the country for technology innovation. We're thrilled to have our work recognized by a panel of our peers, particularly considering the quality of the work of the other entrants. Thanks to Harvey Tool for the opportunity, to MITX, and to the team here at iMarc. We'd like to especially recognize Senior Developer Bill Bushee and Creative Director Craig Henry for their team leadership roles in this excellent project.