Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Not applicable

A Tip for the Type

If you think that your typeface or font that you use does nothing more than just conveying the content of the words themselves or just add an artistic streak to your page then, you’re wrong! Rather I must put it this way, YOU’RE WRONG!

Notice my tone of voice change when I used the uppercase letters instead of lowercase in stating ‘You’re Wrong’. The UPPERCASE Bold letters not only communicate the message boldly but do it in a strong assertive, almost authoritative manner. Typography forms a quintessential part of Graphic Design and Visual Communication. In fact, typography makes 95% of Graphic design.

The visual aspect of type has as much effect on how the content is communicated and perceived as does the verbal aspect. Visual appearance of text can communicate more than the text itself like expressing the mood, personality, gender, age or situation that is in context. It can also give visual cues about the hierarchy of the content, how to read it and which part is more important than the other. It can be perceived the same way as wearing the right clothes for the right occasion like wearing formal clothes for a job interview and wearing a casual pair of shorts for a barbecue house party.

For instance, the 2 images below use a different typeface for the tag line.

s2.jpgs1.jpg

Although the one on the left side is a clean, legible and a good looking typeface, it doesn't suite the context at all. Whereas the one on the right not only suits the context but also builds the atmosphere and gives certain punch and flavor to the poster.  If we put the context aside and look at both typefaces side by side there is no grounds for comparison since both have distinct personalities but if compared on a contextual level, the type used on the right immediately stands out as better suited to the image than the one on the left.

Typefaces have their own distinct personalities and it is the role of a designer to decide which typeface will suite which condition. However, certain general rules can be established depending on the typeface.

Recommendations for using typefaces

  1. Sans Serif fonts (Arial, Helvetica) are better to use for body text while Serif fonts (Garamond, Times New Roman) are better to use for headings and titles.
  2. Avoid combination of similar typefaces together like Franklin Gothic and Helvetica since types from the same family (in this case Geometric Sans) break the visual harmony as they don’t look alike but are not totally different. For typeface combinations contrasting fonts work best like Helvetica and Garamond.
  3. Avoid using more than 2-3 types per design.
  4. Create a gradation in weight to show hierarchy in text and for better visual flow.
  5. Use Script fonts and accent fonts sparingly only to highlight elements in a design.
  6. When unsure stick to traditional and popular fonts like Arial.
  7. Consider the tone of voice and context when choosing an appropriate font.

Google fonts are a great way to integrate some of the web fonts in QlikView. See blog post by Arturo Munoz about 8 ways to customize your QlikView applications with Google Fonts in which he talks about the step by step process of incorporating Google fonts in QlikView.

In summary, each typeface has a different personality which needs to be identified and applied to the context accordingly. And remember, apart from saying all about the design the typeface also adds the much needed aesthetic streak to the design so don’t hesitate to experiment.

postscript -

Typeface & Font – What’s the difference?

People often get confused between typeface and font and sometimes use it interchangeably. Typeface is the style of design of the letters, symbols or numbers whereas fonts are a set of printable text characters in a specific style. For example, Arial, Times New Roman, Garamond are typefaces but Arial Bold 12 points or Times New Roman Regular 9 points are fonts.


Resources

http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-bl...

http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography

9 Comments
Not applicable

Thank you Apeksha, great post.  Wish you were able to post more often!

0 Likes
831 Views
Not applicable

Thank you! Glad to hear they are useful..

0 Likes
831 Views
ses
Contributor

Thanks Apeksha. Its really good to see posts that alert the community to the benefits of design in our applications. When it comes to font choices I'd even say restrict it to 1-2. In most cases, to ensure the same view on mobile devices, I use Arial and Times.

0 Likes
831 Views
senarath
Contributor III

Hi,

Your thoughts and views are highly matched with what is expected from Qlik Sense and thanks for helping to make Qlik View similar to so called Qlik Sense visualsation.

0 Likes
831 Views
Not applicable

Hi Apeksha, I read something recently that came to mind while checking out your post.

There was a study published that showed that when people are presented with information in a hard-to-read font, they actually recall it better when asked to remember the information at a later date. The theory is that by making the information harder to read, the mind "slows down" and digests it better.

http://www.bbc.co.uk/news/world-11573666

Not sure how I would integrate this into a dashboard, but interesting to bear in mind!

Erica

0 Likes
831 Views
thornofcrowns
Valued Contributor II

I'd like to see the citation for:

"In fact, typography makes 95% of Graphic design."

I agree, in principle, though that Typography is a vital element in Design.

0 Likes
831 Views
Partner
Partner

Hi Apeksha.

Absolutely NOPE to the first point.

SANS SERIF FOR TITLES - More L E G I B L E. We read it letter by letter but slowly. Equivalent to UPPERCASE.

Serif for body text. - More Readable. We read the shape of each word. It is much faster. Equivalent to lowercase.

Serif means those little feet on each letter that let us see the word as a shape. Sans Serif, without serifs. It is a French term. They were pioners in graphic design much before computers.


As a demonstration, try to read a 2 pages text in Sans Serif and see what happens.

Show me a novel with sans serif body text please.

Now try to read a novel in UPPERCASE and see what happens.

I strongly recomend The Mac is not a Typewritter or The PC is not a Typewritter by Robin Williams (the woman who wrote it, not the actor)

You will also learn about many more aspects of graphic design.


Salutes.

0 Likes
831 Views
Partner
Partner

Thank you Apeksha, great post.

0 Likes
831 Views
Not applicable

Great post Apeksha Pathak!

I created a very simple app (and quite ugly) - to be able to view rendering of desktop, onto browser and by device, found here if anyone is interested (I hope... this being my first post/comment I may have done it wrong):

Font Check App (xFonts.qvw)

Also if you are like me and a lover of typefaces / fonts and using what looks great together you may like this site: http://www.typ.io/

Again thanks for the post and the tips.

0 Likes
831 Views