We build web applications.
From business tools to social and educational media, we have the team that can turn your tech fantasies into reality.

Typography is important in any medium but on a website it can be the difference between professional and amateur.  Below are my secrets for great website typography.

Be aware of website safe fonts

The biggest limitation with website typography is the limited number of fonts that can be used.  Currently, fonts cannot be embedded into a website.  This means that you are largely at the mercy of the fonts installed on your users machine.  You should stick to the list of commonly installed fonts to ensure your content uses the fonts you define.

Avoid using images as text – use replacement techniques instead

Using images as text was a popular way to use a font that is not listed in the list of common website fonts.  Don’t do it.  Doing so creates accessibility concerns and also hurts your search engine rankings.  If it is text, make sure it stays text in your code.  The better alternative is to use image replacement techniques.  These allow you to use text in your code but then replace it with an image on the screen so users see the font you desire.  SIFR and FLIR are two that I have used and like.  This technique should be used sparingly (headlines only!).

Use no more than three fonts

OK, now that we have the big technical limitations out of the way let’s focus on the practical.  I tend to use no more than three fonts when working on a website (and often only two – one for headlines and one for content).  Do not get carried away with the number of fonts you use.  This quickly gives your website a scattered, non-uniform feeling that is best avoided.  Instead of using many fonts, try variations in size, style (italic / small caps) and weight (bold) for the two or three fonts you do choose.

Adjust line height and letter spacing

In the print world these are known as leading (line height) and kerning (letter spacing).  By default browsers use very tight line heights.  I always increase the line height to add white space to the screen.  Doing so encourages people to read your content by making it appear less dense.  With letter spacing I tend not to adjust the main content but will experiment with headlines.  Try both increasing and decreasing the letter spacing of larger text.  You’d be surprised how this subtle change can positively affect the overall design.

Experiment with color

Nearly all websites will benefit from adjustments to font colors.  Sure you can use black for all your text but how uninspired is that?  I will frequently soften black to a dark gray.  It is a very subtle difference but one that gives the letters a softer, easier to read feeling.  When it comes to headlines experiment with bolder color choices.  Now, I’m not suggesting screaming reds and neon greens but using colors that match your logo and color scheme in your headlines will go a long way to setting your website apart.

Keep font sizes adjustable

Modern browsers are doing a better job about making sure that font sizes remain adjustable no matter how they are defined; however it is still a good idea not to define your font sizes in pixels.  Instead set your font sizes using an em unit or a percentage.  Doing so will ensure that your website will respond when users try to increase or decrease the font size, regardless of their browser.

Maintain contrast between your background and your fonts

Just because your eyes are good doesn’t mean your users’ eyes are.  Keeping a high contrast between your background and your fonts is important.  Black fonts on a white background provide the maximum contrast.  I’m not suggesting sticking with this combination, but keep contrast in mind while you experiment with colors.  In general I use a white (or very lightly colored) background and a much darker color for the fonts.  On a related note, stay away from light text on a dark background.  It is much more difficult on the eyes.

So there you have the secrets of great website typography!  Use them well and you will give your website a very professional visual appearance and a solid technical foundation that your users will appreciate for such things as font-resizing and accessibility.

Post dicussion

You must be logged in to post a comment.

  • Subscribe

    You can have new blog posts delivered to you as soon as they're published simply by subscribing to the RSS Feed below!

     

    Subscribe to RSS Feed | What is RSS?

     

    • “We are really happy with the way you understood our needs and are amazed by the speed and efficiency you have shown in customizing your Online Testing solution according to our needs. Thank you.”

      Gems Recruitment Consulting
    • “If you want original ideas, fast turn-around, lightening fast personal response and a top quality product at the end of it, its all in one place – Texel Graphics. Dont take my word for it, look at the quality of the work, look at the other testimonials in their website, and most importantly, BOOK NOW – before the prices go up!”

      Pushpak Tours and Travels
    • “I’m exceedingly happy with the work you have all done and fixing the major problems in the earlier version of the site – it has completely satisfied and exceeded my expectations. Many thanks to you.”

      www.visagenie.co.uk

      Visa Genie Ltd
    • “Texel Graphics worked hard to produce what was requested. First Empression counts. This is reflected at the massive increase in our web site traffic. The standard of work and customer care is second to none. I well recommend TexelGraphics.com.”

      www.jmfountain.com

      JMFountain
Downloads Web Designing Capabilities Presentation
Brochure on Internet Marketing
Brochure on Softwares for Education
Features of TestEzee Online Testing & Assessment Platform
Contact
General inquiries: contact@texelgraphics.com
Support: visit the FAQs
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
Updates

Our newsletter is awesome. Subscribe and get the latest updates.