What is a ‘good’ font size for reading from a screen?  Lots of variables:

• screen size/resolution
• age/eyesight of viewer
• length of paragraph
• measure of paragraph
• reader’s taste

I’ve always assumed that larger font size = more readable, but having read Vivien’s critique of my website, comments on the iA site and through listening to my work colleagues, I’m not so sure.

Garamond example

Can anyone point to any research on this?

Does the font type (serif vs. sans) have any effect?  I think that Georgia at 16px looks great and reads great, am willing to admit that helvetica/arial (and sans in general) not so much.

Congruence of taste and readability - emotional aspect?

Possible cop out - respect the user’s setting by specifying font-size: 100%, p {font-size: 1em;}.  Except - how many people actually change this setting.  Do you know any normal, non-geek people who do this?  Are there any stats on this?

Any pointers, ideas etc. welcome.

• the page doesn’t contain as much information as it used to
• the font size and leading are too big
• it looks like it was designed for a mobile phone screen
• it’s ugly, uninformative and ‘actively confusing’ (as opposed to something that is passively confusing, presumably)—no details of how or why it’s these things, unfortunately

The overriding theme is that it has been designed for people who can’t and ‘don’t want to read’.  There is a surprising (bearing in mind it’s in The Guardian) snobbishness here; it reads more like The Telegraph.

FT screenshot - simple, readable, pink

All nonsense, of course, and the design should be saluted for breaking from the current convention for super-complex grids, content-overload and headers stuffed with 75 links.

So here’s what the FT does well:

• Just 2 main columns
• Big font sizes for easier scanning, cognition and reading, especially by the paper’s older demographic
• A sane navigation bar with just 9 links (The Guardian has 26, in different pretty colours, to boot)
• The light pink background (this is so clever - it matches the famous colour of the print version while providing some texture)
• 1 sentence summaries of the stories
• Simple, logical rules
• Blue links
• Displaying a relatively small amount of content on the home page (making it easier to comprehend and scan), thereby demonstrating respect for its readers by allowing them to find relevant content, just as they would when reading the print version
• Calling itself Financial Times rather than financialtimesonline or financialtimes.co.uk.  It therefore suggests that the online and print versions of the paper are of equal importance

In short, all great things that The Guardian’s site isn’t.

It’s perhaps a surprise that such a traditional, conservative publication has led the way in designing a home page that is fully aware of the constraints and possibilities of the medium, while Britain’s greatest liberal paper adopts such a narrow, backward looking view.  It’s the FT that’s leading newspaper design into the modern era.

In case you weren’t aware, this is the face of God:

Jakob Nielsen - thoughtful, slightly come hither

Disappointing, I know, but this is the man who observes how people use the web, analyses the data and then makes suggestions for how we should go about designing and writing for websites.

Taking a look at Nielsen’s website, you’ll see that he doesn’t do pretty.  It’s black text on a white background, illustrative images and a clunky, large verdana for body copy.  In the age of youtube, beautiful web typography and professional graphic design on the web, it looks dated.

Of course, Nielsen is making a point with this site: usability is more important than pretiness.  The ugliness makes it stand out from the crowd: Nielsen himself says he wouldn’t recommend it to somebody starting out now.

And yet.  Nielsen’s site is the one where I can guarantee I’ll spend a good few hours at a visit.  It’s not just the quality of the content (which is superb) - it’s also way that the design doesn’t get in the way of the content.  I also like:

• the fact that visited links are purple, which means I can quickly tell where I’ve already been
• there’s not much in the way of universal navigation (a search box top right and breadcrumb top left)
• the search always finds relevant results
• the speed of the site
• the breadcrumb that helps me find my way around the site
• lots of link lists

All of these things are ‘ugly’ and conventional.  They also work.  They’re why I spend hours on the site at a time.

So the question is: should all our sites look like useit.com, give or take a few typographical tweeks?  It’s one I’m trying to figure out.

But we often encounter material that’s, well, impossible to make something of.  It could be vague, incomprehensible to the reader (and/or the editor) or devoid of any factual content that the reader might be interested in.

The editor has a number of choices when faced by this:

• ask for clarification, more detail etc.
• copy and use as is
• get ‘creative’ with the content

Of course, the only real option is the first: option two merely abrogates our duty as an editor, while the third can cause confusion (and legal problems!)

The first option is also far from ideal.  It’s time consuming and the submitter often feels that he or she has done his or her job in giving you the material.  Far better to ensure that we receive decent quality material in the first place.

