//start adsense code //end adsense code

Typography

by | Jul 25, 2017

” Did I grab your attention as soon as you scrolled down to this section? “

A users attention is a valuable thing for any creative person.  Along with eye-catching graphics and bright colors, text or typography is something that helps a designer grab your attention while delivering relevant information. Be it dates for a concert or the title of a book, the way one presents the data has a huge impact on the user experience. The following article discusses various techniques that can be used to create beautiful designs that convey your message perfectly. It talks about text hierarchy, fonts, division of data and much more.

TYPOGRAPHICAL HIERARCHY

Hierarchy talks about the simple fact of what you, as a designer, want the viewer to see at their first glance. It can be as simple as making the headings bigger or bolder, but that’s not always the case. In most of the cases, important information is hidden among other data and graphics. Therefore to make that text stand out becomes a challenge. As a user, we don’t realize the thought process behind a design and that’s not a bad thing. The first look at a good design should deliver information to the viewer without him discovering the hierarchy.  

I’ll start with an example!

Having a look at this image, what we see is a banner for Yunique 2 and some deals Flipkart offers.

Let’s try an exercise here. Try to lose focus of the image. Just look at it ( not reading anything ) and notice what you see. The most prominent pieces of information one can absorb is at the top of the typographical hierarchy.

Talking about the banner on the top, “Launching Yunique 2” and “JUST 5,999” grab my attention. But notice how “2GB RAM | 13MP camera” have the biggest font size and the date and time when the sale starts is the smallest. There are three things going on here:

– Scrolling past this banner, the user’s attention is grabbed by the title and the colored button saying “JUST 5,999”. If the user is uninterested, he scrolls down. But if he is, he looks for more information.

– That’s where the specification text comes in. Being on the second hierarchical level, it conveys the awesomeness of the product ( 13MP camera for 6k is pretty awesome )

– and lastly, the date and time ( the smallest size ) enable the user with the utmost interest in the product to grab a chance of purchasing it.

 Now let’s twist things around. Imagine the date for booking was the largest.  The information is pretty important, isn’t it? But for a person who has no interest in buying a smartphone, is it important?

 Coming down we see certain deals offered. The product is displayed as a graphic and it is evident that images have more impact on the user than text. But the offers (in the green background ) are the real attention grabber.

SO, WHAT DID WE LEARN?

The real meaning of hierarchy in design isn’t the order of information displayed or the size of text used, it is about guiding the user through the information in a way that filters the user who is actually interested in the product or the service you provide.

     

FONTS

I’d like to take this opportunity to talk about the major categories of fonts and how/when/where to use them. However, it is quite obvious that I can’t cover all the fonts that exist. I’ll go over the categories this massive amount of fonts belong to and in the end, provide a list of the font types I like and use in my projects.

SERIFS

This category gets its name from the ‘serifs’ protruding from the letters.

Mostly used in print and traditional designs, Serif fonts are most probably the oldest.

On the web, however, a more transitional form of these fonts are used. With smaller and thinner serifs and proportionate letter widths.

Mostly used in:

  • Headings and captions.
  • Poster design
  • Newspapers and Magazines
  • Book covers

SANS SERIF

Quite literally, Sans serif typefaces are basically the same as above, just without (or ‘sans’: French for without) the serifs. Remove the protruding parts of the letters and you get a Sans Serif font.

 

These fonts are read quite easily on the digital platform. Most websites use Sans Serif fonts because they are really pleasing to the eye and are easy to read and perceive.

 

A combination of Serif and Sans Serif fonts are genreally used as Title text and body text pair respectively.

Mostly used in:

  • Headings and captions.
  • Minimalistic Poster Designs and Logos
  • Websites ( both as title and body text )
  • Product packagings.

SCRIPT

 

Script fonts are replications of calligraphy and other decorative texts in the digital world. Having a sense of style and decency about them, they are mostly used in certificated and wedding cards.

 

On the other hand, these must only be used scarcely and must not be used as body text or in paragraphs.

There is not one example I can give for this font as this is a wide category of beautiful and mesmerizing typefaces.

Script fonts generally come with ‘flourishes’ or ‘decorations’. These are separate pieces of graphics that may or may not be attached to the font.

One of my recent works, sanguinesaysblog.wordpress.com uses this type of font. The logo has a stylish feel because of the font and the ‘decorations’ used on the ‘g’ and the ‘n’.

Mostly used in:

  • Headings and captions.
  • Posters and Logos
  • Invitations and event decorations
  • Certificates

SOME OF MY FAVOURITE FONTS

 

I’ve listed some of the fonts I usually use with my projects and designs and some websites to find free fonts at are:

1001fonts.com

fonts.com

fontsquirrel.com

I hope this helps!

 

Serifs

  • Rockwell
  • Calisto MT
  • Caslon
  • Sylfaen

Sans-Serifs

  • Adobe Caslon Pro
  • Fira Sans
  • Raleway, Raleway Thin
  • Lato
  • Open Sans, Open Sans Condensed
  • Yu Gothic

Script

  • Mistral
  • Edwardian Script ITC
  • Kunstler Script
  • Vladimir Script

CONCLUSION

 

I’d like to conclude by saying that typography is one of the most important parts of the design process. Different fonts and styles generate different emotions in the user and it is important to understand and use those emotions to your advantage by a design that speaks to you audience, but not just by its words!

 

This is Veer bringing the Basics of Design. Keep creating awesomeness!

   

0 Comments

More from this Category