SlideShare ist ein Scribd-Unternehmen logo
1 von 8

Typography on theWeb
Readability
 Refers to how easy it is to read a lot of text,
extended text, pages and pages of text. In printed
pages that are text heavy, a clean serif face is most
readable
Increasing the Readability
 Generally in print, we use a serif typeface for
extended text; on the screen
 Never set large amounts of text in bold, italic, all
caps, small caps, script, etc. Small amounts of these
are okay when necessary
Continued
 Avoid very long lines of text - text spread out
across the entire browser window is hard to
read. Long lines make it difficult for the
reader’s eye to find the beginning of the next
line, especially on a screen.
 On the Screen, shorter lines are better than
longer lines, but avoid very short lines of body
copy
 Make sure there’s enough contrast between
the type and the background
Legibility
 Refers to how easy it is to recognize short bursts of
text, such as headlines, buttons, signs, etc. In print
and on the screen, sans serif faces are more legible.
Increasing Legibility
 Generally, use a sans serif typeface
 Don’t set type in all caps, unless you really need
the rectangular look of an all-caps word
Cross-platform fonts
 Arial
 Arial Black
 Comic Sans
 Courier
 Georgia
 Impact
 Times New Roman
 Verdana
Underline
 On web pages underlines are important to identify
links
 Don’t underline text that is not a link
 If you take away an underline from a link make sure
that it is obviously a link
 (Don’t make people think too much)

Weitere ähnliche Inhalte

Ähnlich wie Typography for Web Design

VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
Bryan Chung
 
Chapter 2 : TEXT
Chapter 2 : TEXTChapter 2 : TEXT
Chapter 2 : TEXT
azira96
 
Working With Power Point3 30
Working With Power Point3 30Working With Power Point3 30
Working With Power Point3 30
nandav
 
Project 3 instructions
Project 3 instructionsProject 3 instructions
Project 3 instructions
eMoney003
 
Multimedia: Making it Happen - Text
Multimedia: Making it Happen - TextMultimedia: Making it Happen - Text
Multimedia: Making it Happen - Text
joelk
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
ssusercc3ff71
 

Ähnlich wie Typography for Web Design (20)

Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentation
 
VA1160 - Class 11
VA1160 - Class 11VA1160 - Class 11
VA1160 - Class 11
 
Presentation 1 asgardia
Presentation 1 asgardiaPresentation 1 asgardia
Presentation 1 asgardia
 
WSG CH08 - Typography
WSG CH08 - TypographyWSG CH08 - Typography
WSG CH08 - Typography
 
PPTs Dos And Donts
PPTs Dos And DontsPPTs Dos And Donts
PPTs Dos And Donts
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Chapter 2 : TEXT
Chapter 2 : TEXTChapter 2 : TEXT
Chapter 2 : TEXT
 
Working With Power Point3 30
Working With Power Point3 30Working With Power Point3 30
Working With Power Point3 30
 
Type standards[1]
Type standards[1]Type standards[1]
Type standards[1]
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Project 3 instructions
Project 3 instructionsProject 3 instructions
Project 3 instructions
 
Stem 22 text
Stem 22 textStem 22 text
Stem 22 text
 
Typography
TypographyTypography
Typography
 
POW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsPOW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design Basics
 
Multimedia: Making it Happen - Text
Multimedia: Making it Happen - TextMultimedia: Making it Happen - Text
Multimedia: Making it Happen - Text
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
Typography3 bh
Typography3 bhTypography3 bh
Typography3 bh
 
multimedia (2nd)
 multimedia (2nd) multimedia (2nd)
multimedia (2nd)
 
Typography manual2pages
Typography manual2pagesTypography manual2pages
Typography manual2pages
 
Describing type
Describing typeDescribing type
Describing type
 

Kürzlich hochgeladen

會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
中 央社
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff
17thcssbs2
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
中 央社
 

Kürzlich hochgeladen (20)

ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff
 
The Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptxThe Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptx
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
Discover the Dark Web .pdf InfosecTrain
Discover the Dark Web .pdf  InfosecTrainDiscover the Dark Web .pdf  InfosecTrain
Discover the Dark Web .pdf InfosecTrain
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPost Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
 
How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17
 
Championnat de France de Tennis de table/
Championnat de France de Tennis de table/Championnat de France de Tennis de table/
Championnat de France de Tennis de table/
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 

Typography for Web Design

  • 2. Readability  Refers to how easy it is to read a lot of text, extended text, pages and pages of text. In printed pages that are text heavy, a clean serif face is most readable
  • 3. Increasing the Readability  Generally in print, we use a serif typeface for extended text; on the screen  Never set large amounts of text in bold, italic, all caps, small caps, script, etc. Small amounts of these are okay when necessary
  • 4. Continued  Avoid very long lines of text - text spread out across the entire browser window is hard to read. Long lines make it difficult for the reader’s eye to find the beginning of the next line, especially on a screen.  On the Screen, shorter lines are better than longer lines, but avoid very short lines of body copy  Make sure there’s enough contrast between the type and the background
  • 5. Legibility  Refers to how easy it is to recognize short bursts of text, such as headlines, buttons, signs, etc. In print and on the screen, sans serif faces are more legible.
  • 6. Increasing Legibility  Generally, use a sans serif typeface  Don’t set type in all caps, unless you really need the rectangular look of an all-caps word
  • 7. Cross-platform fonts  Arial  Arial Black  Comic Sans  Courier  Georgia  Impact  Times New Roman  Verdana
  • 8. Underline  On web pages underlines are important to identify links  Don’t underline text that is not a link  If you take away an underline from a link make sure that it is obviously a link  (Don’t make people think too much)