20 replies [Last post]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Further to a thread hijack by Triumph and myself ... Laughing out loud

If you're interested in the topic you may find usability news a worthwhile read. In particular, these articles:

A Comparison of Popular Online Fonts: Which Size and Type is Best?
A Comparison of Popular Online Fonts: Which is Best and When?
Reading Online Text: A Comparison of Four White Space Layouts

There are other articles on layout and columnar presentation of text.

Be aware that often the number of participants in their studies are very small, e.g. 20-30 and that as technology improves and gets cheaper old conclusions are less reliable. However, in a quick search I wasn't able to find any other objective discussions - which makes these authoratative Smile.

Anonymous
Anonymous's picture
Guru

Fonts: Serif, Sans-Serif and size

New sig. Laughing out loud

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fonts: Serif, Sans-Serif and size

Misquote :!:

You missed my smiley.

Tongue

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Fonts: Serif, Sans-Serif and size

A handy tool, if you don't have it already bookmarked, is Typetester — Compare fonts for the screen.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fonts: Serif, Sans-Serif and size

Thanks Gary.

Would be interesting to hear from OS/X & Linux users as to what they consider to their best/favourite serif and sans-serif fonts.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Fonts: Serif, Sans-Serif and size

Useful tool Gary, cheers.

Good reading on those font test links Chris.

Been pondering fonts and text recently, have never paid enough attention to the subject. Only conclusion so far is to confirm that I really do not like Trebuchet MS at all it's not the good font it's commonly held to be, and that Verdana seems to be the best of the bunch for san-serif.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 14 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Fonts: Serif, Sans-Serif and size

I'd like to suggest a book I picked up from a charity shop last week - Stop Stealing Sheep. It's an awesome read, all about the design and layout using print and fonts, what to use, when, etc.

It's geared more towards the rigid layout of print, but can be used for web design - I've learnt a lot from it.

Verschwindende wrote:
  • CSS doesn't make pies

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fonts: Serif, Sans-Serif and size

From a purely aesthetic point of view (well, and with legibility in mind as well), Lucida is nice on OS X. Unfortunately, it's only decent on XP if ClearType is on (which most XP users don't even know it exists!)

I'll stick with Verdana, though can't stand it for heading sizes. Arial will always be the Helvetica of the web (unless I specify Helvetica for us Mac users, then Helvetica is Helvetica for the web :? )

Georgia is a fantastic typeface, both for print and for the web. However, it is very distinct and can be easily misused.

As for Erik Speikermann's Stop Stealing Sheep, it's okay... a bit basic.

If you want a hardcore typography book, you can't go wrong with: Finer Points in the Spacing and Arrangement of Type, by Geoffrey Dowding. Is a classic.

Cheers for the link Chris! Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fonts: Serif, Sans-Serif and size

One result shows Comic Sans being preferred by the users than Times... where did they get these weirdos! Evil :oops:

The next sentence is true. The previous sentence is false. Discuss...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fonts: Serif, Sans-Serif and size

You never quite know the context when they make short but sweeping statements.

On an e-card is times more appropriate or comic?
On a bank website?

Quote:
Furthermore, Courier and Times were perceived as being the most business-like, whereas Comic was perceived as being the most fun and youthful.

I guess that helps.

From reading those links and others at that site I came away with - use Verdana or Georgia for main text. Following on from the other thread by Triumph/Hugo/kk5st (which I couldn't locate), Georgia is probably best for long prose style pages - where serif fonts do better for comprehension and Georgia does no worse for attractiveness. In other settings it didn't seem to make much difference what you used - except at small sizes where san-serif fonts are perceived to be more legible.

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fonts: Serif, Sans-Serif and size

The next sentence is true. The previous sentence is false. Discuss...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Fonts: Serif, Sans-Serif and size

Was that the thread that I mentioned that I thought that serif fonts purpose was in rendering large blocks of smallish print legible due to the trick of causing the brain to lock on to the serif flicks to draw the eye along the line, it's funny how serif fonts are largely never used on the web especially where large blocks of text are concerned.

I do like Georgia yet always pull back from using it :?

Out of interest does anyone know the name of the guy that produced Verdana & Georgia? fascinating guy he's responsible for producing nearly all the worlds most famous type faces such as Vogue, New York Times, and everything else one has ever set eyes on, learnt his graft the traditional way and when the web came along decided that a proper set of screen fonts were required that worked on all levels.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fonts: Serif, Sans-Serif and size

Yes, serif fonts are vastly superior for legibility, as you suggest, because of their serifs and the way the mind comprehends word-forms when reading at speed.

However, sans-serifs are easier to comprehend in for single or few words. Hence, signing and instructions are better served in sans-serif.

We very rarely read web text the way we do with lengthy print text, we are more likely to scan quickly for the required information, analogous to the comprehension of a sign or instruction. Add in the fact that computer systems are best suited to sans-serif. Sans-serifs are basically more legible on a computer screen due to the restriction of the pixel, both now, and certainly in the past. Even on XP without ClearType serif fonts look poor. The same obviously for the web.

Since OS X and it's system level type-anti-aliasing, serifs look every bit as clean and legible (well, almost). However, perhaps it's the nature of the computer-using experience that conducts that we dogmatically select sans-serifs most of the time (a simile to the very system we look at each day).

The next sentence is true. The previous sentence is false. Discuss...

Anonymous
Anonymous's picture
Guru

Fonts: Serif, Sans-Serif and size

Quit spelling sans-serif wrong or It will start showing up in your css. Wink Laughing out loud

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fonts: Serif, Sans-Serif and size

Its those two sses close together. Its either san serif or a sans erif. At least I now have capitals at the start of my paragraphs.

Maybe all will be well when I get my Xmas present from Larmyia.

Laughing out loud

Anonymous
Anonymous's picture
Guru

Fonts: Serif, Sans-Serif and size

Chris..S wrote:
Maybe all will be well when I get my Xmas present from Larmyia.
Ooh, what is it??? Laughing out loud

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Fonts: Serif, Sans-Serif and size

Definitely sans serif... there, I've dropped the hyphen. Wink

The next sentence is true. The previous sentence is false. Discuss...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fonts: Serif, Sans-Serif and size

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Fonts: Serif, Sans-Serif and size

Good point about pixel rendering co2 a small square shape is not best suited to representing small squiggly lines, which is why the sans-serif Wink font is preferred.

I'm awaiting eagerly my promised Christmas present from Larmyia as well; thing is that I still need it whereas Chris has blown it by getting his act together with his caps.

I deliberately left my spelling error in place to see out of interest who was first to mention it , oh so predictable Triumph :roll: Smile anyway it never gets to be used, being as it's just a fall back and I list 2 dozen fonts just to be on the safe side.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Fonts: Serif, Sans-Serif and size

Laughing out loud Is it English English Grammar or American English Grammar? Quite different birds, no?

Anonymous
Anonymous's picture
Guru

Fonts: Serif, Sans-Serif and size

Hugo wrote:
I deliberately left my spelling error in place to see out of interest who was first to mention it , oh so predictable Triumph :roll: Smile