Visual aesthetics III – basics of typography

In the last two posts I gave a short introduction and explained why choosing the right font and design can determine whether your business is going to succeed of not.
This week we will shift the focus to a different field; we will see the matter from a designer’s perspective.

Let’s check out some basics and make you a typography geek!

1. Typeface or font?

The first thing you have to know is the difference between typeface and font.
A typeface is a family of fonts, meaning a specific design of an alphabet. You probably know Arial, Lucida or Gill Sans.
On the other hand, font is one particular style within a family. Meaning Arial Black, Lucida Sans and Gill Sans Bold.

2. Typography terms 

The next thing you should at least have seen are some basic terms connected with typography. Webdesignfan.com gives a great list for some terminology:

Important is to see the difference between serif and sans serif because what you choose can in a way influence the readability.
Using serif, it is often easier to read as the letters are connected and form a unit, a word. Therefore serif is usually used for texts printed in books.

Sans serifs became quite popular in the 19th century because it looked more “modern”. Sans serif is mainly used in magazine headings and for websites since they are easier to read when looking hours on a computer screen.

3. Alignment

Alignments play an important role when it comes to readability. Alignment to the left is the most common and best way because we are used to read from left to right. When you have Chinese text, it may be advisable to align to the right since Chinese is read from right to left. Another use for alignment to the right is when you want to highlight a passage from the text, because it can slow down your read as you are not used to the different direction of read.
Justified alignment is mainly used in newspapers but rather not advisable since you often don’t see where the line will end.
Centered alignment again has a different effect. When used properly, it can give your text a touch of elegance, but if you fail to do so, it confuses the reader instead.

4. Size

Different font sizes are essential, and I think that everybody uses different sizes unconsciously. It should be clear that different sizes give different importance and priorities to the text parts; and of course it is advisable to choose a size which makes it poosible to read the text!

5.Kerning, tracking and leading  

Kerning is adjusting the spacing between individual characters. It involves reducing as well as increasing the space between two letters. Tracking on the opposite is the spacing of a group of characters.

It may seems to be a very little detail but in fact it can have an impact on your whole design if you don’t pay attention to it because spaces are crucial when it comes to leading the reader’s eye. If your gaps between your letters are too big, the reader will not have an easy read since it makes it difficult to read the words. On the other hand, if your letters are too crowded, the text will look heavy to the reader’S eye and consequently be less interesting to the reader.

The same is true for leading,which refers to the amount of space between the lines in a text.

Why do I need to know all this?
Because when you choose your font, it is important that

  • you text is readable. Else your message may get lost. Therefore it is often said that simple font is better.
  • your font is appropriate for your target group. Whether you are a lawyer, a party service or a child product company, your font should show that to your reader.
  • your font conveys the right mood and message.

Like other page elements, fonts portray mood and emotion, just like color scheme and graphics do. Heavy fonts convey strength, lightweight fonts give an air of openness and space, decorative fonts add whimsy. Coupled with scale and color choices, these can be powerful tools when conveying feelings and attitudes to your reader.

For instance, bold headlines feel very loud and confident. When you come across a large, bold headline, it’s impossible not to avoid: It grabs you. Conversely, a headline written in a lighter font is more unobtrusive and conveys its message without getting in your face to do so. Open fonts feel more free and often convey more movement. (mashable.com)

  • your font adapts to different formats, especially when your content is in the web. Not everybody has the same web access. May it be type of browser or screen resolution, your font is sometimes displayed differently. Hence your font should not be  overcomplicated.
  • your font is appealing to the reader. Because the first impression is always the most important.
But probably the most important thing you have to keep in mind is expressed by web developer Kelli Shaver :
Fonts can greatly affect the aesthetics of your site and can convey a lot of meaning in their visual appearance, but remember, when it comes to a choice between looking good and being easy to read, always go for easy to read.
Surely there is a lot more to explore. So if you want to dig into the beautiful world of typography a little bit more, here are some links you should check out:
Advertisements

About Mai

My name is Mai, I'm 23 years old and currently studying in Berlin. I am especially interested in different cultures, art, design and like to be surrounded by beautiful things. This is my first time blogging, I will try to provide many interesting and diverse topics and inspirations for you to read. I'm open for discussions, feedback and ideas from other bloggers, so don't be shy if there are any questions or suggestions. Have fun exploring!
This entry was posted in Aesthetics, IT and tagged , , . Bookmark the permalink.

4 Responses to Visual aesthetics III – basics of typography

  1. Nicpic says:

    Hi Mai,
    Again I am amazed by your Blog post! You manage to include a lot of information, structure it very clearly using subheads and incorporate all important aspects, like links, white space, unnumbered as well as numbered lists, appropriate pictures and quotations!
    With your section on “Why do I need to know all this” you manage to make the post not only informative but also important to us! Furthermore it is always amazing to get information on thing you come into contact with almost everyday and use unconsciously as for example the difference between typeface or font and different sizes. All of us make use of them but if we do it consciously we might be able to improve what we are already doing.
    I only have two little points of not even criticism but room to improve!
    Firstly I would have liked more examples to keep the post from getting a little bit dry and technical. For example you could have included your last invitation to a birthday party or shown examples of different fonts appropriate for different events. Make your post more interactive!
    And secondly a little bit more color would have been nice. Because your post consists mainly of black and white letters it seems very text rich and does not appeal as much to me as your previous ones did!
    Still I think the idea of dividing one topic into three different posts was genius and makes readers more anxious for you following posts!
    Keep up the great work!
    Nicky

  2. Hi there, just became alert to your blog through Google,
    and found that it’s truly informative. I’m going to watch out for brussels. I’ll be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  3. naturally like your web-site but you have to check the spelling on several of your posts. A number of them are rife with spelling issues and I find it very troublesome to tell the truth nevertheless I will definitely come back again.

  4. Pingback: Basics of Typography | bea-utiful.co

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s