UPDATE July 2012: it might be worth you taking a look at
Serif vs. Sans-Serif Fonts for HD Screens
which considers how fonts appear on mobile and new-technology screens.
Let me make this clear from the start: I am not trying to teach web site developers their job -
though a quick surf around the web would suggest some might need some 'advice'.
This is just a page on how text is presented online. I think it is important because most - if not all -
users visit a web site in search of information - and that information comes in the form of text [even a video on a
social networking site has to have words to describe it, or no one would download it!].
I believe that the textual element of a web site is part of marketing communications, and so falls under
the remit of the marketing department.
With this is mind, I obviously see the presentation of that text as being important. If folks can't read it -
or have difficulty doing so - they won't. Which means that the site's objectives are not being met.
As stated elsewhere on my site, I am not a techie. My knowledge of html is limited - as this site will contend.
But I do get the impression that many web designers do not know the basic reasoning behind good practice - and so do not
appreciate its importance. The presentation of text comes under this heading.
Although I will comment on a couple of other things, the main thrust of this piece is about page width
and was prompted by this
article. It says that
the most popular screen resolutions on the web in the world are:
- 1024 x 768 = 55.34%
- 1280 x 1024 = 17.23%
- 1280 x 800 = 8.23%
- 800 x 600 = 8.18%
- 1152 x 864 = 3.67%
I'm not in a position to question these results - but there are a couple of things that bother me.
For one; laptops - they have smaller screens. And secondly: my PC at work has a 17" screen - the same as every other computer in the
university, and I suspect most universities. On a 17" screen, 1024 resolution web sites don't fit. And that's with no vertical toolbars
installed in my browser window [any toolbars reduce your viewing area]. Whatever: it doesn't really matter who is right - it is
more specifically about 'text' width that I am concerned.
And then there is the issue of mobile devices such as smart phones and tablets [for more on
what mobile devices are see
section on my book's website.
The article goes on to say that as 1024 is the most popular width then all web sites should be built in that size.
Wellllll ... let's ignore the issue that as a marketer you never, ever, do anything that might put off a potential
rule of one]
- and apparently those 8.18% of punters who use 800 x 600 are to be discarded - and I'm not going to
comment of pages that only have limited textual content. I'm talking about pages that have text going across
Now here is the thing. It was proved a couple of centuries ago [in the print medium] that to make text readable
it should be 1.5 to 2.5 alphabets wide. In the Latin alphabet, this equates to 39 to 65 characters. If you think I
have made this up - consider that the first 'visual display units [VDUs] were built to be 640 pixels wide. Why? Number
picked out of a hat? Divisible by lots of other numbers? Age of the inventor divided by 10? Nope ... 65 characters =
And why do you think newspapers are divided into columns? Could it be to restrict the line width and so make them
easier to read? Remember my comment above about objectives? If your eyes start watering or you fall asleep whilst
trying to read a newspaper you're not going to buy it again as it has not met its objectives - providing you with news.
Ditto all the major web sites - why do you think the 'header | three columns | footer' design is so popular?
Anything to do with restricting the text lines below that magic 65 characters?
Ok, so the rule has relaxed a little in these days of advanced optical aids [glasses] - but try picking up any book,
of any size - it is rare that lines are longer than 100 characters, with most being closer to 65.
Hey ho .. I didn't say I could solve the problem [don't say put all text in narrow images - the reasons for not doing so
are manifold, not least that the search engines can't read them], but I did want to make you aware of the issue. There's
lots out there on the web on the subject - some agree with me, others don't - and there are also common-sense marketing
issues to consider [like large text for a web site that targets the elderley].
But - and it is a massive but - here comes the crunch. No matter how much thought I put into presenting my words
in the html of my pages, I cannot dictate what resolution settings your browser will have. Even at the most simplistic -
if you surf with your text size set at 'minimum' you will get more words on a line, 'maximum' fewer words. I can only go
for the best fit - and 'medium' is the default for all settings.
Just as an illustration, I've set up some pages that show how the same content appears with different html settings -
but before you go to them, a few final points:
- Whilst sites like mine are quite rare [ie all text], there are many examples of where a web page needs to
be mainly text - product descriptions, for example.
- Another consideration for 'information pages' [like this one] is that there is a strong possiblity that they will
be printed. Most printers have a default setting of 600 pixels. Yes, I know printer defaults can be changed, but how
many folk know how to do so? Try printing the sample pages I've put together.
- Fonts: Serif fonts like Times New Roman [they have little 'tails'] are easier to read in print but on a screen
the 'tails' tend to blend into each other. Therefore, sans serif fonts [like you are reading now] which have more specific
profiles are clearer when presented in pixels.
- Furthermore, serif fonts are smaller than sans serif - there is also a bigger gap between lines in sans serif
than serif [take a look at the same word document in Verdana and Times New Roman].
- Without fixing the size images can wander around the page - take a look at where the 'quote' appears in the samples. This might be
important if you want an image to appear next to certain text.
- I'm not a web designer - tell your designer how you want your text presented and have them sort out the
technical bits to your satisfaction.
Take a look at my sample pages: