Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. We realize that nowadays, knowledge in typography can be applied into various forms in almost all of media fields, including graphic design and the publishing world.
To apply typography effectively in a media, we need to understand how it was developed and how people around made it possible. This not only enriches us by having a deeper comprehension about type usage, we would be able to be choose fonts more wisely.
Sometimes in the past, I often noticed the way websites applied typography by using quite varied and unique fonts on their simple headers. And in the past, everyone was still using images when applying writing on the header. A while later, JavaScript was used to enhance the font usage. And now? We can’t count on it any more, many things are changing in web typography in this modern age. Such as API utilization, @font-face, CSS3 and possibly there will be many more alternatives in the future.
Most Common Web Typography Mistakes
With the resources that we have today, allowing us to use various kinds of fonts to make our websites much more interesting. It’s obviously more exciting for visitors to read our websites and also for a web designer to explore further the intensity of the font usage on a website. So a web designer has knowledge of when to use some particular fonts and when to use standard fonts for reading.
Image credit: Lee | Quoteskine
There are a huge number of fonts available on the web, but that doesn’t mean all of them work and are suitable to be applied to a certain design. Every font is designed with certain characteristics for a certain idea, purpose, impression, and project design. So, our job as a designer is to make the concept meet the design supported with the correct font usage.
Inappropriate Font Type as A First Impression to The Visitors
How do you want your website to look when visitors visit it for the very first time? Make sure that visitors don’t get the wrong impression about your website. You want to look conservative, appear as a professional, show up impressively, or maybe you want to look completely different, unique, creative and seem out of the box? Ask yourself. And it’s important to observe what type of visitors visit your website, are they the older or “the ones who call themselves young and creative”? At this point you can also determine the differences in font size in a section. Like in the header, title, menu, content section, etc. It is important if you can determine them hierarchically to make any future development easier for yourself.
Using Too Many Fonts
Too many fonts used can also blur the impression that you want to appear on your website. The worst thing is, if it doesn’t allow your visitors eyes to stay still on your website, or often called focus level. Besides, if you’re using recent common technology, like API, overusing fonts will only make your website load much slower. The typography world is now enriched with various kinds of fonts, but that doesn’t mean you can apply them all on your website, yes, it’s possible, but you have also to consider some of the points we’ve discussed above. Use a minimum of 2 and a maximum of 3-4 kinds of fonts on your website.
Incorrect Font Scale : Too Big or Much Too Small
Misunderstandings often happen in perception by using a font bigger than it should be displayed. But not always, the point is everything has to look proportionally. More important is its usage on a website. Will this website be seen from long distances by visitors? Of course not. What I mean by proportional here is the balance between type and scale of fonts that will be used in all the elements on your website. And we also need to pay attention to the preferences of the visitors’ monitor resolution.
It’s important to avoid having the fonts look too big or even too small, so it’s hard to be read. Alternatively, you can create small buttons which have functions to increase or decrease the text size, that may be better.
Less Space for Margin or Distance Between Words
There are many reasons not to touch the edge of a page with content on a website. Give enough space for your content. Let the header, paragraph, title, sidebar and footer have their own space. Also it will look more organized, it will also make your visitors stay focused on what they see, what they read and where they want to refer for their further reading on your website. And give space between your text lines to make reading easier.
Websites With Nice Typography
This section contains list of websites which have examples of good typography usage.
Chirp – Twitter Developer Conference
Online Typography Tools
There are a good handful of typography tools on the web listed in this section.
Serif Font Identification Guide
Further Resources
- 20 Do’s and Don’ts of Effective Web Typography – It’s an important part of designing for the web, yet it’s often overlooked (even by me previously). Below are the 20 do’s and don’ts and in the comments section, you’re free to let us know of any of the items we might have missed.
- 50 Useful Design Tools For Beautiful Web Typography – Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.
- 40+ Excellent Free Fonts For Professional Design – A tip that is very often not told, there are free quality fonts out there. If you are a student graphic designer, you may not be able to afford to buy fonts just yet so this may be a good alternative.
- 30 of the Best Web Typography Resources Online – The resources below can help you improve your web typography, regardless of which camp you fall into. There are tools for creating unique typography, references and articles that can teach you typographic principles, and plenty of inspiration and news to keep you updated on the state of web typography.
Bima Arafah
He is a 22 year old creative and also freelance web designer and developer from Jakarta, Indonesia. Write about everything related to design, trending topics in web development and symbian phone. Loves color, design, blog, WordPress, and has an unhealthy addictions to smiles and laughs. You can visit his site below or follow him on twitter.
Visit my Website | Follow me on Twitter
[http://www.onextrapixel.com/2010/08/17/mastering-typography-in-web-design-with-inspirations-tools]
Etiquetado:Design, Font, Graphic design, Graphics, JavaScript, Typography, Web design, Web typography, Website
