legibility rules

Ass 1b (a) Legibility RulesElaborated by Tomáš Píchal

LEGIBILITY RULES

• LEgibiLiTy RESEARch

• LEgibiLiTy RULES

• LEgibiLiTy TASkS

TaBLE of conTEnTs

LEGIBILITY RESEARch While designing book, magazine, leaflet or webpage designers should respect some typographical rules which help to make page layout pleasant for eye easy to remember and get main essence of displayed information. Because graphic design is mainly about communicating some information in appropiate way to its receiver, fontographers always tried to set some basic rules to help achieve this goal. Factors as page size, linelenght, typeface, leading and tracking are those which play main role while designing and structuring information along the page. Following lines describe main factors which influence how final design will look like.

While designing printed or digital documents design-ers should keep in mind that legibility is ease with the receiver can read some part of the text. Legibility can be called some visual perception comparing with readability which is more like about comprehension of what was communicated. Well done document can be read with ease and without problems. i will try to de-fine what this problems could be and after that i will mention rules which we were taught during classes how to prevent this problems with legibility to appear in our documents.A) Lot of people complain that they cant read the text well because it seems like the text is so small or is not wellaligned or they feel some other difficulties which disturb them to absorb well the information. To create legible document we have to keep in mind these topics. Text should be well struc-tured - it means to have enought contrast between the headlines, subheadlines, bodytext and other elements like captions, footnotes etc.Text should have appropi-ate justification - leading and kerning. Leading is the distance in between each lines. if there is small lead-ing the huge and longer texts tend to be difficult for reader to keep the lines - simply is vertical text justi-fication. kerning is vertical letter or text justification and it is nowadays done mainly by software, cheap typefaces are known for bad kerning and its mostly visible when we create headlines. here we have to use manual kerning where we put accurate spacing in be-tween each letters.Amateurs usually don’t know what kering is but they inmediatelly recognize when some word si badly kerned - it seems to be just weired.

Most of the people know basic differences of serif and sans serif typefaces. Screenbased sans serif fonts tends to be better in smaller point sizes than serif fonts which are good for print media but for screen users could be looked too complicated. The main difference

is in x-height and counters shape. Sans serif fonts have generally bigger counters and more coherent stems than serif fonts. X-height is probably most important factor which affects legibility. Ascenders helps to distinguish characters however typefaces with lon-ger ascenders can be slower to read - generally serif typefaces which have small x-height. Sans serif fonts are generally considered to be more legible thanks to bigger x-height and shorter ascenders. it important so toadjust leading and linelenght to the x-height of typeface.

Another important factor is contrast. As each typeface is designed for unique purpose and differs to others it also have different stroke weight and cover differ-ent amount of page surface. Again sans serif typefaces tends to have thicker strokes and cover more surface of page than sans-serif fonts though can cause prob-lems for longer text passages where serif fonts helps better to reader to keep the line and make page more spacy using same leading as sans serif fonts. contrast is important as well for cases when typeface is setted on colourful or dark background.here is good to use typefaces which has thicker strokes because those can easily pop-up from dark background than fonts which has weak strokes and provide low contrast as reading. This is important when we design some out-door navigation systems like on highway, railway or whateverwhich needs to be legible from distance or during we move.

but back to spreads. Another important factor which affects legibility is line lenght. There exist 2 rules which solve somehow the relation between line lenght and legibility. There exist 2 rules to achieve this goal: Rule 1: two and half of english alphabets makes the optimum line lenght (65 character spaces and comas

InTRoDUcTIon

inl.) Rule 2: 18-24 picas is optimum line lenght +- 21, 21x4.23mm -87mm. Using this two rules we can achieve optimal line lenght on our page so the reader is not tired by keeping eye on long lines orskipping quickly from one line to another. This is for reader really important.

Factor mentioned above is related to another factor and it is the reading pattern which the receiver uses as we communicate him some information or message. From the web people are used just to skip and browse fast the pages and this way of getting information is important aswell in printed medias. Text passages are getting shorter and content is being splitted to smaller passages using headlines, subheadlines, whitespaces and text and paragraph indents. With all this works together as invisible engine the grid system which can literally push the reader the way we want. grid system works like the tempo in music, it provides some order where needed or make the page nice and clean, depends how we use it. Thanks to grid we can keep ideal line lenght as braking the bodytext into columns or smaller chunks. grid helps to create space for image content and illustrations or other elements which is commonly used in documents and increase the legibility aswell.

