Block 1

 What are fonts? Fonts are the style of the text. They're also known as typeface or just type for short. In digital design, fonts are separate files that tell the text how to appear, which is also known as rendering.

Here we have the same text rendered in Open Sans, PT Serif, and Space Mono.

Font classifications

Fonts are broadly grouped into classifications. For example, Open Sans is a sans-serif font. PT Serif is a serif font, and Space Mono is a monospaced font. Fonts don't always have their classification in the font name, I just picked these fonts for that reason.

A serif font has serifs... that's these angled extra strokes at the ends of the letters. And these strokes evoke the brush strokes or the stone carvings of early lettering, so these fonts give us a traditional or classic feeling, but they also tend to mean that the font can look a little busier with its detail.

Sans means without, so a sans-serif font doesn't have these additional strokes. These fonts look simpler and cleaner, often giving us a more modern or basic feeling. Some fonts have both a sans-serif and serif version, this makes it easier for us to spot the differences between these different classifications. So here is PT Sans and PT Serif for the same text at the same size. So you can see the shapes and the heights and the widths of the letters are similar, but PT Serif has serifs and PT Sans does not.

Another classification of font you'll often find in dig...another classification of fonts you'll often find in digital design is monospaced fonts. In these fonts, each character is the same width, so that means each letter and space and punctuation mark has the same width. You'll most often find monospaced fonts used for code as it makes it easier to read repeating words and identify patterns in text across different lines.

Monospaced fonts are usually sans-serif fonts because of their clean simplicity. But you can also get serif monospaced fonts. Sometimes you'll also see monospaced fonts used for their utilitarian or technical appearance, kind of for decoration. I've actually used them here in all of these little notes and arrows.

That brings us to a slightly different classification of fonts, which is display and decorative fonts. So display fonts are also known as decorative fonts, and these are fonts that don't really fit the serif or sans-serif classifications. They usually have a distinctive style and appearance, and it can make them quite hard to read in big blocks of text or in very small sizes. But it can make them very impactful and eye catching.

So handwritten fonts that look like handwriting script, fonts that look like old fashioned, formal writing and wacky fonts with quirky details... these are all types of decorative or display fonts. These fonts can be used to great effect if used for the right occasion, but if you use them inappropriately, they can look at best a bit unprofessional, or really make your design hard to read and understand at worst.

Choosing fonts

When it comes to choosing the right font, you can use whichever font you like for your design, but there are some considerations you might want to keep in mind.

First, availability: is the font available for use on the web? Some font files are designed for use in printed media and not the web. So sometimes the font might not work on the web, and sometimes we might not have the rights to use it. We'll look a little bit more at licensing shortly.

Next we have readability. So most people are coming to your UI to complete a task, to read some text or fill out a form. You want to make this as easy as possible by making the text as easy to read as possible. Some characters to look out for are Os and zeros. Can you tell those apart? How about a number one, an uppercase L and a lowercase l? In this first font, you can see the difference. In the second font, it's almost impossible to tell the difference between the letters. And that is going to make text harder to read and understand, particularly if you're reading at speed.

So are you designing an app UI or a website where users read a lot of text? Are you designing a banner? Do you need to consider the logo, the heading, the paragraph, the button, or the label text? Do you need to use the same font for all of them? We'll look at this a little bit more later.

And feel... decorative fonts are fun, but they don't always convey the right feel for your brand or your product or your project. Are you looking for something traditional or modern or friendly or whimsical?

Often you'll be working with an existing brand or logo, and you want a font that compliments the existing materials. So the Penpot logo is lowercase sans-serif, simple shapes, slightly rounded. If I were designing an interface to work with the Penpot logo, I would pick a font that is also a modern sans-serif, simple and slightly rounded. I wouldn't pick a serif font that's old fashioned and slanted with thin shapes. They wouldn't work well together.

What’s in a font?

Not every font is created equally. Some might just include the characters for A to Z. Some might all be uppercase. What languages do you need to support? Do you need accented characters? Do you need numbers? What about maths symbols? What about punctuation? Particularly when it comes to decorative fonts, your font might not have all the features you need, so it's always worth checking the features to avoid your disappointment later.

Content on the web often uses bold text, italic text, and bold italic text for emphasis. So italic text is the slanty text, and bold text is the wider, heavier weight text. Do you need old weights and italics? Probably. And you need to find a font that supports your need.

Additional font styles and weights often come as separate font files, even though they're all considered part of the same font family. This also means the font families can cost more money, and we'll talk a little bit later about the range of font styles and weights throughout this course.

Understanding fonts through case studies

We're going to use some real life interfaces as case studies to help us learn what makes successful UI design. Let's have a look at some of these interfaces to work out what makes a good font for body text.

So what is body text? It's basically the text that makes up the body of the interface, or page body text includes paragraph text labels, buttons, menus, navigation. Let's have a look at the Penpot homepage for an example of body text. If we look at the text alone, we can see that Penpot uses Work Sans for all its body text, all of it.

The sans-serif font is modern and it's easy to read. It has slightly rounded details that makes pop feel approachable and friendly. They vary the size and the weight and the color of the body text and the backgrounds behind the text to give hierarchy to the content, and we'll talk a little bit more about typographic hierarchy later.

If we look at a contrasting example, the New York Times, again with just the text, we can see a few different fonts in use. These are custom versions of paid fonts designed specifically for the newspaper. The paragraph text is in Imperial. The navigation caption button and label text is in Franklin, and the heading text is in Cheltham.

So serif fonts for the article, titles and text really fits that traditional newspaper feel, whereas using a sans-serif font for navigational and informational text makes it quick and easy to read. As so much of the New York Times is text, the combination of these fonts gives the design a very distinctive feel.

Elle.com evokes a similar traditional print publishing feel as the New York Times, but uses an ornate serif font called Modern MT Pro for its headings. The italic style of the font makes for very decorative category names that work because the headings are simple and the text is very large. So while I wouldn't recommend you use decorative or display text for your body text, display fonts can work really well in editorial settings like this.

Choosing fonts that work together is pretty hard. It's not always necessary either. Like we go back to this Penpot example... you can see the same font is used for all the text, but you can still get a lot of variety from different font, weights, sizes, and colors. So when you're choosing your font pairs, we need to consider what is similar or complementary between the fonts and what is different or contrasting between the fonts.

Let's look at another case study, Wise, to see how they pair fonts. Wise have their own custom font, Wise Sans, that they use for some of their headings, and always in uppercase. And they just sprinkle in enough of this slightly quirky, modern font to make their design unique.

But every other font they use is Inter. And Inter is a free and open source font designed for interfaces. It's probably one of the most popular fonts used in user interface design right now. So if you look at these two fonts side by side, you can see they're definitely, contrasting; Wise Sans is heavy weight, it's uppercase. Whereas Inter at its regular weight is thinner and also available in both uppercase and lowercase.

Wise Sans has closed small counters, and these are the empty areas inside the letters. Whereas Inter has large counters which tend to make fonts higher contrast between the letter strokes and the space around them. High contrast is generally considered to make fonts easier to read.

And Wise Sans is tightly spaced here, whereas Inter has looser spacing between the letters. You can choose the spacing yourself independently of the font choice, but there are defaults in every font.

And if we look at the similarities between the fonts, this is what makes them feel harmonious on a page together. For a start, both are sans serif fonts and both have quite geometric shapes. That means the rounded letters almost look like circles, and the square letters follow straight lines and right angles. The thickness of the lines that make up each letter are also consistent for the whole of the letter shape.

You probably want to avoid mixing too many fonts as it can look messy and become hard to read if the dramatically different fonts are competing for your attention. Not only that, but fonts are files that have to be loaded onto a webpage or an app. Font files with a lot of weights and different characters can significantly slow down loading.

And this brings me to the opposite of choosing fonts, and that’s giving up the choice of the font to the user’s platform or web browser. Every platform has its own designed or chosen default fonts. And on the web you can tell the browser to just use that default system UI font. It’s exactly what Wikipedia does.

So this is a screenshot of Wikipedia from my macOS computer, and this might look very different to Wikipedia on your computer if you use Windows or Linux. Using the system font means the font will load immediately and help the page load a lot faster. It’s also very practical if you want an interface to feel familiar to the user.

The downsides are that system fonts are unpredictable. They can change with a software update. They also might not fit in well with your brand. Broadly, I’d say system fonts are a very useful option for apps, but more for marketing focused design work, you might wanna choose something a bit more unique.

Font licensing

You can’t just use any font you find for free. Font files are subject to licensing. Some fonts are free to use with a free and open source license, and some require you pay the font designer to use the font in your designs. With many fonts, you pay different amounts depending on where and how you want to use the font.

Some allow you to use them personally, but you have to pay to use them commercially. There are also platforms where you can get access to a collection of fonts for a subscription fee. When you are looking at a font, it’s important to look at its license and work out. Can I use it for personal projects that are just for me?

Can I use it for commercial projects where I or someone else makes money? Can I use it for websites and apps? Is there a limit on how many page views can I use it for? Printed materials like business cards, flyers, or even books?

One of the reasons why Work Sans is a great choice for Penpot is that it’s a font with a free and open source license. Not only does that mean that Penpot can use the font for its website and its app, but also that other people can self-host Penpot for themselves and they don’t have to pay to use the font either.

Using fonts in Penpot

Now, let’s head on over to the canvas. Penpot gives you access to Google web fonts, and so from the menu, if you select your text and you go to the text option in the design panel, you can choose from any Google web font here.

Now, Google web fonts are free to use for commercial and personal projects without paying. However, some of the fonts on Google web fonts are limited to one style or one weight, so you’ll have to find the original font designer and pay if you want additional styles or weights.

There are also only a limited number of fonts on Google web fonts, and there are loads of amazing font designers out there. If you want to set your design apart, I really recommend you explore options for paying for fonts. They’re often not as expensive as you expect. A font foundry is where fonts are made, and they often give you a free trial or tester fonts if you look them up online. And you can very easily use these tester fonts and any other paid fonts in Penpot by adding them as custom fonts.