Questions? (877) 643-7244
FutureNow Post
Wednesday, Nov. 7, 2012 at 8:27 am

Basic Typography Rules for a Well Designed Website

By Mariel Bacci
November 7th, 2012

Why Copy Needs to Look Good

Ever wonder why some websites look so clean, professional and organized, while others look disorganized and messy for no apparent reason?  The reason is often because of the typography.   If you hire a trained designer for your site, one of their most basic operations is to make sure the way type is displayed on your site looks polished and professional.  There are countless books and articles about the rules and history of typography, but today we are going to give you the bread and butter.  If you cannot hire a professional designer, the following typographic techniques absolutely need to be implemented on your site.  Follow these simple rules to make your site look cleaner, and increase readability.

Font Size

The body copy on your site should be size 11, minimum.  Size 12 will please even more guests.

Font Color and Background

Black text on a white background is the only typography color combination that will work for you 100% of the time. The title of your page is not required to be black text on a white background.  The body of your text absolutely must be black text on a white background or include controlled use of very light shaded background to help certain copy elements stand out on the page.

Title and Body Font

Title Font Should be San Serif to catch the attention of the visitor

Body copy should be a serif font to improve readability and decrease eye strain.

Line Height

Proper line height for professional web typography is 7 points more than the text height in your body copy.  If you use size 11 for your text height, line height should be 18.  If your text height is 13, your line height should be 20.

Use a Grid

Your site should be designed on a grid, and typography is no exception.  Use grid lines to break up and format text.  Use columns as much as possible as they greatly increase readability (think newspaper).  Do not be afraid to break up text frequently, as long as it is consistent with your grid.

Avoid Ugly Formatting

Left justify your copy unless absolutely necessary.

Make sure the copy in your most important text and in headlines looks complete.  It can be hard to avoid widows and orphans in your body copy, but it is imperative that you make sure they never show up in headlines or any copy that is given particular emphasis on the page.

Typography Back End Check

Web browsers only use the fonts installed on each computer to view websites, not necessarily the fonts used to build the site. To ensure that your site maintains a consistent look, opt for standard fonts. To avoid any typography faux pas, use font stacking. It gives you the option to use any font you want, and also allows for back ups in case the visitor doesn’t have the specific font you give first. An example would be like this: “font: Arial, Futura, sans-serif” which  says that you want the page to display Arial for the text, and if that is not available on the visitors computer, you want the page to use Futura.  If for some reason that isn’t available, it displays a generic sans-serif font.

How did you choose the font and typographic style on your webpage?  Did you do some research on typography before you started going to work, or did you leave it up to your designer?  Having a quality, money making website requires an exceptionally large number of skills.  If you can’t do it on your own, get in touch with us.

Tweet Button

Add Your Comments