As final i text aligment and text justification as this is quite interesting topic and factor which affect legibil-ity especially when we have long text passages. having the well aligned paragraph or headline can increase the semantic of our document and though increase legibility. For western cultures using latin is common left aligned paragraph providing best results when reading text passages. however a lot of people uses texteditors and uses full justification which creates lot of extra spaces and can be looked weired in many cases. Right aligned text passages are difficult to read but have its own role when designing intros headlines or contents and tables. Using different text aligment can help to designer provide dynamic and well struc-tured documents.

LEGIBILITY TASkS Following pages display different typographical rules and cases mentioned in research part. During lesson we tried to apply certain criteria to research about way they work. Different tasks cover problematics of legibility and main factors which help designers to arrange font blocks along the page in pleasant and functional way.

• SERiF / SANS SERiF

• X-hEighT, FoNT SizE

• LiNE LENghT, R1, R2

• LEAdiNg, WoRd SPAciNg

• TRAckiNg

• NEgATivE TyPE

Times New Roman 10/12

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

Garamond Pro 10/12


Franklin Gothic Medium 10/12 Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

Verdana Regular 10/12 Some typefaces such as Times, originally de-signed for the London Times newspaper, or Fu-tura, designed as a letterpress (raised plate) type for printing on paper, were intended for the print-ed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differ-ences don’t matter as muh.

X-HEIGHT / fonT sIZE In this task we researched about legibility depending on used type, its x-height, size. We can see 4 boxes where 2 serif and 2 sans serif fonts are being used to display differ-ences. Serif fonts (on paper) are in this size more legible, because serifs helps eye to keep the lines. Sans serif Verdana is hard to read on paper but easy on screen. On the other page there is compared x-height of compared fontfaces. We can see that serif fonts have smaller x-height. We tried to do same experiment in small sizes 6/8pt where competition winner is Verdana. By this way we proved that sans serif fonts are more legible in very small sizes and computer screens. Serfi fonts are hard to read in very small sizes where serif start to be element whichinstead of help makes reading harder and small counters doesn’t help reading at all.

xxxxTi

mes

New

Rom

an

Ado

be g

aram

ond

Pro

Fran

klin

got

hic

Verd

ana

Times New Roman 6/8


Garamond Pro 6/8


Franklin Gothic Medium 6/8 Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, de-signed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer moni-tor. In larger sizes, these differences don’t matter as much.

Verdana Regular 6/8 Some typefaces such as Times, originally designed for the London Times newspa-per, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as muh.

Rule 1: 2 and half english alphabets makes the optimum linelenght (65 character spaces and comas incl.)Rule 2: 18-24 picas is optimum linelenght +- 21, 21x4.23mm - 87mm

LInELEnGHT

Linelenght size affects legibility. There exist 2 rules which are being used to arrange lazoutwell in terms of ideal lenght. On following 3 pages we compare those 2 rules in terms of effectivity. We can see that R2 is fixed so to use it for sans serif font in different sizes can be little bit tricky on the other hand R1 is more flexible (size, fontface).

21pi

cas R

2R

1








Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to opti-mize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

21pi

cas R

2

R1

VERDANA 10/12

Some typefaces such as Times, origi-nally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Geor-gia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are de-veloped to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

