SlideShare une entreprise Scribd logo
1  sur  8
Télécharger pour lire hors ligne
10 Typography Crimes to Avoid In Web Design
Getting your typography right is key to ensuring your client can get the best out
of your web design. As well as being aesthetically pleasing your choice of type
needs to be functional. Choosing the most elaborate font is no good if the
content can’t be read.
Typography crimes are common and you’ve probably come across many of them
before, in fact, you’ve probably committed some. Below we’re looking at the top
ten and how you can avoid them.
Follow the Trend
There are fonts which are universally known to be unpopular such as
Comic Sans and Brush Script so your web designs should naturally avoid
these. The most common font on the web is Helvetica, some would
consider it overused and there are other alternatives such as Times New
Roman and Myriad Pro which do just as good a job. When putting
together your web design you need to put thought into your chosen font.
Research and find a font which suits your client’s image.
Use Web Fonts
You may have found the perfect font, it suits your client perfectly but you
need to pay to download it. It simply isn’t worth the effort. You should
always use one of the many standard web fonts to ensure the end-user
will have said font installed on their PC. What’s the point in picking a
perfect font if no one but you can view it?
Pick and Choose Selectively
There are thousands of fonts to choose from and it can be easy to get
carried away. There are some unfortunate websites where a different font
is used for the Heading, Subheading, Body, Bullet Points. It looks
unprofessional and it’s important you pick a set of fonts for your project
and stick to it. We’d recommend 2 to 3 for your headings and body and
perhaps a third choice for the subheadings. Simplicity is the key to good
typography.
One for Body, One for Headings
There are fonts which have been designed to be used for titles and
headings whilst others are meant for body text. The standard option is to
choose a bolder, more noticeable typeface for headings, usually a sans-
serif or decorative font. Serif fonts are the ideal option for body text as
they’re designed to look and read better in bulk.
Stick to the Rules; Heading, Subheading, Body
Each segment of text in your web design relates to the next. You need to
consider them all as a whole. The rules are simple. Provide a clear
heading, a subheading or subheadings if necessary and body text. Each
should be clearly indicated through the chosen font and additional signals
such as bold, italics and underline.
Don’t Mess with the Font
Fonts are designed by professionals, the typographer knows what they’re
doing so if you start stretching the size of a font to make it fit into your
designated space, you’re going to have a problem. If you need to simply
switch the font, some such as Helvetica have condensed alternatives if you
need to squeeze them into a tight spot.
Don’t Mix your Signals
Signals such as italics, bold and all caps are used to emphasize on
important parts of your content. However, you can’t use too many of them
or the user won’t have a clue what’s important and what isn’t. Most web
development and web design projects will only need one signal used
consistently.
Choose Colours Creatively
Working in web design you should already have a keen understanding of
what colour schemes work and which don’t. Colour has the potential to
make or break your text. You need to ensure the contrast between text
and the background colour is high, otherwise the design won’t be
readable. Choose colours that complement each other and avoid dark on
dark or light on light.
Don’t Justify for the sake of it
Aligning the body of your text so it looks aesthetically pleasing can be hard
but the answer isn’t simply to justify every time. Poor justification results
in what are known as ‘rivers’ of white space which run through the middle
of the text and make it hard to read. You need to try and achieve good or
clean rags instead.
Rags are what occur when you don’t justify the text. The edge of each
paragraph will look slightly ragged and you need to avoid it looking
completely messy or your design won’t look fresh and inviting.
Avoid Orphans and Windows
That statement sounds strange out of context but when working with text
and typography, it’s pretty straightforward. Orphans are single worlds
which appear on their own, taking up a whole line. They’re messy and
should be avoided at all costs.
Similarly, windows refer to a single line from a paragraph carrying over to
a new column. It looks messy and can be hard to read when the end of a
section is carried over to the next.
Conclusion
The main thing with typography is to play around a bit, do your research
and choose fonts and styles which match the brief without being
unreadable and ruining the end-user experience.
Thanks for reading
Do visit our Digital Agency’s Blog for more interesting stuff.

Contenu connexe

Dernier

Inspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxInspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxShubham Rawat
 
integrity in personal relationship (1).pdf
integrity in personal relationship (1).pdfintegrity in personal relationship (1).pdf
integrity in personal relationship (1).pdfAmitRout25
 
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...JeylaisaManabat1
 
Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?
Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?
Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?Mikko Kangassalo
 
Spiritual Life Quote from Shiva Negi
Spiritual Life Quote from Shiva Negi Spiritual Life Quote from Shiva Negi
Spiritual Life Quote from Shiva Negi OneDay18
 
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan
 
南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证kbdhl05e
 
(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)oannq
 

Dernier (8)

Inspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptxInspiring Through Words Power of Inspiration.pptx
Inspiring Through Words Power of Inspiration.pptx
 
