3 Powerful Ways To Make Typography Talk On Your Website

By   |  Stashed in Graphic Design

3 Powerful Ways To Make Typography Talk

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.

make_typography_talk02

The Typographic Crescendo

make_typography_talk03

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

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

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.

About the Author

Sneh Roy is a web and logo designer from Sydney, Australia. She works out of her home studio creating illustrations and developing content. She pours a bit of her passion about designing, into her blog Little Box Of Ideas everyday. Sneh loves connecting with fellow designers and developers on Twitter.

More posts by

Website   

  • http://10steps.sg Johnson Koh

    This is an interesting article with beautiful example. Thanks for the info. :)
    .-= Johnson Koh´s last blog ..Free Custom Logo Design Giveaway =-.

  • http://rl-creative.com Roland

    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… =-.

  • http://projectdw.com/ David

    Great article! Totally believe typography “makes” a site. Well done.

  • http://www.littleboxofideas.com Sneh Roy

    Thanks for your kind words guys! Glad you enjoyed the article :)

  • http://www.dannyhinde.co.nr Danny Hinde

    Great article Sneh! :)

  • http://harshamv.com/ Harsha M V

    Amazing article. jsut wanted the web address of the squared eye. not able to find it !! :D

  • http://www.scriptype.tr.gg Shitic

    @Harsha M V:
    me too
    :(

  • http://squaredeye.com matthew smith

    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. :)

  • http://www.bensaufley.com Ben

    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?

  • http://www.xaby.com Web Design Singapore

    In my opinion, typography is the second most important design element after photographs. Of course colour schemes and the layout matters too.

  • http://www.xaby.com xaby

    you are talented!

  • http://www.littleboxofideas.com Sneh Roy

    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 =-.

  • http://www.easysitebuild.com/ Peter

    Very nice article all are details are explained well

  • http://www.crearecommunications.co.uk Damian Web

    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 =-.

  • http://www.dotcomproject.net Sean

    Especially the bit about intergrating typography I enjoyed! It’s often overlooked and the typography is simply ‘smacked’ on the design.

  • http://www.unmotivatedgenius.com Web Development & Web Design

    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.

  • http://www.mirprint.com MirPrint

    Great article! Beautiful examples and very well-written. :)

  • http://www.web4half.com web4half

    Great article …

    Thanks..

  • Alex Abbey

    Great article!

    I would really like to know what font they use in Squared Eye.

    Thanks!

  • http://www.clippingimages.com clippingimages

    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.

  • http://www.chotrul.com/ Mark Carter

    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.

  • http://www.littleboxofideas.com Sneh Roy

    Thanks guys for your wonderful comments.

    Alex, I think the font being used is Archer.

  • http://purplebutton.wordpress.com/ purplebutton

    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.

  • http://www.vicobiscotti.it Vico

    great article! thank you!

  • http://www.jaydip.info Jaydip Parikh

    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.

  • http://www.edparton.com/blog Ed Parton

    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 !

  • http://www.edparton.com/blog Ed Parton

    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?

  • http://alexonsager.com Alex

    Typographic Sforzando is probably closer to your intended meaning, but great points nonetheless.

  • http://www.design-gate.com Sang Valte

    Neatly done!

  • http://maiconweb.com Maicon Sobczak

    Precious tips.

  • David

    Great article! I liked it a lot. :)

  • http://www.e-sushi.net/ e-sushi

    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!

  • http://www.digial-results.com/ Russell Bishop

    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!

  • http://www.theweddinghirecompany.co.uk The Wedding Hire Co

    Great article, has come in usefull!
    Thanks

  • http://ilikeitdirty.com christopher

    great tips. typography done right can make a huge impact.

  • http://www.resumesplanet.com resume writer

    having a good typography in website is a big factor.

  • http://www.kchains.com keychains

    Really powerful ways, thanks

  • http://www.erage.nl Freelance webdesign

    Very nice article, Sneh! I love seeing typography on a website explained from a graphic designer’s perspective. Hey, I was wondering: what do you use to put different types of fonts on a website: sIFR or something else like Cufon?

    I’m a huge fan of Cufon nowadays. It’s much easier to implement than siFR. Have you ever tried @font-face by the way?

  • http://www.icusa.net/ Naples web design

    Typography in a website is really cool because it does a unique look for such a website but in the past years of web development this kind of stuff is not popular because mostly webmaster don’t like it.

  • http://www.piano-lessons-dvd.org/ Simone

    Nice post typography isn’t given enough lip service. We always talk about the layout, colors and graphics but the type face matters for the readers eyes and enjoyability.

  • http://photoshop-clippingpath.blogspot.com/ Clipping Path

    I’m always interested about Typography! & u’ve just done a nice work here! thanks a lot for sharing!

  • hats

    great tips. typography done right can make a huge impact.