We could simply email the organisation’s style guide to anyone who submits material for publication.  Except that (quite rightly) the recipient might feel that he or she doesn’t have time to read the guide, nor time to adhere to its many rules and suggestions. Some may not make sense to those not from an editing/teaching background.  After all, it’s the editor’s job to beat material into shiny, presentable copy.

An alternative is to provide a simple list of dos and don’ts for submitting material.  Leave the capitalisation and formating to the editor.

The 5 (possible) dos and don’ts of submitting content

Here’s a set of rules I’m currently playing with:

Don’t describe procedure

If you’re telling the me about an event, omit details of start times, breakout sessions, number of attendees.  No-one, apart from the event organiser, is interested.

Do tell me the basic facts

Make sure you tell me what, where, when, who and why.  All these serve to provide the reader with a context in which to understand the story.

Do provide photos

Photos of people.  One group photo is fine, smaller group and individual photos are even better.  Provide photos of people involved in the content, rather than images of random office people.

Some people at work. Yesterday.

Do provide quotes

Direct speech adds a sense of immediacy to an account, while bringing the dramatis personae to life.  If you’ve provided quotes, make sure there are photos of the people who have spoken

Don’t over-generalise

If someone at an event states that they want to increase their company’s profits, it’s hardly news: every company wants to increase its profits.  If that person goes on to describe how they intend to increase profits, it’s interesting.  As good copywriters we know that if we state the bleeding obvious, or describe ourselves or our products in terms that everyone else would use, it’s just marketing flannel.  Concrete, unique features are what make copy interesting.

So it doesn’t really matter if the material we receive amounts to 40 pages, includes all the presentation slides from an event, 10 photos and is scrawled in idiosynchratic English: as long as there’s something to work with we should be able to produce exciting, lively copy that our visitors want to read.

It really is. This may look complicated:

<?php while (have_posts()) : the_post(); ?>

<h2><?php the_title(); ?></h2>
<h3><?php the_excerpt(); ?></h3>
<p class="byline"><?php the_time('F jS, Y'); ?>. Written <span class="flourish">by</span> <?php the_author_firstname(); ?>.  <a href="#commentary">Read the commentary</a>.</p>

But it’s actually simple. And the point is that you’ll reuse it several times, without even having to know what F jS, Y means. And finding out what F jS, Y means is just a short google search away.

When I designed my first WordPress theme, I didn’t even know what PHP was. I built the theme by poking around the template files with Notepad++, until it looked OK.

I now know some PHP and, yes, it does make customising easier and development quicker, especially if I’m trying to bend WordPress into unlikely shapes.

What is difficult is creating plain old HTML and CSS that works, is readable and looks good. I design WordPress themes in two steps:

1. Produce a CSS/HTML mockup that doesn’t have any dynamic functionality (e.g. a comments form that works)
2. Convert the HTML to PHP template files

Now, step 2 sounds more complicated: the world and his dog can create static HTML pages, no? And generating a list of posts based on their tags is surely more difficult than wrapping a header in h2 tags and styling the output. Yet step 1 invariably takes longer, is more frustrating and requires more imagination than step 2.

Clients no doubt feel that they get best value for money from the work that goes into step 2, the WordPress magic. That’s not true—it doesn’t surprise me to hear that a top notch designer can knock up a basic, standard–issue theme in 90 minutes. Because just as writing good content is criminally undervalued (good content can redeem nearly all bad design, yet a javascript code monkey will earn twice as much as a good content editor) writing well-formed, imaginative HTML and CSS is a rare, precious skill.

Second: Right–wing Über-designer Andy Rutledge has been kicking up a storm recently (this is an excellent piece of writing, by the way).  As one of the 100 or so who emailed Andy, and a left–leaning Britisher, I feel I should write something about this.  I was very nice to Andy, and he sent me a sweet email back, so I wonder if I’m the 1 in a 100 he refers to.

Third: I have redesigned my home page.  This was one of those flash of inspiration moments where I was able to dispense with 90% of the existing design.  And how nice it is to code simple, plain HTML and CSS, without punctuation-crazy PHP.

—Leon

1. Singer Mark E Smith has fired lots of band members
2. The Fall have released more than 30 albums over 30 years

I love the fact that The Fall produce so much. While The Stone Roses took 5 years to release their second (not–very–good) album, The Fall released 5 albums, including Extricate and Code: Selfish.

So when it comes to writing something as immediate and easy–to–publish as a blog post, bloggers shouldn’t get too precious and start criticising others for publishing unthoughtful articles while they sit and do nada, all in the name of quality.

There are, of course, plenty of valid reasons for not publishing: work commitments, kids, life, boredom, lack of inspiration included, but those who aren’t publishing really shouldn’t indulge in a bout of concerned chin stroking at the state of blogging.

Was that a rant?

Just 4 big things to click, white space, clever alignment: 10 out of 10

This page has just 4 big red things to click, which is clever in itself.  The quote’s spot on and we’re told everything we need to know in a couple of sentences.  The simplicity allows the designer to indulge in some big, uncommon fonts (Palatino) and there’s even my beloved Garamond italic ampersand.  No graphics.

The red blocks give a great balance to the design.

Makes my own home page seem like a mess. Update: I have taken a leaf out of Vitor’s book.

21?  I’m nearly old enough to be his dad.

What’s a paragraph?

It seems a simple question, but as with so many fundamental questions giving a concise answer can be tricky.

Well, a paragraph isn’t a sign or a clue as to your content in the same way that headings are. Paragraphs are your content: the flow of ideas and the development of your argument.

Which means that you owe your readers respect when it comes to setting your paragraphs; readability is absolutely paramount, especially when you’re dealing in lots of text — when writing a blog, for example.

An old example of indented paragraphs

Making paragraphs readable in 5 steps

We need to think about 5 things when we set paragraphs on the web, all of which can be controlled using CSS:

1. Font choice and size
2. Colour
3. White space: this includes line-height, line width, margins, letter-spacing and word-spacing
4. Alignment
5. Boundaries, indents, outdents and versals

Font choice and size

I’ll talk about the effect different fonts create in a future article. What I’m interested in here is legibility. Of the web safe fonts, Times looks cramped at ‘normal’ font sizes, and is only worth using in headings. Monospace fonts such as Courier and Lucida Console denote code and are therefore generally inappropriate for body copy (unless you’re making a lo–contrast statement).

Traditionally, serif fonts (such as Georgia and Times) were seen as conducive to print reading while sans serif fonts (such as Arial, Helvetica and Lucida) were seen as appropriate for the screen. Either is fine, but it is worth bearing in mind what fonts work at what size. Verdana was specifically designed to be used at small sizes, so it is a sensible choice at, say, 10 pixels. Georgia looks pale and indistinct at 12 pixels and below, but up it to 16 pixels and it looks great.

Of course, we don’t want to inflict small fonts on our readers, regardless of their age (so just because your readers are all hawk–eyed young designers who prefer to look at neatly aligned blocks of text rather than messy, real text, it doesn’t mean you can get away with 8 pixel Helvetica).

I would suggest a minimum font size of 14 pixels for paragraphs. I generally use 16 pixels. Of course, we should be allowing readers to select their own size by using relative sizing units. This is what I use on this blog:

body {
font-size: 100%;
}

p       {
font-size: 1em;
font-family: helvetica, arial, nimbus sans, sans serif;
}

Colour

We need to consider contrast and glare when selecting colours for our paragraphs. Regardless of your reader’s eyesight, every reader will appreciate distinct text that doesn’t give them a migraine. Some choices are obviously poor, but you can be sure by running some objective checks. I use the Colour Contrast Analyser extension for Firefox. Of course, some of this is just personal preference: white/near white on black will pass any contrast test, but it is not, in my opinion, conducive to reading long swathes of text.

Here’s the CSS I use:

body {
color: #444;
background-color: #fff;
}

White space

White (or negative) space need not, of course, be white. It is the space both around and within paragraphs, and can help your reader keep his or her place within the text, while not having to worry about accidentally straying into adjacent content.

I’ve written pretty extensively on line height before; suffice to say that it’s worth changing the browser default setting of 120% of the paragraph font size. Anything between 140% and 170% is good, although bigger font sizes don’t require as much line height as smaller.

CSS allows some fine tuning of the white space between letters and words. Applying letter spacing to headings can often provide some interesting effects, but it’s rare to see either property applied to paragraphs. These settings have become so conventional that any change has a marked effect upon a page, as you can see at the Contrast.ie blog. Interestingly, additional letter-spacing has been applied to the body selector: it creates a bold, confident effect, which perhaps links to the firm’s own image. It’s a very original approach that would require a lot of care to implement well.

