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

Ä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

Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfDr Vijay Vishwakarma
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 

Kürzlich hochgeladen (20)

Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 

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)