integrity in personal relationship (1).pdf
integrity in personal relationship (1).pdfintegrity in personal relationship (1).pdf
integrity in personal relationship (1).pdf
 
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
Module-2-Lesson-2-COMMUNICATION-AIDS-AND-STRATEGIES-USING-TOOLS-OF-TECHNOLOGY...
 
Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?
Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?
Virtue ethics & Effective Altruism: What can EA learn from virtue ethics?
 
Spiritual Life Quote from Shiva Negi
Spiritual Life Quote from Shiva Negi Spiritual Life Quote from Shiva Negi
Spiritual Life Quote from Shiva Negi
 
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
Authentic No 1 Amil Baba In Pakistan Amil Baba In Faisalabad Amil Baba In Kar...
 
南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证南新罕布什尔大学毕业证学位证成绩单-学历认证
南新罕布什尔大学毕业证学位证成绩单-学历认证
 
(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)(南达科他州立大学毕业证学位证成绩单-永久存档)
(南达科他州立大学毕业证学位证成绩单-永久存档)
 

En vedette

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 

En vedette (20)

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 

10 typography crimes to avoid in web design

  • 1. 10 Typography Crimes to Avoid In Web Design Getting your typography right is key to ensuring your client can get the best out of your web design. As well as being aesthetically pleasing your choice of type needs to be functional. Choosing the most elaborate font is no good if the content can’t be read. Typography crimes are common and you’ve probably come across many of them before, in fact, you’ve probably committed some. Below we’re looking at the top ten and how you can avoid them.
  • 2. Follow the Trend There are fonts which are universally known to be unpopular such as Comic Sans and Brush Script so your web designs should naturally avoid these. The most common font on the web is Helvetica, some would consider it overused and there are other alternatives such as Times New Roman and Myriad Pro which do just as good a job. When putting together your web design you need to put thought into your chosen font. Research and find a font which suits your client’s image. Use Web Fonts You may have found the perfect font, it suits your client perfectly but you need to pay to download it. It simply isn’t worth the effort. You should always use one of the many standard web fonts to ensure the end-user will have said font installed on their PC. What’s the point in picking a perfect font if no one but you can view it?
  • 3. Pick and Choose Selectively There are thousands of fonts to choose from and it can be easy to get carried away. There are some unfortunate websites where a different font is used for the Heading, Subheading, Body, Bullet Points. It looks unprofessional and it’s important you pick a set of fonts for your project and stick to it. We’d recommend 2 to 3 for your headings and body and perhaps a third choice for the subheadings. Simplicity is the key to good typography. One for Body, One for Headings There are fonts which have been designed to be used for titles and headings whilst others are meant for body text. The standard option is to choose a bolder, more noticeable typeface for headings, usually a sans- serif or decorative font. Serif fonts are the ideal option for body text as they’re designed to look and read better in bulk.
  • 4. Stick to the Rules; Heading, Subheading, Body Each segment of text in your web design relates to the next. You need to consider them all as a whole. The rules are simple. Provide a clear heading, a subheading or subheadings if necessary and body text. Each should be clearly indicated through the chosen font and additional signals such as bold, italics and underline. Don’t Mess with the Font Fonts are designed by professionals, the typographer knows what they’re doing so if you start stretching the size of a font to make it fit into your designated space, you’re going to have a problem. If you need to simply switch the font, some such as Helvetica have condensed alternatives if you need to squeeze them into a tight spot.
  • 5. Don’t Mix your Signals Signals such as italics, bold and all caps are used to emphasize on important parts of your content. However, you can’t use too many of them or the user won’t have a clue what’s important and what isn’t. Most web development and web design projects will only need one signal used consistently. Choose Colours Creatively Working in web design you should already have a keen understanding of what colour schemes work and which don’t. Colour has the potential to make or break your text. You need to ensure the contrast between text and the background colour is high, otherwise the design won’t be readable. Choose colours that complement each other and avoid dark on dark or light on light.
  • 6. Don’t Justify for the sake of it Aligning the body of your text so it looks aesthetically pleasing can be hard but the answer isn’t simply to justify every time. Poor justification results in what are known as ‘rivers’ of white space which run through the middle of the text and make it hard to read. You need to try and achieve good or clean rags instead. Rags are what occur when you don’t justify the text. The edge of each paragraph will look slightly ragged and you need to avoid it looking completely messy or your design won’t look fresh and inviting. Avoid Orphans and Windows That statement sounds strange out of context but when working with text and typography, it’s pretty straightforward. Orphans are single worlds which appear on their own, taking up a whole line. They’re messy and should be avoided at all costs. Similarly, windows refer to a single line from a paragraph carrying over to a new column. It looks messy and can be hard to read when the end of a section is carried over to the next.
  • 7. Conclusion The main thing with typography is to play around a bit, do your research and choose fonts and styles which match the brief without being unreadable and ruining the end-user experience.
  • 8. Thanks for reading Do visit our Digital Agency’s Blog for more interesting stuff.