Monday 24 February 2014

Design Principles Research

How does point size effect legibility and readability?
Legibility is concerned with how easy it is to distinguish individual letters. The simpler a type design is, the more legible it is. So why do less-than-legible typefaces even exist? Because typeface designers love to create unique and distinctive designs, of course. While it is generally better to always choose a legible type, there are times when distinctiveness may be more important than legibility. For example, when selecting a font for a unique and distinctive company logo.

There are three design features that make a typeface legible:
1. Large X-Height:
A large x-height increases the negative space within each letter. This makes it’s shape much more discernable.

2. Large Counters:
The negative space within a letter is called a counter. When a typeface has large counters, it is easier to distinguish the shape of each individual letter.

3. Simple Letterforms:
The simpler a letterform, the more legible it is. Sans serif types are generally more legible than their serif counterparts because they do not have any serifs interfering with the shapes of the letters. However, this does not mean that sans serifs are necessarily easier to READ in text. Actually, serif types are generally considered MORE readable. The exception to this rule is on-screen. Because of on-screen distortion, sans serif is the best choice for readability.

Some common typefaces which meet these three criteria are: Helvetica, Novarese, New Century Schoolbook, Cheltenham, Times Roman, Gill Sans, and Baskerville.

Readability refers to the ease with which a reader can scan over paragraphs of type. In other words, how easy it is to read! While legibility is basically dependent on the typeface design, readability is dependent on the manipulation or handling of the type. A highly legible typeface can be made unreadable by poor typographic design. Factors which affect readability include: line lengths, point size, leading, typeface selection, spacing, type alignment, and background.

Avoid Capitals
Ninety-five percent of what we read is in lowercase letters. Not only are we much more used to reading them, but they also assist us because they create a recognizable shape (coastline). Words in capital letters have no distinctive shape (or coastline).

Use a size suitable for your audience. Ideal text type size ranges from 9-12 point depending on the x-height. Remember older people may need a larger point size 
to read.

Don't use a too long or too short line length.
Very short or long lines disrupt the reader’s rhythm, making it harder to read. Very short lines run the risk of creating rivers if justified alignments used. If long lines are unavoidable, extra leading can help offset the problem. Very long lines disrupt reading. When the eyes get tired, they are no longer able to find the beginning of the next line of type. An ideal line length can be estimated by doubling the point size. For instance, 12 point type should have a line length of 24 picas (or four inches). Generally, shorter lines should be used for typefaces with small x-heights and thick/thin designs, and also bold and italic fonts. Usually a serif typeface can tolerate a longer line than a sans serif.

Create equal word spacing.
If word spaces are too large, they break the lines up into separate elements and disrupt reading. This is especially true if justified type is used on a short line length. If the word spaces are too small, it becomes difficult to distinguish each separate word. A good trick to use to check word spacing is to turn the page upside down and squint at it. Excessively large word spaces will stand out. Be especially careful with condensed and expanded fonts, reversed type, and vertical, narrow typefaces (like Bodoni).

Create even letter spacing.
When letters are correctly spaced, a paragraph of type takes on an even color. From a distance it should look like a screened gray block. The shade of gray will depend on the heaviness of the typeface. Any interference with normal letter spacing is very hard to read. If the letter spacing is uneven, darker spots stand out in places against the gray color. Often, tight tracking will create uneven letter spacing.

Think about the background.
An important factor in the readability of type is the background on which it is placed. This includes not only any printed blocks of color, screens or black backgrounds, but also the kind of paper the type appears on. When selecting a typeface, think carefully about what kind of background it will be placed on. For instance, a fine, light typeface will not stand out well on black or screened background, or on textured/glossy paper. To avoid readability problems, never place text type on black or screened backgrounds. It’s too hard to read!

The minimum size would depend on the font, the weight, and the colours involved. Solid 100% K text on a white or light background is best. If you're using white text, it will likely fill in if the point size is too small, especially if the surrounding colour is using more than one ink. If you're using a coloured text that uses multiple inks, you run the risk of bad registration causing your text to look blurry.

There are actually two types of type.

  1. Text Type is designed to be legible and readable across a variety of sizes
  2. Display Type is designed to attract attention and pull the reader into the text. It can be more elaborate, expressive, and have a stylish look.
Font Size
Some fonts read better when small and others when large. Verdana for example is designed slightly larger than other fonts making it very readable at small sizes and explains why it’s so often used in online body copy.

The question you probably most want to know is what size should you use. There isn’t a simple answer. Compare the following two fonts.
This is 12px Verdana

This is 12px Arial

Same 12px, but a different size.

Somewhere around 10pt or 11pt is ideal for reading in print. Of course there’s no such thing as a point online even if css lets us set fonts in pt sizes. There isn’t an exact conversion between px and pt either, however using the conversion chart at Reed Design we see that 10 to 11pt corresponds to 13 to 15 px, probably a bit larger than what many sites use.

You also need to take your audience into account. I can tell you that the older I get, the larger I want to see a font-size set.

12px is a common setting for online body copy. If you go below this be prepared for people to comment how small your font is. At 14px you’ll probably start getting comments about your large font. 12px to 14 px though is probably a good range to choose for body copy, though again it will depend on other factors.

For things like captions you would usually go a little smaller and naturally for headings you would typically go bigger.

One last point about font sizes is the idea of scaling, which can be used to develop a hierarchy in your type. The basic idea is to choose font sizes that relate to one another for different elements in your design.

72.27 points make one inch. A point is 0.3515 milimeters. A point is neither metric 
or imperial.

Microsoft Word uses exactly 72 points to the inch. This is known as a "Postscript point" since it was the first computer design system to use the 72-per-inch convention. Postscript points aren’t technically typesetting points; i.e. two typesetters, one using PS points and the other using real points, will discover that one's fonts are slightly too big and the other's points slightly too small. Slightly means the round-off error is insignificant for all but the largest fonts.

Tex and METAFONT use 72.27 points to the inch. They support other units, like Didot point used in European typography. One Didot point is equal to 1238/1157 points.

A pica is twelve points, or about one-sixth of an inch, or about four millimeters. 12 Didot points are one cicero.

Books normally use a point size of 10.



What are the main arguments for the superior readability of sans serif vs 
serif fonts?



Arguments in favor of serif typefaces

· Serifs are used to guide the horizontal “flow” of the eyes; The lack of serifs is said to contribute to a vertical stress in sans serifs, which is supposed to compete with the horizontal flow of reading
· Serifs are used to increase spacing between letters and words to aid legibility
· Serifs are used to increase contrast (and irregularity) between different letters to improve identification 

Arguments in favor of sans serif typefaces

· Sans serifs are better on the web

· Sans serif is better at small sizes. Sans serif fonts survive reproduction and smearing because of their simple forms
· Sans serif is better for children learning to read







No comments:

Post a Comment