CSS also allows us to control the space between and around paragraphs. In some print material, a new paragraph is marked by an indent, but on the screen the convention is to insert a space between paragraphs (although some sites attempt to introduce a ‘bookish’ variation, which unfortunately makes reading from a screen difficult. It’s good to see that The New Yorker has taken my advice and inserted line breaks between paragraphs. If it ups the font size and changes the font to Georgia it’ll be there!) It is logical to make the space between paragraphs the equivalent of a single line, as this maintains the vertical rhythm of the text on the page.

Ensuring that there is space around a paragraph is a matter of overall page design and element placement. One good way to ensure that this happens is to keep sidebar lists to a reasonable length, while making the content part of your page the widest element on the screen. Of course, it is also necessary to ensure that the width of your paragraphs (also known as the measure) is neither too long (so the eye loses its place within a line of text) nor too short (so that the eye has to jump up and down the page too often). The optimum measure is around 10-15 words.

There’s quite a lot to bear in mind when setting paragraphs and white space. This is my typical CSS:

body {
width: 57em; /* probably 912px */
font-size: 100%;
line-height: 1.5em; /* this ensures everything has the same line-height */
}

p {
width: 30em; /* measure therefore 10-15 words, width over half the body width */
font-size: 1em;
margin-bottom: 1.5em; /* same as document leading */
}

If you are thinking of using a smaller font size for paragraphs (say 0.875em) then you’ll need to resize the bottom margin, so as to maintain the vertical rhythm set in your body selector. It needs a calculator, but it’s quite simple: simply divide the line height by the element font size. So if we have a body line height of 1.5em and a font size of 0.875em, then the sum is 1.5/0.875, or p {margin-bottom: 1.714em;}

Alignment

This is easy. Browsers don’t justify text very well, so you’re best off using flush left, ragged right alignment. This is what browsers default to, so it doesn’t need to be set. If you must use justified paragraphs, the CSS is simple: text-align: justify;. In my experience, serifs justify better than sans serifs and the wider the measure the better.

Boundaries, indents, outdents and versals

Jon Tan has written a wonderful article on achieving some fancy effects when setting paragraphs. What I want to concentrate on here is how we can implement these largely unexplored areas.

CSS offers us a range of pseudo–selectors with which to alter the way in which the opening line or letter of a paragraph (or any element) is presented:

:first-letter allows us to style the first letter of a paragraph, while :first-line allows us to target the (you’ve guessed it) first line. So, you could use something like:

p:first-letter {
font-weight: bold;
font-size: 1.5em;
}

which would make the first letter of every paragraph bolder and bigger. We obviously need a way in which to target specific paragraphs. There are 2 possible approaches:

• Apply first letter or first line styling to paragraphs that have been given a particular class. We could target an intro paragraph class with p.intro:first-letter {font-weight: bold; font-size: 1.5em;}, and leave our other paragraphs alone.
• Sometimes we can’t target paragraphs that have been assigned a class. For example, when we simply want to target the first line of a blog article. The way round this is to use adjacent selectors. So if we have wrapped our article in an id entitled #article and we knew that the first paragraph always followed an h2 or an img preceded by an h2, then #article h2 + p:first-line, #article h2 + img + p:first-line {font-variant: small-caps;} will make sure that only the first paragraph is targetted.

This is quite complicated CSS, so let’s give a complete example. Let’s say you want to make the first letter of every blog article 3em bold and the first line small-caps. Here’s what you’d do:

HTML:
<div id="article">
<h2>Artcile title</h2>
<p>Paragraphs are lovely.  Beautiful.  And I want you to appreciate their beauty.</p>
<p>The thing about them, though, is that they take a bit of thought.</p>
</div>

CSS:
#article h2 + p:first-letter {
font-size: 3em;
font-weight: bold;
line-height: 1em;
}

#article h2 + p:first-line {
font-variant: small-caps;
}

The use of these pseudo-selectors opens up a wide range of possibilities for styling paragraphs. Jon Tan’s article goes some way in exploring them: the rest will be down to some experimentation.

Conclusions

I’ve provided an example of some reasonably fancy paragraphing. Feel free to peruse the HTML and CSS.

As you can see, there’s quite a lot to think about when setting paragraphs on the web. As ever, CSS offers a concise, simple and easy–to–understand method for implementing our ideas. What do you think? How do you go about setting paragraphs?

Fetching, non?