Some typefaces such as Times, originally de-signed for the London Times newspaper, or Fu-tura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differ-ences don’t matter as much.

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a com-puter monitor. In larger sizes, these differ-ences don’t matter as much.

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on pa-per, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these dif-ferences don’t matter as much.

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letter-press (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize vis-ibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

R1

21pi

cas R

2

Adobe Garamond Pro 10/12

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, de-signed as a letterpress (raised plate) type for print-ing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.







VERDANA 10/12

Some typefaces such as Times, origi-nally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Geor-gia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are de-veloped to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, de-signed as a letterpress (raised plate) type for print-ing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

Franklin Gothic Medium 10/12

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolu-tion of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

LEaDInG

Leading is vertical typespacing between separate lines of type which. On page 16. we set the size/leding 10/12. All boxes are legible except Verdana (on paper) which with its great x-height doesn’t leave much space between lines. On page 17. leading for very short line lenght. On page 18/19 there we researched about rule which says that typespacing for long lines should be bigger, so eye can easily trace separate lines. Sans serif fonts needs more leading than serif fonts.


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer moni-tor. In larger sizes, these differ-ences don’t matter as much.

VERDANA 10/12

Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are devel-oped to optimize visibility in smaller sizes on a com-puter monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the Lon-don Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolu-tion of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the Lon-don Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to op-timize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.



VERDANA 10/12

Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on pa-per, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these type-faces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Geor-gia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, de-signed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer moni-tor. In larger sizes, these differences don’t matter as much.



VERDANA 10/14



Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Geor-gia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.



TRacKInG

Tracking is horizontal typespacing which is used for long line lenghts to increase legibility. On following page we compare positive and negative tracking how it affects legibilityof long lines. Especially for typeface with large counters and thick stems and for is impor-tant to care about use of tracking. Last spread display research about how tracking affects legibility in short line lenghts. There on contrary can be positive tracking obstacle while increasing legibility, so we use rather negative tracking to make text are more coherent.

Times New Roman 10/14 +5

Some typefaces such as Times, originally designed for the London Times ne

wspaper, or Futura, designed as a letterpress (raised plate) type for printing

on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the

lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in

smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

Times New Roman 10/14 -5

Some typefaces such as Times, originally designed for the London Times ne

wspaper, or Futura, designed as a letterpress (raised plate) type for printing

on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the

lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in


VERDANA 10/16 +5

Some typefaces such as Times, originally designed for the London Times newspa-

per, or Futura, designed as a letterpress (raised plate) type for printing on paper,

were intended for the printed page. Others such as Georgia and Verdana were de-

signed for the lower resolution of text on a screen. The shapes of these typefaces

are developed to optimize visibility in smaller sizes on a computer monitor.

In larger sizes, these differences don’t matter as much.

VERDANA 10/16 -5

Some typefaces such as Times, originally designed for the London Times newspaper,

or Futura, designed as a letterpress (raised plate) type for printing on paper, were

intended for the printed page. Others such as Georgia and Verdana were designed

for the lower resolution of text on a screen. The shapes of these typefaces are de-

veloped to optimize visibility in smaller sizes on a computer monitor.


Adobe Garamond Pro 10/12 +5




for the lower resolution of text on a screen. The shapes of these typefaces are

developed to optimize visibility in smaller sizes on a computer monitor.


Adobe Garamond Pro 10/12 -5




for the lower resolution of text on a screen. The shapes of these typefaces are

developed to optimize visibility in smaller sizes on a computer monitor.


Franklin Gothic Medium 10/12 +5

Some typefaces such as Times, originally designed for the London Times

newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were

intended for the printed page. Others such as Georgia and Verdana were designed for the lower

resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in


Franklin Gothic Medium 10/12 -5

Some typefaces such as Times, originally designed for the London Times

newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were in-

tended for the printed page. Others such as Georgia and Verdana were designed for the lower resolu-

tion of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller

sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

VERDANA 10/12

Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer moni-tor. In larger sizes, these differences don’t matter as much.

VERDANA 10/12

Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are devel-oped to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

VERDANA 10/12

Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are devel-oped to optimize visibility in smaller sizes on a com-puter monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the Lon-don Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these type-faces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were de-signed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.


Some typefaces such as Times, originally designed for the Lon-don Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to op-timize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

-5 0 5


Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, de-signed as a letterpress (raised plate) type for printing on paper, were in-tended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.






Some typefaces such as Times, origi-nally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer moni-tor. In larger sizes, these differences don’t matter as much.





-5 0 5

nEGaTIVE TYPE

All along the research I am using this black box with white type within it. Now comes thetime to research more about use of negative type. Its clear that black background need some special treatment while designing some layout. This laste spread display howimportant is to use leading and tracking in this conditions. Black gackground makes type to dissapear (it makes human eye to receive less contrast) to increase that contrast and legibility we have to always use thick typeface and with bigger leading, tracking and size especially while great line lenght. Sans serif typefaces are more convenient for this tasks.

Times New Roman 10/14/10

Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Ver-dana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differ-ences don’t matter as much.


Some typefaces such as Times, originally designed for the London Times news-paper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are devel-oped to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don’t matter as much.

Verdana 10/12/10

Some typefaces such as Times, originally designed for the Lon-don Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were in-tended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these type-faces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these dif-ferences don’t matter as much.

Franklin Gothic Medium 12/17,28/10


conslusion

All of these tasks helped me to realize more about legibility and factors which makes text legible. If there would be more time and space It would begood to research more about this legibility rules. Really interesting would be to research more about tracking not just for static text but while motionand other factors which make text or word legible while moving.

Resources: www.sil.org/~gaultney/balan-

legecon.pdf

www.concep3.com/Grids

www.paratype.com

www.fonts.com

legibility rules

Documents

sans serif typefaces

legibility ruleselaborated

screenbased sans serif

text justification

basic differences of

basic rules

small xheight

typographical rules