Reading Review & Good Practice Checklist || Typography

Principles

My understanding is that these are the first three principles:

  • Honouring the text

This is not to say that type shouldn’t be invisible, rather it is saying that type should be able to make the written word clear. The type has to draw attention to itself before it will be read, but at the same time mist relinquish that attention once the person has been captured to read it. If you ask me, that’s a pretty bold task to do.

  • Letters have a life of it’s own

The economic value of type has changed to becoming an illusion of superhuman speed, stamina patience, and precision to the writing hand. What about hand written typefaces? Maybe the fact that the handwriting typeface is consistent is what makes it more superior. Typography makes the letters come alive. Does this mean that type brings form to the spoken word?

  • Style beyond Style

Type has the power to move freely in the whole domain, as something that is durable and adaptable. It serves a s a function to step in a way that is graceful and vital, instead of lacking in originality, making it cliche and boring. It can be taken as a form of slow performing art which houses many deep emotions. For example, when I read this, I was reminded of the Hallmark greeting cards. Even though it might seem like an arbitrary thing to buy (it’s just a piece of paper i’m buying for someone else), the typeface being used is important when trying to convey a certain type of emotion. The same typeface could be used for a sister’s birthday card or a Christmas card. Maybe style here refers to more than just the design, but maybe the way the design of the typeface is being used?

Good Practice Checklist

In the reading, the authors wrote so many different types of ‘tactics’ to accomplish the principles above. Maybe because i’m a ~*~*millennial*~*~, i’m starting to design for mobile and web design. Here are some of mine (disclaimer: i’m not that smart):

  • Choose your ONE font wisely.

Not only is this for legibility, but it also should be able to stick with you throughout your entire website brand. Like, play with weights and size variants, and if you’re feeling a little crazy, italicise it. But this doesn’t mean you can’t have a another typeface. The other one should compliment your branded ™ typeface. Maybe just stick to 1-3 typefaces. This way you can honour both the words & the brand.

Bad:

style-bad
i’m not going to say anything

Good:

contrast-good
Hey this is dope and fun!

 

  • Size matters

Readability would be another important aspect to take note of. In a world of clickbait titles and fake news, everyone’s just trying to get their information to the most amount of readers of possible. If I find it difficult to read your words…bye! i’m going to read the same news from another news website now. As the laptop/mobile screen is limited, the size matters a lot, so maybe a very small font size for the mobile website isn’t such a good choice.

Bad:

sorry grandma even i cant see anything

Good:

okay grandma i’ll book your dentist appointment now

 

  • Let them breathe! (kerning, tracking, and space)

Another aspect is also to take into consideration the visual layout of it all. Your website type shouldn’t have a huge chunk of text in random corners which just deters readers who now want quick and easy information. This also goes back to making sure that the kerning and tracking of the typeface you chose doesn’t unintentionally overlap each other from desktop website to mobile website.

Bad:

Image result for bad website typography
mom told me to iron my website

Good:

lots of text but the type layout is very responsive to different devices

 

  • Hierarchy and Contrast

With the limited space on mobile, two levels would be a good limitation on hierarchy, which is different to the desktop site which is usually 3 levels. For the mobile, the copy is also lesser than the web face, so the contrast becomes exaggerated. Then, you’d have to weaken the contrast.

Bad:

okay to be honest i kind of dig this website design. I want to create a website like this but as a mini challenge in a video game. I’m almost there on my OSS website with the clashing colours but i don’t want to mess with the HTML.

Good:

color-good
simple. clean. perfection.

References:

  • https://www.mockplus.com/blog/post/typography-in-mobile-design
  • https://www.mockplus.com/blog/post/bad-web-design
  • http://www.topdesignmag.com/20-examples-of-bad-web-design/

Leave a Reply