Typography is a very powerful tool in a web designer’s arsenal. We have seen simple websites glorified in an instant with the use of proper typography. We have seen brilliant websites pale because the “type” tone they used was all wrong. Understanding typography and implementing its usage might be an art, but it is not so different from being in a society and adapting the etiquettes of proper language, behavior and tone.
Let us take a look at the Square Eyed Website for instance and try to analyze how they make the typography on their page talk to the visitors.
The Typographic Crescendo
Just like when you spot someone across the road or happen to meet around the corner of the street, you say “Hey Steve!” reasonably loud. You don’t take a pause and mumble something under your breath. When someone visits your website, you need that attention grabbing greeting that will make them want to hang around and see what else you have to say. I call it the Typographic Crescendo. It is that first impression that will linger throughout the day in their minds and make your website a little bit more memorable than others on the internet. In typographic terms, it has to be loud. Hence, the huge popularity of big type being used in websites nowadays. A slab serif or sans serif will do the trick perfectly. A font that is clearly readable and has just a tiny bit of distinguishing mark like a curvy “s” in this instance on the Square Eyed site will stay with the visitor. Pick what you would want your visitor to remember and put that in big, bold, beautiful type in the top one third area of the website. Let it be your “Hey Steve!”
The Type Tone
Using the right tone on a website is extremely important for the message you want to convey. When you talk to a client or customer, your tone is usually professional, a little bit casual, polite and approachable. You wouldn’t talk to them as if you were talking to your best buddy or to a 6 year old child who just dropped your phone on the pavement. You usually don’t talk too loud, or too fast, or too slow, or loud one minute and very soft the next. Now extend that hypothesis to the website when you are planning out the “tone” of your content. Depending on your site’s demographics, you want the visitors to your site to feel comfortable reading what you have to offer. Take the Square Eyed website for instance, they are using an engaging style of dialogue, but more importantly they have placed the right emphasis on using an appropriate tone. They come across as a group who are just trying to casually inform you of the work they are doing. There is no preaching involved and no sudden loud noises. There is no clutter.
The Type Tone would consider the following elements on a web page.
- The proper use of language.
- The proper use of an appropriate typeface to convey the message.
- The use of bold and regular typeface for emphasis.
- The number of words used in a reasonable sized square grid area.
- The proper use of punctuation and styles [for eg. italics].
- The proper use of kerning in a word and spacing between words.
Camouflaging Typography
In a real world situation, when you are a tourist in a new country, your words and lingo appear exotic to the locals and you stand out, which is a great thing. But you can’t be a tourist forever. You either go back to your home country or you decide to stay on. Now if you do stay on, the novelty of being that guy with the fun accent quickly wears off and you either get tired of repeating yourself or you adapt to the local language and lingo subconsciously. When you do something drastic with typography on your website, you will most definitely stand out and maybe start a trend. But you also run the risk of losing that wow factor pretty soon and then you are stuck with something glaringly different that just doesn’t work as well. And then you have to adapt.
One of the most powerful qualities of typography that a lot of people fail to explore and embody, is its ability to blend in and camouflage itself in a design. The letters and words become one with the layout, blending and working with the colors and elements. The words are there because you are reading them but they are so beautifully integrated in the design and layout, that you just can’t separate them into two different aspects of the web page. In the Square Eyed website, a lot of attention is paid to the color palette. The typography is in one color throughout the page, yet the page has dark and light bits. The contrast of the color of the type with the color of the web page is not very stark which makes the fusion seamless. Learning to camouflage typography in your designs is not only a fun process, but is the final step in creating a web page that talks to your visitors, doesn’t shout, doesn’t preach, doesn’t instruct; but just talks to them.
Sharing is Caring
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
MyInkBlog
Email Updates
Twitter
Facebook
Flickr
Designmoo
Digg
Stumble Upon
October 5, 2009
This is an interesting article with beautiful example. Thanks for the info. :)
.-= Johnson Koh´s last blog ..Free Custom Logo Design Giveaway =-.
October 6, 2009
Very good article with useful information and cool examples :) Yep, some years ago typography on websites wasn’t very good, cause there was no tools to work with it. And now web gives as a possibility to build a website with stunning typography, that is almost same that we can do on paper :)
.-= Roland´s last blog ..Welcome to Estonia: Photographic review… =-.
October 6, 2009
Great article! Totally believe typography “makes” a site. Well done.
October 6, 2009
Thanks for your kind words guys! Glad you enjoyed the article :)
October 7, 2009
Great article Sneh! :)
October 8, 2009
Amazing article. jsut wanted the web address of the squared eye. not able to find it !! :D
October 8, 2009
@Harsha M V:
me too
:(
October 8, 2009
Wow, thanks for the encouraging words Sneh. Honestly, I feel that Squaredeye.com has a lot of improvement needed, especially as I learn the details of typographic care. Hopefully I’ll have more to show you in the future. :)
October 8, 2009
Great article. I really liked the observation about Squared Eye’s text color remaining consistent as the background changes. That’s something I might not have noticed and it has interesting implications for design.
But I’m confused by the “Typographic Crescendo” – a crescendo is a gradual increase in volume, which seems to be essentially the opposite of what you’re implying. You’re saying hit them with something big, right up front, right? Not to build up to it?
October 8, 2009
In my opinion, typography is the second most important design element after photographs. Of course colour schemes and the layout matters too.
October 9, 2009
you are talented!
October 9, 2009
Thanks for all your comments guys. The web address for Squared Eye, http://www.squaredeye.com .
Matthew, thanks for stopping by. You have a brilliant website and the work you are doing is inspiring. And Levi is the most memorable logo/mascot ever! I can’t wait to see what new stuff you come up with.
Ben, you are right. I did mean building up to it, but alas haven’t explained it very clearly. Sorry about that. If you look at the image for “Typographic Crescendo”, I have pointed out that there is subtle text just before the “Hey Steve!” effect. I have also neglected to mention that the huge type follows some kind of subtle, non-invasive typography. In this case, the sub-links on top. Hence building up to the big type. I hope I am making sense :)
.-= Sneh Roy´s last blog ..20 Fun Illustrator Tutorials To Create Cute And Crazy Cartoons =-.
October 9, 2009
Very nice article all are details are explained well
October 12, 2009
Great post, Typography is the one area I would really like to improve on as shown above it is one of the most important aspects of selling a website. I will take all of your wise words on board and hopefully improve for my next site!
.-= Damian Web´s last blog ..Rel nofollow – Search Engine Optimisation Tutorial =-.
October 13, 2009
Especially the bit about intergrating typography I enjoyed! It’s often overlooked and the typography is simply ’smacked’ on the design.
October 13, 2009
I’m kinda waiting for this whole huge boldface title in the top 3rd to die out. Could be a fad, could be a trend. Of course you did it well, but there’s so many out there that have overused it the wrong way its over saturated a good thing.
October 14, 2009
Great article! Beautiful examples and very well-written. :)
October 14, 2009
Great article …
Thanks..
October 16, 2009
Great article!
I would really like to know what font they use in Squared Eye.
Thanks!
October 25, 2009
Awesome article. Very well explained that how to use and improve website using typography. Nice to have some knowledge from this post. Thanks for sharing this nice post.
October 27, 2009
Great article – really nice to see your thoughts throughout. ‘Typographic Crescendo’ is a fantastic expression to sum up such an important concept. Thanks for sharing this.
October 27, 2009
Thanks guys for your wonderful comments.
Alex, I think the font being used is Archer.
October 30, 2009
thank you for posting this. even though I dun have a website, but I do really love Font in everything especially in packaging. I believe a strong selection of font type can be more attractive than putting lots of design. i learn something here.
November 4, 2009
great article! thank you!
December 3, 2009
Wonderful Article. Thanks for sharing such a great tips. I am not a designer but I will share this stuff with my design team and ask them to reach up to this level.
December 18, 2009
This is P E R F E C T I O N ….
wish I were this good. I even made a post about it and will integrate your helpful ideas as well as the http://www.squaredeye.com higher standard in web page design !
December 18, 2009
Now tell us where “Sneh” comes from? what does it mean? How do you pronounce it? and how do I get one of those cool posting pics?
December 18, 2009
Typographic Sforzando is probably closer to your intended meaning, but great points nonetheless.
January 20, 2010
Neatly done!
January 20, 2010
Precious tips.
January 20, 2010
Great article! I liked it a lot. :)
January 20, 2010
I love the idea behind the article!
Yet, I would have loved it just that little bit more if you would have dived into the “typo” issue a bit more. There are loads of other great examples lingering around on the internet that show even more “talking type”.
But hey, I’m not complaing… just thinking (too loud probably).
Hugs to Australia!
January 20, 2010
Great read!
With the slow adoption of @font-face and similar font-replacement techniques, the possibilities are truly opening up for beautiful typography on the web.
As someone stated before me, typography really does make a website, and it’s something that as web designers we need to truly harness and control, but not be afraid to experiment with new ideas.
Exciting stuff, thanks for the article!
January 21, 2010
Great article, has come in usefull!
Thanks
January 22, 2010
great tips. typography done right can make a huge impact.