Intro to Typography

In this article, you will know Typography and how to use Typography to create useful websites. We will talk about Typography because it is so important. Why? Because most of what we design includes mostly text, together with images. Texts are important, because first of all, words are powerful. That's how people understand what we are trying to tell them. However, they are not only necessary in what they say as words. The font we choose, how we lay them out, and how we format them. It creates a lot of feels and communicates a lot about what we are trying to say with our design.

The Purpose of a Font

When you're working with Type, there are two things that you need to consider. 

The purpose of a font:
  •  Deliver information (Legibility) It needs to be easy to read if you set up a text in a bad font or it's too small or too big or set up, it's hard to read. It is going to end up being a bad design because it is very subtle. People don't understand why they get sick or bored of the design. It's because of the Typography is not legible. It is hard to read.
  • Communicate values (Aesthetics) It helps to convey a message. If you choose a specific font or set it in a particular color or size, it helps communicate. Whether it a premium brand, a friendly brand, and a serious brand. It helps to convey the message of what is that I'm about to read and learn.

Major categories

There are two significant categories that you need to understand when your working with Typography. They are the SERIF and SANS-SERIF.
Serif and San-Serif

The SERIF is the one that has little decoration. That is a leftover from period and history. We had to chop the Type into the stone, the tools that we use to create the Type left this mark, which's called the SERIF.

When we got to modern times, we started to create Type with pens and other modern tools. We've created an exact and current Type, which is called SANS-SERIF. SANS means without in France it. It means without the SERIF

Those are the basic categories which you'll hear a lot of people will talk about it. There are other categories, such as SCRIPT, on how to write stuff—the main ones to remember. Suppose you are thinking about this from a higher level. What you would say is you are trying to communicate something modern and clean. You would probably go with SANS-SERIF font. If you try to create something a little bit more established and old school, you will use a SERIF font. You would see Banks using SERIF font because it communicates to something old, something from a book. Then a lot of times, we are associated with more premium, essential, and more established. That's our initiative instinct when we see this type of font category.

Font properties

I want to jump here in Photoshop to explain some font properties. What I'm about to show you is accessible and a way to work with any design software.

I have a title and a paragraph that are the key components of any type to write on the web or general.

Title and Paragraph on Photoshop

On the right side, we have two panels. We have Character, which is the letters. We have a Paragraph, which is how it aligns and the space before and after or indented.

Character and Paragraph on Photoshop

In terms of Character, this is the Type phase or the actual font. So if we change it, change the font. Then we have called the Font Style.

width.jpg 127 KB

Many fonts have a Font Style within the font itself. It can be very light. Why this matter? When the font is bolder, thicker, it grabs more attention. It looks blacker, and it changes the color. When you were thinking about Type, you can think about this in color. This is black, and you can squint your eyes at this design. The title is very black, and this whole area of text is greyer. However, if we would make this light, then this is great.

Understanding is essential because one of the most important things we want to create for our design is a hierarchy. What are we looking at first? What is more important? You would often like to make people look and notice at the title before, making it bolder the font size. We can make it small because right now, it's big. Then, we have tracking and kerning. Tracking means how much space we have between the letter. The default usually is okay with fonts, but sometimes we want to create a little more room, creating a different field on the page; this might look more premium or tight. If you want that your text is readable, that's how we would play with tracking.

Tracking and Kerning on Photoshop

Kerning is the space between 2 letters. Note that I can only add or subtract between two letters; this is important when working with big titles. Sometimes, you want to adjust this to make sure that the space is equal between all letters. Because sometimes, the Type is significant, you suddenly start to see that some notes have more freedom than others. Usually, you don't do this, but when you're working on a logo when you're working on big titles. Sometimes you want this adjustment.

One essential thing is the actual line-height, which is called Leading. When we have a paragraph, how much space do we have between the lines. There's also a default. Sometimes, the default is good, but you want to adjust a lot of times. For example, when the text is tiny, you need more space between the lines to make sure that you can read it. However, when Type is significant if you have subtitles.

Let's say I want this to be "MY TITLE." In this case, I want to tighten the letters. I want this to be in two lines. The default space between them, you might say it's okay but might choose to make them closer to make this title a little bit tighter.

One more thing that I want you to know is. There's a difference in how this text is built. The first one is called a point text; you can see a point on the paper and write more letters; this is good for titles. However, for paragraphs, there are abounding box—abounding box controls when lines are breaking when you wrap a text. It's called text wrapping. In the paragraph, I can right-click to convert this to point text. It wouldn't make sense to me to manually break lines; every time I break a line, that would be tedious. For paragraphs, you can use paragraph text, and for titles, you can use line text.

One thing to mention in paragraph one of the common mistakes is for people to create long lines. Let's say that the texts are smaller, it is still decent, but this would be a very long line for a lot of times. When the line is long, people will tilt their head to read. That makes the legibility, readability of the text, less comfortable, and people less likely to read this. A guideline that you' de want to remember is that each line about ten words. In this case, maybe 10 or 11. I probably want the lines to break around here. To make sure that this is readable.

Paragraph Text

Now you can see that there's too much space. How do I know that there's too much space? When I'm looking at this text, I can see big white lines in between them. I want this whole area to look in a grey zone that I can focus on. I want to jump between them, and I see that this is a medium brown. I'm going to adjust this live a more likely. The lines are not too tight; it's hard to read, but you don't want to notice the lines' gaps. Cause if you see it, it means your focusing on the hole instead of focusing on the text. These are some basic properties to change and manipulate while you are designing your text. 

What fonts should you use?

There are many fonts; there are tons of free fonts; there are thousands of fonts there. Suppose your a beginner, my advice to you do not start to invent. I would go with some classic.

One of the most famous Italian designers globally, Massimo Bellini.

Vicenzo Bellini

Massimo Bellini was recognized for only six fonts. These are the fonts that he uses: Garamond, Bodoni, Century Expanded, Futura, Times Roman, and Helvetica.

Massimo Bellini Font

It's a mix of SANS-SERIF fonts and with SERIF fonts. Using these combinations, he created tons of different designs for different brands and never got old. These are classic, the right font that you can use today to create a great looking design. These are premium fonts if you are a new designer and don't have the money to buy them. If you have an adobe subscription, you can access adobe fonts, the type kit, which has this high-quality font. However, if you don't have them, you can try to use google fonts. Google has many free fonts that you can use, both on the web and download them to your computer. 

I would google it like "Fultura google font alternative" and you would see what font is similar in terms of the google font to these classic fonts. I would build myself of an arsenal of not more than ten fonts to start using and experimenting with. I will not spend too much time to go with untested fonts if your new designer tries to go something that's tried and right at this point. 

Which size should you use for them?

My recommendation at this point is to go into a web-like Type Scale.


In Type Scale, you can choose from a google font, and they would base on the third hierarchy of fonts. It tells you what font you should be using, and you can see how that would look like on a website.

Usually, when your designing for the web, you are going to have a few headings. The titles for the website, which we commonly referred to them, are h1, h2, h3, h4; this means h1 is the most important, and h2 is less critical, and so forth. You usually don't need more than 3 to 4 headings, and this website gives you the necessary scale of them. I would not try to reinvent the wheel; there's already tried and true systems for scaling fonts. If your beginner, I would use this scale to ensure that you have an excellent clear hierarchy in your website.


I encourage you to exercise. Typography is a crafty skill. You need to practice it and try to manipulate and learn with your hands to develop an eye that can see what is right and what is not good. 

There are two exercises that I would recommend you to do. The first one is that you can go to a dictionary, pick a word, pick its description, and try to create a poster out of it. You can post this on your social media as a challenge. Every day, try to use different font combinations, sizes, and layout to see how you can play around with title and paragraph. Second, try to create a composition of a typographic quote from your favorite author, musician, etc. Design a daily quote. I did this as a side project for a few months and posted it as a daily quote every day. That's something to build your skill. You can use that content on social media to create your profile and to demonstrate your skills. Those are exercises that you might do.


Leave a Comment

Your email address will not be published. Required fields are marked *