Some thoughts on web typography

Web designers are not always well versed in graphic design theory. I know it from my experience. Once I had this interesting conversation with a web design team. Most of them were ‘trained’ in multimedia institutes – 3/6 months course in ‘web designing’! I asked them why they wanted to do ‘web designing’. The answers were funny. One guy joined the course because his cousin has done the same course before and he got a very good job. Another guy actually joined for some Java programming course, later he realized that he is not good for that and found something he can manage.

Within these 3/6 months, usually these institutes give the students an introduction on Photoshop, Flash and Dreamweaver and convince them that they are ready for the market, which is partially true. The guy won’t find it very difficult to get a job!

I am not saying a great web designer can’t come out of these institutes. But they might not be trained in graphic design theory within the span of the ‘course’. Is that important? I think it is. Because one of the prime objectives of web designing is communication. And the communication has to be clear. A good training on graphic design theory will enable designers to do that.

Well, I am not a web design guru. And I am not trying to write a graphic design theory tutorial here. While reviewing some designs recently I thought it would be better if web designers consider typography a little more seriously.

I have put together some points. This can be a start:

Make it readable

Okay, that’s an obvious one. But the most important. There should be good contrast between the text and the background when you want the text to be noticeable. I mean the headline and body copy at least. Maybe you can use the reverse technique for legal lines and disclaimers!

When you need to give some importance to a particular text in a paragraph, try not to use italics. Italics is not really readable always. Making the text bold is a better approach. But make sure you don’t overuse it. When everything is bold, nothing really stands out boldly.

The headlines

The header tags in HTML (H1, H2, etc) are there for a purpose. It should be used to give the HTML text a proper structure. I know the text in header tags will get more importance in HTML. But we should not be misusing that. Recently I have seen one page like that. It was actually an output of a CMS. And I had to strip all the design elements from the page since we were thinking of doing the design completely in CSS. So I was going through the code. And I got stuck with a very interesting algorithm in between. They are actually separating the first paragraph of all the text and publishing it as an H2 tag. And the style of H2 tag has been changed to match the body text. Why they have to do that? For good search engine rankings I guess. Because the website owners told me that the CMS is completely ‘Search Engine Optimized’ and they are getting some very good results. But the editors were unaware of the whole situation. They don’t know that whatever they write on the first paragraph is going to be a sub-headline!

My advice: don’t do it. These tricks might give you some results now. And they will backfire later. I have been doing search engine optimization for more than 5 years now. And I came across quite a number of tricks to get you on top of search engines. But these tricks will stop working at some time or the other. And sometimes it will result in your website getting banned from search engines forever. Search Engines lookout for good structured content. If you really give that, you don’t have to do any ‘optimization’.

Do you use ALL CAPS for headlines? I used to chat a lot. I mean, I used to go to chat rooms and chat with complete strangers. I chat even now. But that’s only with the people I know. I don’t know if I got it from that habit, but when I see ALL CAPS, I feel like someone is shouting at me. Research says while reading, the readers don’t scan character by character and combine it to form words. Rather, they see overall shape of the word. When you use ALL CAPS, you are interrupting this behavior of the users. So it is better you don’t do it.

Another thing is Initial Caps. The same research says that Initial Caps cause unnecessary bumps for users scanning process and it should be avoided as well.

Line and word spacing

Here is a simple rule: If you want a user to read horizontally, your line spacing should be considerably greater than word spacing. It will also give some relaxation for the users’ eyes. And who knows, maybe you will inspire them to ‘read between the lines’!

Are you a graphic designer who loves dark backgrounds and light type? If you are one, you are not alone. I think most of the graphic designers are like you. I read it somewhere that graphic designers usually don’t read anything and they don’t others also to read. And that’s why they do that. I don’t really believe that. Even though light backgrounds and dark type will be easy on eyes, there will be chances where you have to reverse it out. When you do that, make sure you increase the line spacing. You can also use a lighter font in these situations.

Be an artist!

Now, the difficult part! Typography is an art, not science. How much ever you try to scientify it, there will be some situations where you have to wear an art director’s hat and make an art decision. So, be prepared to test some new stuff and tell us about your experiences.