Comments (47)

  1. It is the little things that make all the difference. before this article I just went with what ever font or style was in the template. thanks for putting this together. There are a lot of little details in publishing of any kind, but once you practice them they become second nature.

  2. I never knew the line height thing! I’ll bare it in mind, too many people focus on unimportant things on their site when things like this really do matter.

  3. I always curious about web designing. Little researching on fonts styles. I recommend Georgia over Arial. Is this right?

  4. HI MARIEL !!

    Great Post , i really like your post and it really helped me to understand about designing.I generally use “calibari,size 11″ in body. Is it nice??

  5. User friendly and attractive design always supports high traffic as well as high search engine rankings.

  6. Avoid Ugly Formatting and design. Text alignment, font, colours and user friendly menu bars are very valuable for attractive design…

  7. I had no idea that the title and the body font makes that much different to a blog…I have now seen the difference in my blog .thanks

  8. I’ve found 1.5 line spacing to be the best and suggested by many.
    Using a grid seems to be a good idea but I haven’t found a way to do it in a CMS without hard-coding – which is a bore.

    Aadil

  9. I had no idea that the title and body text could make a difference in my blog … I’ve now seen a difference. Thank you

  10. I had no idea that the title and the body font makes that much different to a blog…I have now seen the difference in my blog .thanks

  11. Is there a particular set of fonts which are best for the web?

  12. Nicely put. A lot of beautiful sites are ruined by adding too many fonts.

  13. Website creation is an art. It needs appropriate knowledge regarding what font to use, and especially what font for headers (often Serif), and what font for paragraphs (often Sans Serif). While most web sites are still using only basic fonts (Arial, Verdana, …), some have started to use more original ones (PT Sans, …) and the result is awesome. Fonts definitely can change / re-vamp a site. Thanks for your interesting article!

  14. We should customize our website font size, headings size etc. properly for setting up best experience for our readers. Can anyone here tell me that how to adjust my font size. My Website is on WordPress.

  15. Great post Mariel , I pretty much agree on everything. Saw too many sites ruined by crazy font settings , it’s like a punch in the eye !

  16. I never really thought of this. I shouldu not be using all different size fonts and strange color texts. I thought it looked good and artsy, but may not engage the reader. Thanks. I’m off to tailor my blogs!

  17. Avoid putting ads all over, popups and other stressful stuff on the website. Cleaner is better.

  18. Hey. Thanks for the layout-ideas ! :) I always use Georgia – i love this font. Thanks for learning from your ideas.

  19. Hi Mariel,

    This is a very informative post. People say content is the king. But design is equally important as today, presentation makes a huge difference.

    I personally use Georgia as the font for my posts and prefer to have slightly larger fonts to facilitate better reading experience for my readers. I use size 14 or 16 for that purpose and my readers seem to love it.

    Thank you for sharing these awesome tips.

    Regards,
    Kumar

  20. Hi Mariel,

    Very nicely written post with a lot of good tips. Thank you for sharing.

    Design of the website is as important as the quality of the content and I think people should definitely pay attention to these aspects of their websites.
    Thank you for these tips. I am sure a lot of people learned a lot about website designing through this post.

    Regards,
    Kumar

  21. Great Post Mariel. I tend to agree with you that fonts, colors and general formatting should not be neglected as they can make a difference in the overall look and feel of your site.

  22. I really understand the need for great design, I can see it when it’s wrong but I don’t know how to do it myself!

  23. Thanks Mariel!
    I just started working on my new site. My site is having professional look, minimum font size of 12 but it is having only one problem, the headings are a bit large. I think the headings size are on style.css from where I can edit the size

  24. Hi Mariel ,

    i agree with you. stylish layout and proper navigation attract the user to stay on your site.

  25. Hey Mariel

    I agree, black text in white background, its always great. Thanks for sharing!!!

  26. agreed.. you really got thumbs up for this article… as we all know very well if your site is beautiful and got stylish layouts as well as the site is properly doing its job.. the user will definitely like it.. thanks for sharing :)

  27. I guess designing is the most important part of todays generation , even if your content is good and design is not people will leave your site within 10 seconds.

  28. I agree 100% with you that the stylish layout combined with the well thought navigation is the key. There is no doubt that black text on white background is great, but I think that this is not always the best combination, depending on the theme and design of the site.

  29. You’re right. The selection of sizes, types, and font color are important in the success of a website. Just imagine if the font used is too small or too large, it will make the reader does not feel comfortable to read the contents of the website article.

  30. great Mariel! how about headline title, any advice for the size ant color font?

  31. I totally agree with this post. A beautiful website is always able to attract more traffic than the ugly. If a website in not looking attractive, then, none of the visitors will prefer them. So looking of website can make a big difference between you and your competitors.

  32. Typography is very important thing to consider for any web page. It depends on theme, editor you are using and your personal preference of color, font and style. But you should do it as per visitors comfort. Writing on web page should be eye soothing and readable. You have given great tips for typography here.

  33. This is a very informative post. People say content is the king. But design is equally important as today, presentation makes a huge difference.

    I personally use Georgia as the font for my posts and prefer to have slightly larger fonts to facilitate better reading experience for my readers. I use size 14 or 16 for that purpose and my readers seem to love it.

    Thank you for sharing these awesome tips.

  34. User friendly and attractive design always supports high traffic as well as high search engine rankings.

  35. I totally agree with this post. A beautiful website is always able to attract more traffic than the ugly. If a website in not looking attractive, then, none of the visitors will prefer them. So looking of website can make a big difference between you and your competitors.

  36. Agree that a lot of beautiful sites are ruined by adding too many fonts. Typography is very important thing to consider for any web page

    Thank you for sharing these awesome tips.

  37. I agree 100% with you that the stylish layout combined with the well thought navigation is the key.

    Tho fonts can ruin some sites if the editor makes too much use of it.

    Thank you for sharing these awesome tips.

  38. well said Mariel

    Selcetion of font is very important while designing a professional looking website. Overuse of different kind of fonts i dont think is a good idea. Instead select a particular set of fonts to explain all your content on the website. Also some people make use of different colors in fonts on their website. Though its not a bad idea but while doing this one must take into consideration color theme of the website designed.

    Regards
    Sudha

  39. thanks for the tips. one more thing, i think in a paragraph, it should be restricted to 2-3 lines, maybe 4 max to keep readers interested in reading.just my 2 cents.

  40. There are lots of steps you need to take care when you are about to design your website. Despite of all what you have share with us, you also need to take care of Google webmaster guidelines to design and develop your website, to make it sure that you have designed and developed a search engine friendly website.

  41. I believe not even size 12 is enogh, size 14 should be the standard and size 16 even better,,, but it’s always dependig on the font and which device your visitor is using..

  42. Can Javascript be used for enhancing typography. Will it have an effect on the SEO?

  43. Psychologists have discovered that sans serif fonts put readers to sleep if the text goes on for more than a few pages.

  44. Nicely put. A lot of beautiful sites are ruined by adding too many fonts.

  45. I was unaware of line height thing till now.. thnx man for sharing

  46. Not being a web designer, i too have found that Black Text with white background the cleanest and easiest to create. I just make sure that my background colors and link colors are consistent with my websites header graphics.

  47. I find size 11 a little small, and prefer larger easier to read writing.

Add Your Comments

 

Print this Article
Share

Mariel is a GA certified analyst at FutureNow, Inc.

More articles from Mariel Bacci

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: