Typography Crash Course from VistaCreate

    Typography is commonly defined as the style or appearance of text. It’s everywhere you go, it surrounds you 24/7. If you shift your attention a...


    Typography is commonly defined as the style or appearance of text. It’s everywhere you go, it surrounds you 24/7. If you shift your attention and start looking at billboards, advertisements, books on your desk right now, even your TV and computer screen, you’ll find that good and bad typography are everywhere.

    Although you’ll start noticing these things right after you read this article, applying knowledge to your designs right away is kind of tough. Yes, typography influences viewers, but how do we use and apply this knowledge? Today we’ll give you a quick typography crash course so you can equip yourself with new found knowledge and start experimenting with the different typefaces in your own designs.

    Introduction to typography

    Typography is also the art of working with text. Without realizing it, you’re working with text everyday if you put together ads, work in Word documents or simply are sending a generic email. Typography thereby becomes so important to the subtle messages we send others. You probably guessed it by now, but different fonts have different personalities and when to use which style is important to your overall message.

    If you have close to no knowledge about the basics of typography, you can put together a presentation with the really ‘pretty’ font that caught your attention, Comic Sans for example. You will likely discover before the presentation that your audience cringed on the first slide. This is just one example of some typefaces that shouldn’t be used because they’ve become notorious.

    Although typography might sound intimidating to you, seeing as no one’s ever told you you shouldn’t use certain fonts, don’t worry because a little information can go a long way. This quick typography crash course with just a little bit of background knowledge can actually help you make a big difference in day to day activities.

    Different types of fonts

    Serif fonts – font types that have Serifs nesting on the main structures of a letter. It’s a really classic example of a font that is more suitable for more traditional and formal projects. They’re often found in newspapers and magazines.

    example of serif-font

    Sans serif fonts – the main difference with these types of fonts is that they don’t have that extra stroke that you see in the image above on Serif fonts. It’s easy to remember the name because “Sans serif” literally means “without serif” in French. It’s more clean and modern, making it more legible on screens of all sizes.

    example of sans-serif-font

    Display fonts – they come in different styles like the ones below. They are more decorative by nature, and are best used when there is not much text to work with so that the focus is on the style of font and the overall message. You will see display fonts used for titles, as well as on posters more often.


    Image credit: gcflearnfree

    You could say that fonts have personality. Fonts have something to say, as crazy as it sounds. A more prominent example that has been circulating on social media is this image:

    did you read water a different way

    It’s an excellent example of why fonts, font sizes and styles matter. You can pick a font that’s very casual, or find one that will be neutral to not distract the reader. For more artistic projects, you might use more exotic fonts or something completely original and very graphic. With each choice, you’re changing how the font will be interpreted by the viewer.

    Pick a message, find a font that fits

    It always starts with your message and what you’re trying to communicate. Depending on nature of your message and who your audience is, you will need to pick a font that fits with it, not just a random font. As you can see, font families differ and some are more suitable for print, while others for the web.

    Let’s talk about the unspeakable – worst fonts

    If you’re still wondering about the Comic Sans example in the beginning, know this: some fonts come with baggage. Like the following ones that made it to our board of fonts you should never use:

    examples of fonts-you-should-never-use

    Don’t be mistaken, there’s nothing critically wrong with these fonts, it’s just that any designer will tell you that these fonts have a certain ‘reputation’. For example, Comic Sans might not look like a terrible font in comparison to the other ones, but it’s been so overused and is simply outdated to the point where many get annoyed seeing it in print or on websites.

    If there happens to be a time when you stumble on a font, consider that you can use something else that is similar, but not as overused. You can find fonts with a similar look and feel if you like these styles. The possibilities are endless.

    Deciding which fonts to use

    A widespread piece of advice is to keep things simple. In our tutorials, we often encourage you to use 2, at most 3 fonts in your designs. Depending on your project, you really should limit fonts to 1 or 2 because you can make parts of your text stand out by using ‘bold’ or ‘italicize’ your font to make it stand out from the body paragraphs.

    Another trick you can use is have the same body of text have parts in your 1 font, but use variations of a different size. Increasing the size of your font immediately makes it stand out. You can also manipulate your chosen font by weight or style. This single trick is actually a lifesaver when it comes to last minute projects.

    Another great trick for choosing fonts

    When really puzzled about which fonts to choose for bigger projects, remember that the saying “opposites attract” also works for fonts. You can still use 1 font but use a bold and light type to create contrast. If you want to go for different contrasting fonts, choose fonts that are different but complementary. You can read up more on this in our article on pairing fonts.

    Sans Serif with Serif works well, short letters with tall letters or decorative with simple. If this is a hard concept to grasp, you can look to other publications for inspiration. Once you master this skill, font pairing becomes second nature.

    More terms to define

    Understanding and mastering the following concepts is essential for creating designs that look truly professional. When you’re just starting out, you don’t have to submerge yourself in the world of typography terminology which is why we’ll focus on some of the very basic and essential ones to help you with your designs.

    Hierarchy – used to guide the reader’s eye from most important parts of the design, to the other parts in order of importance. Hierarchy helps us focus on where we need to start reading, sort of like showing order of priority. You can use different levels of emphasis to do this.


    Image credit: Piktochart

    How do you start using this tip? It’s actually easier than you think! Look over your text or information and decide what is the most important part of the text, and make it stand out using the aforementioned trick. Use a larger font, contrasting fonts, or change it to bold. The most important information is either bigger, or stands out in style from the rest of the text.

    Don’t focus on too much contrast, as the trick is to keep it simple. Limit yourself to a few complimentary styles or techniques to make your main text stand out.

    Leading the space between lines of text. The simplified term is line spacing. The good news with leading is that you usually don’t have to worry about it and obsess over how much space to leave between the lines because the default settings are usually best.

    That being said, sometimes text needs a little adjusting to make it more comfortable and easy to read. You can experiment with basic editing tools what happens when you leave too much or too little space between lines of text – it becomes quickly ilegible.

    what Leading in typography means

    Image credit: InDesignSkills

    Tracking – space between characters, also known as character spacing. You can make the spacing smaller or bigger depending on your designs. Sometimes this is essential when you want a body of text to fit within invisible margins. Just remember that it is used for artistic purposes to help fill a certain space. Another instance when tracking is applicable is if a font you’ve chosen has spacing between characters that makes it hard to read.

    what tracking-in-typography means

    Image credit: Design Tutsplus

    Kerning – spacing between specific characters. It might sound similar to tracking, but kerning is actually more particular where it applies to individual characters, as separate letters fit differently together. Kerning is focused on equal distribution of spacing, whereas kerning is more tricky and particular. For these reasons, bad kerning is a pet peeve of many designers.

    A visual example will probably help you grasp the concept. The spacing in the first line of text is so evident that it kind of hurts your eye, doesn’t it? For this reason, messing with kerning is a no-no. If you notice that a default font has bad kerning, move on to a different font. Trying to fix it will be a headache.


    Here is an example to show you the difference between tracking and kerning:

    difference bettweeb kerning and tracking


    Even knowing a little bit about fonts can help you elevate your designs. Good typography is the difference between an ordinary project, and one that stands out and is remembered. It’s about creating a visual impact, something that will help strengthen your message and make your readers or audience pay attention.

    improved-design with the right typography

    Even the slightest interest in typography will instantly improve your ability to make your content more presentable. Whether you’re working for print or online, remember that seeing more and experimenting will enable you to do more and play around with fonts just like professionals do.

    VistaCreate Team

    Never miss a thing

    Subscribe to the VistaCreate newsletter and never miss out on fresh template collections, essential service updates, and other helpful information.

    Contribute to VistaCreate Blog

    Share your story with millions of creators using VistaCreate worldwide.