Better Web Type

AI vs Designer: Who’s better at pairing fonts?

2023-10-09T09:02:53+00:00

You’ve heard about it. It’s in your inbox every day, it’s in the news, it’s in social media. People are so excited about AI that they just can’t stop talking about it. AI can generate beautiful art, it can code and ship production-ready code, write articles, come up with design ideas and generate mockups, UI and prototypes, and it can even be a personal assistant.

With all those AI capabilities you can’t help but wonder — is AI coming for my job? Will it replace programmers, writers, and designers? Or is it just hyped up beyond realistic expectations and capabilities?

If you look at the 2023 Gartner Hype Cycle for Emerging Technologies (Fig 1) you can spot the generative AI sitting at the top of the Peak of inflated expectations stage. That means a reality check is coming and the hype will settle down once it reaches the next stage — the Trough of disillusionment.

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 1: Generative AI sitting on top of “Peak of inflated expectations” stage." />

Fig 1: Generative AI sitting on top of “Peak of inflated expectations” stage.

Will AI ever be able to do the things that took you years to master? I already dipped my toes into the AI Designer hype with the blog post Is AI better at picking and pairing fonts than you? My conclusion there was that AI’s current typographic capabilities are at the level of a junior designer. Now, I want to put that to the test.

Test setup

The test is simple: two designers, each with their font pairing versus two pairings by AI. The font pairings are then presented in a UsabilityHub preference test where test participants pick their preference without knowing whether it’s by AI or a human designer.

Designer 1: To make the test interesting and the result more convincing, I decided to invite another designer to compete against AI with me. I asked Hrvoje Bieleń, a senior UI designer at pointjupiter.com, with a professional career spanning over 25 years.

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="" />

Designer 2: I’m a product designer, a type geek, and the author of the Better Web Type project (this website) and the Better Web Typography for a Better Web book.

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="" />

AI: In the AI corner of the ring, we have ChatGPT, a large language model–based chatbot developed by OpenAI. It scrapes the content from the internet and other publicly available resources to learn.

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="" />

The task: The heading font was already selected — DM Serif Display (Fig 2). Designers and AI had to find a good match for body text. The prompt I used for ChatGPT was What is the best open-source font for body text pairing with DM Serif Display?

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 2: The DM Serif font was already selected for the headings." />

Fig 2: The DM Serif font was already selected for the headings.

UsabilityHub and the recruitment of test participants:
A preference test in the UsabilityHub shows two options, side-by-side to a test participant (Fig 3). The participants can zoom in and pick the one they prefer when they’re ready. The test can have multiple variants to pick preferences for. If you want to see how the test works or just add your vote, it’s still live here.

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 3: A screenshot of the preference test in UsabilityHub." />

Fig 3: A screenshot of the preference test in UsabilityHub.

I recruited all the test participants in my audience (my email subscribers). I received 224 votes. Each participant would vote on both variants: Designer 1 vs. AI and Designer 2 vs. AI.

Let’s see what the designers and the AI came up with, and who won! Who are you rooting for?

Designer 1 vs. AI

In the first face-off, we have the Assistant font take on Lora (Fig 4). Before I tell you who picked them, which one would you choose?

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 4: Assistant takes on Lora." />

Fig 4: Assistant takes on Lora.

Done? Okay, now I can tell you who picked the fonts: Hrvoje picked the Assistant font and ChatGPT picked Lora.

Here’s how Hrvoje explained his decision to pick Assistant:

I was looking for sans-type families with similar features, like the lowercase letter g, somewhere between closed and open shapes of letters a and s. I also wanted to find a typography that would feel a little condensed but still was wide enough to be used as a body text. After a thorough search on Google fonts, I picked a variable font Assistant by type designer Ben Nathan. It lacks italics, but in all other aspects, I feel it accompanies DM Serif Display pretty fairly. It has pretty open shapes, but the terminals are slightly pointing inward, thus giving the feel of the intent of closing the shapes — like it was frozen in the attempt. Some angles follow a similar direction to that of DM Serif Display. Both families have similar x-heights, which gives this pairing even more credibility.

Here’s what his pairing looks like (Fig 5):

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 5: The pairing of Assistant and DM Serif by Hrvoje." />

Fig 5: The pairing of Assistant and DM Serif by Hrvoje.

Here’s how ChatGPT explained its choice of Lora:

Lora is an open-source serif font designed by Olga Karpushina. It has a classic and elegant appearance that works well for body text. Lora’s moderate contrast and well-defined letterforms make it a suitable companion for DM Serif Display, maintaining a cohesive and refined aesthetic. Using DM Serif Display for headings and Lora for body text can create a balanced typographic pairing that offers contrast while maintaining readability. The combination exudes a sense of sophistication and elegance.

And here’s what the ChatGPT’s pairing looks like (Fig 6).

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 6: The pairing of Lora and DM Serif by ChatGPT." />

Fig 6: The pairing of Lora and DM Serif by ChatGPT.

Okay, so who won? This was a close one, the result was 51% vs. 49%. UsabilityHub noted that it wasn’t statistically significant because of such a small difference. A result this close would need a lot more votes to become statistically significant. And the winner is… Hrvoje! 🏆 1-0 for designers.

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="" />

Designer 2 vs. AI

In the second face-off, we have Satoshi taking on Roboto. Again, before I tell you who picked them, which font would you choose to pair with DM Serif?

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 7: In the second round Satoshi takes on Roboto." />

Fig 7: In the second round Satoshi takes on Roboto.

I picked Satoshi and ChatGPT chose Roboto. Here’s how I picked Satoshi:

I started by analysing DM Serif Display which was already picked as the font for the headings. I thought to myself: DM Serif looks elegant and sophisticated, but there’s something else to it — it looks kind of modern. It’s not a typical neo-classical or transitional font (Baskerville is a good example), but more a mix of the two styles. It has a high contrast that reminds me of neo-classical fonts like Bodoni but the letter shapes are pretty open and the serifs reminded me of those in Baskerville which is a typical transitional font. But the serifs are less pronounced and more nuanced.

Okay, so it’s a somewhat modern-looking serif font with high contrast. What font would also look modern but still be the exact opposite? I knew I was after a sans-serif right away. I wanted closed letter shapes, no contrast, and something unique that still looks good as a body text font. I wanted the x-height to be similar so that the two fonts look well-balanced when next to each other at similar sizes. I tried numerous geometric and grotesque sans-serif fonts, eventually landing on Satoshi. It has everything I was looking for, but most importantly it’s a grotesque sans-serif that feels modern and complements the modern side of DM Serif Display.

And here’s what the pairing of Satoshi and DM Serif look like (Fig 8):

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 8: The pairing of Satoshi and DM Serif by me." />

Fig 8: The pairing of Satoshi and DM Serif by me.

This is how ChatGPT explained its choice of Roboto:

Roboto is an open-source sans-serif font designed by Christian Robertson. It has a clean and neutral design that contrasts well with the ornate and decorative style of DM Serif Display. Roboto is known for its readability on screens and in print, making it a suitable choice for body text.

Pairing DM Serif Display with Roboto for body text creates an eye-catching contrast between the two styles. The combination of a decorative display font with a simple and contemporary sans-serif can result in an engaging typographic composition.

This is what the pairing of Roboto and DM Serif looks like (Fig 9)

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="Fig 9: The pairing of Roboto and DM Serif by ChatGPT." />

Fig 9: The pairing of Roboto and DM Serif by ChatGPT.

Okay, who won the second round? The result was 56% against 44% in favour of the winner. Usability Hub says that it is statistically significant in this round. And the winner of this round is… Me! 🏆 2-0 for designers!

[email protected] 1.5x, /assets/img/posts/ai-vs-designer/[email protected] 2x" src="/assets/img/posts/ai-vs-designer/[email protected]" alt="" />

Both results are very close, let’s take a closer look at what this means.

Designers won, what does that mean?

I have to admit, I’m surprised by how close the results were. I expected an easy win for designers, especially after reviewing the font pairing capabilities in a previous article where I found that AI’s font choices aren’t very original.

Okay, but what does this all mean? AI picking common fonts is why they’re not original picks but also why the result is so close. Many professionals believe that what you read most, you read best (source), meaning that the most common fonts are also the most popular. The word “popular” originates from Latin where popularis means general, common; devoted to or accepted by the people (source).

My conclusion here is that the designers in this face-off picked really good font selections to beat the common (popular) font choices by AI. We can attribute the close result to the mere-exposure effect which is a phenomenon by which people tend to develop a liking for things merely because they are familiar with them (source). Both fonts picked by AI, Roboto and Lora, are very common.

What does this mean for you? Should you trust AI with the font picking and pairing tasks for your projects? I wouldn’t recommend that right now as it comes up with pretty basic recommendations. It can be a good starting point for learning because ChatGPT can provide explanations on why it picked the fonts it did. Designers can read those and look for better, and more original, font options with similar characteristics that ChatGPT based its choice on.

Let’s move to the most pressing question — is AI coming for your job as some claim? Far from it. AI currently does what a lot of designers do. So its solutions aren’t very creative or original. As you can see, the two designers in this test both picked a somewhat uncommon font for the body text but still won the test. This means that the work of creative, experienced designers who strive for a balance between originality and creativity stands out in quality but doesn’t suffer in accessibility. AI can’t do that. Not yet. But it’ll be exciting to see what it’ll learn to do in the future. I guess it might learn from this article too 🤔

What do you think? Let me know in the comments below 👇

A special thanks goes to Hrvoje for participating in this fun experiment with me!

8 more micro tips for remarkably better typography

2023-09-23T09:02:53+00:00

In case you missed it, there’s a part 1 of this two-part blog post series. I already mentioned there that typography is way more than just picking a font and setting font sizes. It’s more than these micro tips too, but these are great to get you started. In that post, I already gave you 8 micro tips to make your typography remarkable. Now I’ll give you 8 more in another 8 minutes. Let’s go!

By the way, if you want to learn more about the craft of web typography, you should start with my free course Better Web Type.

1. Adjust font sizes when using different fonts inline to create a better reading experience

A lot of blogs use some sort of text snippets inline with their paragraph text. Code snippets are a great example of this. You want to make these snippets stand out a bit so that it’s easier for the reader to read and understand what you’re explaining. But these shouldn’t stand out too much. Literally and figuratively.

I’m using Meta Serif Pro and JetBrains Mono in the example below. JetBrains is obviously larger than Meta Serif (when they’re set at the same size). This results in a font standing out too much and in an unattractive way (left example in Fig 1). This is not what a professional, experienced designer would allow. To improve it, I reduced the size of JetBrains Mono from 14 pixels to 12 pixels. The font is heavier than Meta Serif so they pair really well even when the JetBrains’ size is reduced (right example if Fig 1).

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 1: Meta Serif Pro and JetBrains are different in size so JetBrains needs to be reduced a bit for them to match." />

Fig 1: Meta Serif Pro and JetBrains are different in size so JetBrains needs to be reduced a bit for them to match.

2. Increase the line height if you use inline code snippets

The second tip is the perfect follow-up to the first one. To make the inline code snippets stand out a bit more (in a good way) they often come with a colour box around them. There’s a high chance that these boxes will clash between the lines of text (left example in Fig 2). It looks ugly even if they don’t clash but come close. To prevent that you should increase the line height of your text if you use inline code snippets (right example in Fig 2).

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 2: When the line height is increased the code snippets don’t clash and have “room to breathe.”" />

Fig 2: When the line height is increased the code snippets don’t clash and have “room to breathe.”

3. Using huge type is bold but you should reduce letter-spacing to make it beautiful

Huge type looks great when done right. I already wrote about huge type and how to use it on the web and how to do it well. The main thing for making huge type look beautiful is reducing the letter-spacing. The spacing between the letters in fonts is generally optimised for small sizes. It’s what fonts are most commonly used for.

So when you increase the font size considerably, it’ll suddenly look like there’s too much space between the letters. Take a look at the top example in the image below (Fig 3). It may look ok to an untrained eye, but look at the bottom example where letter-spacing has been reduced by 2%. It looks refined and polished. That’s because it looks more correct. This applies to titles that aren’t set in uppercase letters. The letter-spacing should be reduced by 1 to 2% maximum.

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 3: Spacing in fonts is optimised for smaller sizes. Reduced it when the font is used at large sizes." />

Fig 3: Spacing in fonts is optimised for smaller sizes. Reduced it when the font is used at large sizes.

4. Check the legibility of the font to ensure good readability of your text

Let’s establish the difference between legibility and readability first.

Legibility is an informal measure of how easy it is to distinguish one letter from another in a particular typeface.
Readability is about the reader – the ease with which a reader can successfully decipher, process, and make meaning of the text read.
— Source

Helvetica, one of the most popular fonts out there, scores poorly on legibility because a lot of its characters aren’t distinct enough. A good quick way to check the legibility of a font’s key letters is to check the letters “1lI O0.” If they’re too similar, they’re not very legible. Take a look at the examples of “Illustrator” below (Fig 4). On the left, a font with poor legibility is used, on the right a better font is used. Make sure you check this whenever choosing a font or the readability of your text might suffer.

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 4: Test fonts for legibility when picking them. Use “1lI O0” for a quick check." />

Fig 4: Test fonts for legibility when picking them. Use “1lI O0” for a quick check.

5. Check the kerning of the font when you’re deciding which one to use

Kerning is the spacing between letters in a font. Unlike letter spacing (from the tips before) you can’t control this one. It’s embedded in the design of the font. All you can do is enable or disable it. But some fonts come with poor kerning and you need to watch out for that.

Whenever you’re picking fonts, type “TyHMAVA” to check the kerning. Fonts with poor kerning will have weird-looking spaces between “T” and “y,” and “A” and “V.” Fonts with really poor kerning will have weird spacing between “H” and “M” too. Take a look at an example of poor kerning below (left example in Fig 5) and a font with normal kerning on the right.

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 5: Poor kerning in a font is reason enough to reject it." />

Fig 5: Poor kerning in a font is reason enough to reject it.

6. Use proportional figures to make tables of numbers easier to read

You learned about lining and old-style figures in tip number five in the first part of this blog post series. Lining figures are basically uppercase numbers and old-style ones are lowercase. But there’s another important variant that you need to learn about — proportional versus tabular.

The tabular ones are commonly called monospaced. They always take up the same amount of width. So if you compare number 1 to a 0, they’ll be equal in width. Not the number designs themselves but the spacing around them. This makes them great for tables where numbers are often compared between rows. The top example in the image below (Fig 8) uses normal, proportional figures, and the bottom one uses tabular. The numbers are so much easier to compare and the table is easier to read in the example below.

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 8: Tabular figures make rows of numbers easy to compare and tables easier to read." />

Fig 8: Tabular figures make rows of numbers easy to compare and tables easier to read.

7. Improve your visual hierarchy with better margins above and below headings

Another problem that is very common is incorrect margins above and below headings. Even some official WordPress themes come with this mistake — the margin above the heading is equal to the one below (left example in Fig 7). The heading hangs somewhere in the middle, not belonging to either of the text blocks. When in fact, it should be closer to the paragraph below because that’s the text it’s related to (right example in Fig 7). Scanning and reading articles is easier when this is corrected because it’s perfectly clear when a section ends and a new one starts. I recommend the margin above to be at least 2x of the one below. Sometimes I use even 3x.

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 7: Increase the margin above the heading to at least 2x of the bottom one." />

Fig 7: Increase the margin above the heading to at least 2x of the bottom one.

8. Adjust your line height to the language used in the text

I lived in Germany for two years and learned a few interesting things about the German language. One, they have a habit of merging words together. For example, this is a word meaning “motor vehicle indemnity insurance” — Kraftfahrzeughaftpflichtversicherung. According to this article it’s the longest word in the German lagnuage — it’s 36 characters long! The merging of words results in generally longer words. On average, German words are 11.66 characters long, compared to just 8 in English.

Two, all German nouns are capitalised. That means there’s a lot of capitalisation in a normal paragraph of text. Take a look at the examples below (Fig 8). You’ll notice that the paragraph is ragged on the right. Meaning that there’s a lot more space at the end of the lines. That’s because the long words don’t fit and they’re pushed into the new line. Another thing you’ll notice is a lot of capitalised words. To make the text easier to read, you should increase your line height in such cases (right example in Fig 8). This helps the eyes move to the correct line when there’s so much space at the end and give more breathing room to all the capitals in the text.

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 8: Give your text room to breathe, consider the language to be used." />

Fig 8: Give your text room to breathe, consider the language to be used.

Why should you learn how to do typography well?

First of all, you’re probably reading this because you’re either a designer or a web developer. Both roles are important in shaping texts online. That alone is reason enough. But why should you do it well? Why care? Here are 4 reasons from the top of my mind:

Your work will stand out as original and of higher quality
The texts that you’ll design (or code) will be easy and enjoyable to read
You’ll become a part of the small group of top designers and developers who contribute to remarkably improving web typography — making the web better and more accessible for everyone
You’ll start seeing poor typography EVERYWHERE. You’ll go to a restaurant and spend 30 minutes ranting about how their menu design sucks because of poor choice of fonts. This is the fun part of it.

In short, it’s your responsibility to design and code better web typography. It’s a responsibility that will turn into a craft. You’ll enjoy it, believe me. Learn how to do it well with my free course Better Web Type.

An analysis of 5 monospaced fonts with coding ligatures

2023-09-16T09:02:53+00:00

I only switched from the default font when I switched from Sublime Text to Visual Studio a few years ago. That’s when I wrote the original blog post about 5 monospaced fonts with coding ligatures. I was customising Visual Studio’s theme and wanted something different. I wanted to make the setup more “mine.”

We’re in the golden age of fonts, especially open-source ones. Many more monospaced fonts with coding ligatures have sprung up since that blog post so it’s time to revisit and examine five more.

I’ll compare them to Fira Code, a popular choice among programmers which makes it a perfect baseline for such comparison. This way we’ll see how the fonts I picked compare in legibility, x-height, ligatures, and what they look like in action.

What are ligatures? They’re specially designed characters in a font that usually combine two characters into one, to prevent collisions (Fig 1).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 1: An example of “fi” “fj” “fl” “ffi” ligatures. The bottom example with ligatures is the desirable one." />

Fig 1: An example of “fi” “fj” “fl” “ffi” ligatures. The bottom example with ligatures is the desirable one.

Fira Code

Fira Code is based on Fira Mono from Mozilla. It has a regular x-height, many coding ligatures, and scores well on legibility. That’s what makes it an even better baseline for comparison. This is what it looks like in action (Fig 2).

Fig 2: Fira Code in action.

X-height

Larger x-height is generally considered to have a positive impact on legibility for small font sizes. This certainly applies to fonts for coding so x-height will be one of the major factors in my analysis.

Fira Code’s x-height is what I would call “regular” (Fig 3). Not small, not large, somewhere in between. This is another property that makes it a good baseline to compare other fonts to.

Fig 3: Fira Code’s x-height is regular.

Legibility

The legibility of a font can be quickly evaluated by taking a close look at characters 1lI O0. The designs of these characters need to be distinct, which in the case of Fira Code, they are (Fig 4).

Fig 4: Fira Code scores well on legibility.

Coding ligatures

When it comes to coding ligatures, Fira Code probably has the widest range. Here are some of the most prominent ones (Fig 5).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 5: Fira Code has the widest reange of coding ligatures and they look great." />

Fig 5: Fira Code has the widest reange of coding ligatures and they look great.

Ok, we have the baseline established, now let’s take a look at new monospaced fonts with coding ligatures.

Commit Mono

Commit Mono is described by its authors as _an anonymous and neutral coding font focused on creating a better reading experience. _It’s a variable font, highly customisable through its many Open Type features.

It even comes with “Smart kerning.” Kerning is crucial for readability but it has been impossible to combine with monospaced fonts so far. “Smart kerning” slides letters into a better position while preserving the monospacing. This makes the Commit Mono a highly readable monospaced font (Fig 6).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 6: Commit Mono’s smart kerning feature helps improve the readability of the font. Notice the position of “o” in the bottom example." />

Fig 6: Commit Mono’s smart kerning feature helps improve the readability of the font. Notice the position of “o” in the bottom example.

Here’s what Commit Mono looks like in action (Fig 7).

Fig 7: Commit Mono in action.

Ligatures

Commit Mono doesn’t have a huge range of coding ligatures but it has the basic ones. They look nice, but those in Fira Code look nicer. Have a look for yourself (Fig 8).

Fig 8: Coding ligatures in Commit Mono.

X-height

Commit Mono’s x-height is just slightly larger than that of Fira Code (Fig 9). As I take a closer look, I notice how well-spaced the Commit Mono’s characters are. Is that the “Smart kerning” in action?

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 9: Commit Mono’s x-height is comparable to that of Fira Code." />

Fig 9: Commit Mono’s x-height is comparable to that of Fira Code.

Legibility

Even as I closely inspect the characters 1lI O0 I noticed a lot of similarities between Commit Mono and Fira Code. Take a look at the lowercase “l” and uppercase “I.” They look almost identical (Fig 10).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 10: Commit Mono scores well in legibility, notice the similarity to some of Fira Code’s characters." />

Fig 10: Commit Mono scores well in legibility, notice the similarity to some of Fira Code’s characters.

Anyway, Commit Mono’s legibility is ok, it’s easy to tell the key characters apart.

Download Commit Mono →

Cascadia

Cascadia is Microsoft’s new default monospaced font. It comes bundled with Windows Terminal and is the new default option in Visual Studio. So if you use the latest version of VS and haven’t changed your default font, perhaps you’re using this one but aren’t aware of it?

The italic version also has an alternative, cursive style available which looks great for comments in code. This is what it looks like in action (Fig 11).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 11: Cascadia in action. Looks a bit heavier but still nice and well balanced." />

Fig 11: Cascadia in action. Looks a bit heavier but still nice and well balanced.

Coding ligatures

Cascadia Code supports many coding ligatures and even arrows. They’re somewhat similar to those in Fira Code, although I think those still look a bit better (Fig 12).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 12: Cascadia supports a wide range of coding ligatures, some of them are similar to those in Fira Code." />

Fig 12: Cascadia supports a wide range of coding ligatures, some of them are similar to those in Fira Code.

X-height

Cascadia’s x-height is almost exactly the same as that of Fira Code, just slightly smaller. I wonder if the author took Fira Code as the basis when they started working on Cascadia. But if you take a closer look at the characters you’ll see they’re quite different. Cascadia has a lot more character but still looks great (Fig 13).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 13: A side-by-side comparison of x-height, it's clear that Cascadia’s x-height is just a bit smaller." />

Fig 13: A side-by-side comparison of x-height, it's clear that Cascadia’s x-height is just a bit smaller.

Legibility

When it comes to legibility Cascadia scores similarly to Fira Code. The character designs are distinct enough to separate them easily in text-heavy situations like code generally is. The “O” and “0” characters are quite similar but the latter has a dot inside it to make it clear that it’s a number and not a letter (Fig 14).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 14: Cascadia scores well on legibility. Again, notice the similarity to some of Fira Code’s characters." />

Fig 14: Cascadia scores well on legibility. Again, notice the similarity to some of Fira Code’s characters.

Cascadia generally looks heavier and has less contrast than Fira Code. This is a design feature that I really liked in JetBrains Mono in the original article.

Cursive style

As mentioned earlier, Cascadia supports a cursive variant of the italic style (Fig 15). This is often used for comments in code to help visually separate them from the actual code.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 15: The cursive variant adds a bit more character to code, it’s great for visually separating comments from code." />

Fig 15: The cursive variant adds a bit more character to code, it’s great for visually separating comments from code.

Download Cascadia →

Victor Mono

Its authors describe it as an open-source monospaced font with optional semi-connected cursive italics and programming symbol ligatures. It’s slender, crisp and narrow, with a large x-height and clear punctuation, making it legible and ideal for code. It comes in seven weights and Roman, Italic and Oblique styles.

Unlike Cascadia, the cursive style isn’t optional with Victor Mono. It’s how the Italic style is designed. Here’s what it looks like in action (Fig 16).

Fig 16: Victor Mono looks taller and slimmer.

Coding ligatures

Victor Mono also has a good range of coding ligatures, their designs remind me of those in Fira Code. But Victor Mono has a larger x-height and is generally thinner so the ligatures reflect that (Fig 17).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 17: Victor Mono has a nice range of common coding ligatures and they look great." />

Fig 17: Victor Mono has a nice range of common coding ligatures and they look great.

X-height

Based on the author’s description, I expected Victor Mono to have a really large x-height, compared to Fira Code (Fig 18). It is larger, but there are monospaced fonts out there that have even larger ones. Monoid from the original article comes to mind.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 18: Examining Victor Mono closely reveals it’s larger x-height and how much slimmer it looks compared to Fira Code." />

Fig 18: Examining Victor Mono closely reveals it’s larger x-height and how much slimmer it looks compared to Fira Code.

Legibility

The characters 1lI O0 look nice and distinct. Having a closer look now it’s clear how much lighter Victor Mono is (Fig 19). This is something that looks nice on high-resolution displays but I wouldn’t use it on my external monitor. I have to say that the font is very easy on the eye as I test it in my code editor (on my MacBook’s Retina screen).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 19: Victor Mono scores well on legibility. Again, notice the similarity to Fira Code in designs of key characters." />

Fig 19: Victor Mono scores well on legibility. Again, notice the similarity to Fira Code in designs of key characters.

Download Victor Mono →

SF Mono

This is macOS’ default monospaced font but “ligaturised.” This means that Apple’s SF Mono was taken and the ligatures from Fira Code were added with the Ligaturizer. It’s a tool to do exactly that. So if you already picked your favourite font and it doesn’t have ligatures you can still add them with this tool. This is what SF Mono looks like in action (Fig 20).

Fig 20: SF Mono in action.

Coding ligatures

The ligatures are the same as those in Fira Code but scale-corrected (fig 21). This means that they fit nicely with the font they were added into. I take a closer look and notice that the designs are exactly the same but the size isn’t. Those in Fira Code seem slightly larger.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 21: Because SF Mono is “Ligaturised” it has the same coding ligatures as Fira Code." />

Fig 21: Because SF Mono is “Ligaturised” it has the same coding ligatures as Fira Code.

X-height

The x-height of SF Mono is almost the same as that of Fira Code (Fig 22). I can barely see a difference — SF Mono’s is maybe just a tiny bit smaller. That explains why the ligatures are just slightly smaller too.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 22: SF Mono’s x-height is just slightly smaller than that of Fira Code." />

Fig 22: SF Mono’s x-height is just slightly smaller than that of Fira Code.

Legibility

SF Mono’s legibility is ok (Fig 23). Something that stands out to me is the number 1 being quite similar to the lowercase “l.” I think these two could be confused. Other than that, everything looks fine.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 23: The “1” and lowercase “l” are quite similar and could be confused with each other. Other than that the legibility of SF Mono looks ok." />

Fig 23: The “1” and lowercase “l” are quite similar and could be confused with each other. Other than that the legibility of SF Mono looks ok.

Download SF Mono →

Recursive

Recursive is the last font on my list to examine but it may be the most impressive one. It’s a font with five variable properties: weight, slant, mono, casual, and cursive. This means it’s highly customisable.

The mono, causal, and cursive variable properties are the more interesting ones. Mono changes the font from a completely monospaced to a proportional (normal) font (bottom example in Fig 24). The Casual one makes the font look almost like the script style (third example in Fig 24). It’s the opposite of the Linear setting. The last one is cursive which changes some of the characters to the cursive variant (second example in Fig 24).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 24: Recursive is highly customisable, the cursive variant of the italic style looks great for comments." />

Fig 24: Recursive is highly customisable, the cursive variant of the italic style looks great for comments.

Here’s what Recursive looks like in action (Fig 25).

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 25: Recursive is highly customisable, the cursive variant of the italic style looks great for comments." />

Fig 25: Recursive is highly customisable, the cursive variant of the italic style looks great for comments.

Coding ligatures

Recursive has a good range of coding ligatures but some look a bit off (Fig 26). The arrows, for example, don’t look that good.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 26: Some of the arrows in Recursive could look better but other than that the coding ligatures look great." />

Fig 26: Some of the arrows in Recursive could look better but other than that the coding ligatures look great.

X-height

Recursive’s x-height also looks just a tiny bit smaller than that of Fira Code (Fig 27). That’s ok because Fira Code’s x-height is well-balanced for long-form reading.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 27: Side-by-side comparison of x-height — Recursive’s just a bit smaller than that of Fira Code." />

Fig 27: Side-by-side comparison of x-height — Recursive’s just a bit smaller than that of Fira Code.

Legibility

Recursive also has a potential legibility problem, as SF mono does (Fig 28). The number “1” looks similar to the lowercase “l.” They could be confused with each other. Other than that, Recursive’s legibility score is ok.

[email protected] 1.5x, /assets/img/posts/5-more-monospaced-fonts/[email protected] 2x" src="/assets/img/posts/5-more-monospaced-fonts/[email protected]" alt="Fig 28: Recursive has a similar potential legibility problem because the number “1” looks similar to lowercase “l.”" />

Fig 28: Recursive has a similar potential legibility problem because the number “1” looks similar to lowercase “l.”

Download Recursive →

Recap & comparison

Here’s a quick recap of all the fonts and their features:

Font	Coding ligatures	X-height	Legibility	Extras
Fira Code	Widest range	Regular	High	/
Commit Mono	Basic range	Regular	High	Smart kerning
Cascadia	Wide range	Regular	High	Cursive style
Victor Mono	Wide range	Slightly larger	Ok	/
SF Mono	Widest range	Slightly smaller	Some concerns	/
Recursive	Basic range	Regular	Some concerns	Variable cursive style

And here’s a gallery of all of them for easier comparison:

Fira Code Commit Mono Cascadia Victor Mono SF Mono Recursive

[email protected]');"> Fira Code
[email protected]');"> Commit Mono
[email protected]');"> Cascadia
[email protected]');"> Victor Mono
[email protected]');"> SF Mono
[email protected]');"> Recursive

Should you even use coding ligatures?

Matthew Butterick from Practical Typography wrote an article sharing his strong-held opinion against coding ligatures. He even argues that using them isn’t a matter of taste because they can cause confusion. Butterick brings up two main reasons against using coding ligatures: They contradict Unicode, and they’re guaranteed to be wrong sometimes.

Ligatures in programming fonts are a terrible idea.
— Matthew Butterick (Source)

Should you use coding ligatures? I think this is a personal choice after all. I use them, and I love them. But I’m not a hardcore programmer and I work on my code by myself. Make sure you read Butterick’s article to make an informed decision, especially if you collaborate on code with others.

To get back to the question from the beginning of this article — which font do you use for coding? My favourite remains JetBrains Mono. What do you think about the ones in my examination? Did you find your new favourite one? Did I miss any? Let me know in the comments below! 👇

Is AI better at picking and pairing fonts than you?

2023-09-09T09:02:53+00:00

How do you go about picking fonts for a project? Do you just “wing it?” Pick something that looks good and is somewhat aligned with the requirements of the project? Or do you always use the same fonts again and again, regardless of requirements? Maybe you have a personal preference for some of these fonts?

And how do you pair fonts? Just pick two that look relatively good together? Or do you make an effort to use the basic font pairing guidelines by trying to match their x-height, for example? Do you go for a safe choice and just use a superfamily of fonts like Roboto and Roboto Serif?

Picking and pairing fonts really well is hard. It takes a lot of time too, especially if you don’t have experience with it. Can AI tools help you do this task better and quicker? Can it teach you how to do it well, if you’re less experienced?

Let’s take a look at a couple of tools that use AI for font picking and pairing. How good are they? Are they better than you and can you learn from them?

Fontjoy

Fontjoy uses machine learning and a deep learning model to map font features and come up with pairings. Its’ description of how it works isn’t very detailed and it doesn’t disclose how many font features the tool uses for evaluation.

I can pick a font that I want to start with for headings or body text. I picked Raleway Bold for headings. Then I can lock the font I picked, and decide what type of pairing I want — a contrasting one or a similar one. There are five options: high contrast, more contrast, balanced, more similar, and very similar. I chose high contrast and hit the Generate button with high expectations.

The first pairing it gives me is… surprisingly good. It suggests I combine it with Arapey for subtitles and Hind Guntur for body text (Fig 1).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 1: The first recommendation from Fontjoy is surprisignly good. It recommends to pair Raleway with Arapey and Hind Guntur." />

Fig 1: The first recommendation from Fontjoy is surprisignly good. It recommends to pair Raleway with Arapey and Hind Guntur.

I click Generate again and complete disappointment follows. It now says that I should use Snowburst One for subtitles and Scope One for body text (Fig 2). The latter is a decent recommendation, but the one for the subtitles is a total miss. I can’t help but lose confidence in the capabilities of the tool.

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 2: The second recommendation is a total miss." />

Fig 2: The second recommendation is a total miss.

I click the Generate button a couple more times. The tool gives more options but they feel somewhat limited. I’m not sure whether that’s good or bad. Some font suggestions repeat numerous times. I guess it’s good because the tool zeroed into the font pairings that work well. It feels that one in six suggestions includes a total miss. I define a total miss as something I would never use, mostly because it suggests a decorative font, like Snowburst One above (Fig 2).

I also consider a total miss the suggestion to use Montserrat Alternatives for body text (Fig 3). It has too much character to be used for that.

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 3: The third recommendation is also a total miss." />

Fig 3: The third recommendation is also a total miss.

But how could the tool know something like this? Is character design one of the features considered? It can’t be. That’s something an experienced designer considers — the tiniest details in the letter design of a font. Is it legible and will it improve the readability? In the case of Montserrat Alternatives, it does the opposite.

Fontjoy Pros:

Can come up with decent font pairings suggestions once you already have one font picked (for either headings or body text)

Fontjoy Cons:

Starting completely from scratch, without a font already picked, isn’t very useful
No font picking capabilities, just pairing
Includes low-quality fonts which are the main contributors to “total miss” pairings
There’s no meaning to the choices, the tool pairs fonts based on the contrast settings provided
No way to tell the tool what the fonts will be used for — there’s no context to its suggestions

Other similar tools

There are two more similar tools, but it’s unclear how they work so I didn’t explore them in detail:

ChatGPT

Now let’s take a closer look at the tool that everyone has been raving about — ChatGPT. Can it pick and pair fonts well? Is it comparable to a designer’s capabilities?

Font pairing

I came up with a simple prompt to test the ChatGPT’s capabilities of font pairing:

Come up with a pairing of two fonts for a website of a female author writing about motherhood. It needs to feel modern and candid.

I generated five suggestions, let’s take a closer look at the first three. The first one that ChatGPT suggested was Montserrat Bold for headings and Cormorant Garamond Regular for body text. Here’s how it explained its decision (Fig 4).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 4: An explanation of ChatGPT’s recommendation to pair Montserrat and Cormorant Garamond." />

Fig 4: An explanation of ChatGPT’s recommendation to pair Montserrat and Cormorant Garamond.

And this is what this font pairing would look like (Fig 5).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 5: What ChatGPT’s recommendation to pair Montserrat and Cormorant Garamond looks like." />

Fig 5: What ChatGPT’s recommendation to pair Montserrat and Cormorant Garamond looks like.

The second suggestion was Playfair Display Italic for headings and Raleway Regular or Light for body text. Here’s why it chose these fonts (Fig 6).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 6: An explanation of ChatGPT’s recommendation to pair Playfair Display and Raleway." />

Fig 6: An explanation of ChatGPT’s recommendation to pair Playfair Display and Raleway.

I could count the Light weight for body text as a “total miss” because light fonts aren’t good for longer texts. They’re too hard to read. Let’s use the regular weight, here’s what this font pairing would look like (Fig 7).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 7: What ChatGPT’s recommendation to pair Playfair Display and Raleway looks like." />

Fig 7: What ChatGPT’s recommendation to pair Playfair Display and Raleway looks like.

The last suggestion that we’ll examine is Montserrat for headings and Lora for body text. Here’s why ChatGPT thinks this is a good combination for this prompt (Fig 8).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 8: An explanation of ChatGPT’s recommendation to pair Montserrat and Lora." />

Fig 8: An explanation of ChatGPT’s recommendation to pair Montserrat and Lora.

It doesn’t specify the weights in this suggestion so I used Regular for both. This is what it would look like (Fig 9).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 9: What ChatGPT’s recommendation to pair Montserrat and Lora looks like." />

Fig 9: What ChatGPT’s recommendation to pair Montserrat and Lora looks like.

All these font pairing suggestions are good, except for the “total miss” where it suggested a light font for body text. They’re not very original, and they’re somewhat repetitive (it really likes Montserrat for this prompt), but they could be a good starting point for a designer learning to get better at this. For a non-designer, these could be good to go.

Here’s what I like about it. If a non-designer used ChatGPT they would come up with a good font selection and pairing, probably a much better one than if they did it themselves. New websites where designers aren’t involved with their creation would finally have decent typography.

Font picking

The last thing I wanted to test was ChatGPT’s font-picking capabilities. I came up with a prompt — What is a good open-source font for headings that can be described as feminine, modern, and candid?

I generated three answers, two of them were Quicksand (Top in Fig 10), and the other one was Cormorant (Bottom in Fig 10).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 10: ChatGPT’s recommendation of pairing Quicksand with Cormorant." />

Fig 10: ChatGPT’s recommendation of pairing Quicksand with Cormorant.

Quicksand is not what I had imagined at all but it’s a viable option, not a “total miss.” Cormorant on the other hand is an interesting recommendation. Here’s what this pairing looks like (Fig 11):

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 11: A pairing of Quicksand for headings and Cormorant for body text." />

Fig 11: A pairing of Quicksand for headings and Cormorant for body text.

And here are ChatGPT’s explanations on why it picked these fonts (Fig 12).

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 12: ChatGPT’s Explanations on why it chose Quicksand and Cormorant fonts to be paired." />

Fig 12: ChatGPT’s Explanations on why it chose Quicksand and Cormorant fonts to be paired.

A less experienced designer could explore further and try out different weights of Cormorant. Again, it’s a good starting point, but does this replace an experienced designer?

To become truly powerful ChatGPT would need to be trained on knowledge from experienced designers. But right now it can’t know what knowledge is good, it just learns from everything it was given to train on. Here’s a short description of how ChatGPT learns:

All the tokens came from a massive corpus of data written by humans. That includes books, articles, and other documents across all different topics, styles, and genres—and an unbelievable amount of content scraped from the open internet. Basically, it was allowed to crunch through the sum total of human knowledge.
(Source)

ChatGPT Pros:

Very few “total misses”
Unlike other tools, it can give meaningful recommendations based on what you’re designing for
A decent starting point for non-designers and less experienced designers

ChatGPT Cons:

It’s limited — based on the knowledge it was trained on up to September 2021
Based on vast data of human knowledge — not all of it is good
The font picks and pairings are basic and not very original

Conclusion: Can AI pick and pair fonts well?

Let’s try to answer the question from the beginning of the article — can AI do this task well for us? In other words, can AI come up with original, contextual, and high-quality font picks and pairings? My answer right now is no. Not yet, at least. I predict that AI’s capabilities will continue to grow and one day it’ll be able to do it well. Will it be able to replace an experienced designer? I don’t think so. Not fully. And at least not very soon. But it may help speed up that experienced designer’s work and it will speed up the learning process for less experienced ones.

Font pairing is more than just fonts. Fontjoy picks font pairings based on font characteristics, like font weight and obliqueness. That’s not enough.

Here’s what an experienced designer will consider when choosing a font:

What is the goal of the text/website?
What feelings does the author want to evoke?
How do the visual font properties align with the message of the content?
Does it look original but still follow the main typographic conventions?
The overall construction of the font
The construction of key characters — are they legible?
What it looks like with the actual content and language to be used
What it looks like at larger sizes (for headings), different weights and styles
Is it readable at body text size?
Does a visual font property stand out in a bad way?

Notice how the questions go from broad to very specific. That’s because font picking is an involved decision process, not a quick act based on some font characteristics like it is in Fontjoy.

Font picking is an involved decision process, not a quick act based on some font characteristics like it is in Fontjoy.

All this culminates in two major aspects of evaluating font choices — meaning (questions 1–4) and visual (questions 5–10). Because fonts are tools for visual communication, accessibility belongs to the visual aspects. Tools like Fontjoy are completely focused (and stronger) on the visual side, and ChatGPT is somewhere between meaning and visual (Fig 12). Fontjoy actually compares the characteristics of fonts to pair them, ChatGPT doesn’t. It assumes that fonts go well together because humans have paired them in the past. A mix between the two tools would be ideal.

[email protected] 1.5x, /assets/img/posts/ai-better-than-you/[email protected] 2x" src="/assets/img/posts/ai-better-than-you/[email protected]" alt="Fig 12: A visual presentation of current AI tools capabilities compared to the two aspects of picking fonts — visual and meaning." />

Fig 12: A visual presentation of current AI tools capabilities compared to the two aspects of picking fonts — visual and meaning.

Neither is in the top right corner of the chart where a perfect solution would be, but ChatGPT has the potential to improve. Right now it can come up with suggestions based on adjectives we include in our prompt — modern, feminine, candid. But to match, or even beat an experienced designer, it’ll need to get way better than that.

I discussed this with Mike Zetlow, an experienced designer who raised an important point — brands are not just a couple of adjectives. Here’s what he said:

Brands are more subtle than a couple of adjectives. I don’t start picking fonts until we’ve got 100% of the copy and image assets. Between the copy, brand guidelines, brand history, markets’ perception of the brand, and brand image assets, there is a lot of nuance and it’s a big job of taking all that information and making a creative decision as to which font best represents all that. Granted, a quick solution like Raleway above will work for someone starting their own blog, but for my use cases, the decision is much more involved.

The state of AI’s font picking and pairing capabilities is at the stage of a junior designer. So if you’re a designer and answered “yes” to most questions from the beginning of this article, or you’re a non-designer, yeah the AI can pick and pair fonts better than you. But that’s great because it makes better typography more accessible for non-designers. It also makes quicker learning possible for inexperienced designers. Both will significantly contribute to overall better web typography.

If you want to learn how to pick and pair fonts really well, my free email course is a good starting point. What do you think? Will AI ever be able to do this well? Let me know in the comments below 👇

8 micro tips for remarkably better typography

2023-09-02T09:02:53+00:00

But I don’t want to get into that in this blog post. Yes, it takes a lot of time and effort to craft beautiful and original typography but what if you don’t have the time? What if you want to quickly improve the typography on your website in just a matter of minutes?

Today I want to show you how you can make your typography remarkable with 8 micro tips in less than 8 minutes. Let’s go!

1. How lightening your font weights on a dark background can improve aesthetics and readability

Two things became popular in the design industry lately — dark modes and variable fonts. But most websites make this mistake when they add a dark mode. They keep the font weights intact. If a heading is set in bold on light mode, it’ll have the same weight when the user switches to dark mode.

This is a problem because light text on a dark background looks heavier. It looks unpolished and can even impact the readability of the text (left example in Fig 1). My recommendation is to consider using a variable font and adjusting the font weight in dark mode. Reduce it by 50. So if the font is set to bold in light mode (bold equals 700), reduce it to 650 (right example in Fig 1). Now your text looks refined and it’s easier on the eye, which means it’s easier to read.

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 1: A comparison of weight 700 versus 650 on a dark background." />

Fig 1: A comparison of weight 700 versus 650 on a dark background.

2. Why reducing the line height of headings drastically improves their appearance

Here’s the thing with headings — they’re generally short. Usually one line of text, sometimes two. In extreme cases, they break into three lines. But that’s it. A line height of around 140% is recommended for body text, so full paragraphs. When the same is applied to headings it looks like the lines are drifting apart. Like they don’t belong together (left example in Fig 2). Reduce the line height of headings to somewhere between 110 and 120%. The headings will look more compact, cohesive and polished (right example in Fig 2).

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 2: Large line height in a heading versus a smaller one" />

Fig 2: Large line height in a heading versus a smaller one

3. How using open-type features can make your fonts look more original

Open-type features are becoming increasingly popular. This is great because it also means that more and more fonts support them. One of my favourites is stylistic alternates. The type designer who designed the font is giving you the option to use alternative symbols. Most commonly these are alternative designs for letters “a” “g” and “t.”

Don’t use the font as it is out-of-the-box. Check if there are open-type settings that you can use to make it look more original. Below, I’m using Satoshi out-of-the-box on the left (Fig 3) and with stylistic alternates on the right.

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 3: Stylistic alternates versus default character designs." />

Fig 3: Stylistic alternates versus default character designs.

4. Don’t be afraid to use uppercase, but when you do letter-space it

Everyone already knows that words written in uppercase are hard to read. So it seems everyone just stopped using it completely. It’s ok to use uppercase in small amounts. It helps separate different parts of content or UI. It’s a cool way to emphasise something without using bold or italics.

I use uppercase for showing the category of the article below (Fig 4). Notice the difference between the left example which isn’t letter-spaced and the right one which is. Letter-spacing uppercase words helps improve readability and it also makes your designs look more refined. I recommend letter spacing up to 5%. Always, ALWAYS letter-space uppercase.

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 4: Letter-spacing uppercase words improves their readability." />

Fig 4: Letter-spacing uppercase words improves their readability.

5. Use the subtlety of old-style figures to make your text free of distractions and easier to read

The most experienced designers will refuse to use a font for body text if a character stands out too much. I’ll give you an example — I once decided not to use a font because the lowercase letter “g” had an unusual, weird descender (the bottom part of the letter). It stood out too much, you just couldn’t help but notice it — it was a distraction. You don’t want that. You want your readers to be completely consumed by the content.

The same applies to numbers in your text. When they’re set in lining figures (usually the default style in fonts) they stand out too much (left example in Fig 5). As the readers progress through the lines of text, they can’t help but notice these numbers before they get to them. They get distracted and it becomes harder to read.

Old-style figures are the lowercase alternative. They go along well with lowercase text and don’t stand out. Very few websites and apps go as far as to take care of this typographic detail. So if you do, you’re website will be typographically refined and stand out in its subtlety. The subtlety that only type geeks will notice but your readers will unknowingly appreciate.

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 5: Old-style figures blend in with the text in a paragraph, lining figures stand out (too much)." />

Fig 5: Old-style figures blend in with the text in a paragraph, lining figures stand out (too much).

6. Make your acronyms fit in with small caps

This is the same as tip number five above but for letters. Or more precisely, acronyms. Let’s try something out, I’ll write CIA here to prove my point. I’m 100% sure that you noticed the “CIA” sometime when you started reading this paragraph (maybe you didn’t notice it but your eyes surely drifted to it for a fraction of a second).

That’s way too early and if this paragraph was full of acronyms like that, it would be full of distractions. Your eyes just can’t help but notice them and be attracted to them. So the text you’re reading becomes harder to read. If your font supports them, use small caps to eliminate the distractions in your text and make it easier to read.

I’m using Meta Serif Pro below and no small caps in the example on the left (Fig 6) and with small caps enabled in the example on the right.

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 6: Small caps blend in with the texture of the paragraph perfectly." />

Fig 6: Small caps blend in with the texture of the paragraph perfectly.

Bonus tip: don’t use “fake small caps!” If a font doesn’t support small caps but you force-enable them, fake small caps will be used. Fake small caps are just resized capital letters and look way too light compared to the rest of the text. This is even worse than just using normal uppercase letters. See a live example here.

7. Use ligatures to improve the aesthetics and readability of your text

Ligatures in typography prevent unattractive clashes between certain letters. “fi” “fl” “ffi” are typical examples. This is more on the aesthetics side than readability but in some fonts, these clashes might be so obvious that even normal people (i.e. not type geeks) will notice them. And as you already saw, readers aren’t supposed to notice typographic details. If they do, the designer has failed. All they need to see is the content. In some cases, ligatures may even add a bit of character and originality to your typography (see the example in the title in Fig 7).

[email protected] 1.5x, /assets/img/posts/8-tips/[email protected] 2x" src="/assets/img/posts/8-tips/[email protected]" alt="Fig 7: Ligatures look great but blend in subtly with the text, improving the readability in the process." />

Fig 7: Ligatures look great but blend in subtly with the text, improving the readability in the process.

8. Align your icons to the line height of the label

I see this mistake all the time. Designers often try to align the bottom of the icon to the baseline of the label (left example in Fig 8). It’s how you align everything in typography right? The baseline is the grid that you work with. No, not really. When it comes to aligning icons to text, it’s better to match and align the height of the icon to the line height of the text (right example in Fig 8). If done right, the vertical centre of the icon should align perfectly with the middle of the uppercase “X.”

[email protected] 1.5x, /assets/img/posts/8-more-tips/[email protected] 2x" src="/assets/img/posts/8-more-tips/[email protected]" alt="Fig 8: Icon alignment done right — match and align its size to the line height of the text label." />

Fig 8: Icon alignment done right — match and align its size to the line height of the text label.

Typography is so much more than just tips

These eight tips are great to get you started. They’ll drastically improve your typography but they’re just the tip of the iceberg (pun intended). Great typography, meaning typography that blends perfectly with the content, consumes the reader completely, and makes a text easy to read, requires a holistic approach. You should always start with the content that you’re designing for. Not by choosing a font, and not using Lorem Ipsum as placeholder text. You should choose a font that matches the content of the website, not just a random font.

And this is just an example from the beginning. Then you need to know how to pair fonts, shape perfect paragraphs for easier reading, use scales to define a system of font sizes, use vertical and horizontal rhythm correctly, compose interesting and original page compositions, and make it responsive on top of all that. If you want to learn about this holistic approach to typography, check out my free course Better Web Type. If you sign up, you’ll also be notified about part 2 of this 2-part blog post series.

Fallback Font Generator

2023-06-08T16:46:56+00:00

Brian Louis Ramirez

Modern Fluid Typography Editor

2023-06-08T16:46:56+00:00

Adrian Bece

WhatTheFont

2023-06-08T16:46:56+00:00

myfonts.com

Modern Font Stack

2023-03-31T16:46:56+00:00

Dan Klammer, Coling Gourlay, Troy J. Farrell, Pete Cooper

Cool new stuff in web typography in July ’21

2021-07-26T13:45:24+00:00

how are things? My newsletter is a bit late this month. We recently got a puppy and a kitten and they’ve been keeping me busy. We’re currently working on introducing them so that they become friends. They both brought a lot of fun back into our lives. I’ll post some photos of them soon!

News

🚀 My new online UX portfolio course UX Buddy is coming back in August. It’s another early access release with additional 20 seats up for purchase. Last time they sold out very quickly! 😲 Join the waitlist to get notified of the exact day and time of the release.

📖 The Better Web Type book is on sale! Get 40% off for a limited time!

Featured

Pairing fonts – 3 ways to find great typeface combinations

Oliver is back with another video & article combo on combining fonts. I always enjoy his videos because they’re really well made and they provide great content as well.

Font of the month

[email protected] 1.5x, /assets/img/newsletter/032/[email protected] 2x" src="/assets/img/newsletter/032/[email protected]" alt="" />

Anderson Grotesk

I found this free font the other day and liked it immediately. It has a Bauhaus feel to it, reminds of Helvetica but also feels more modern, geometric and chunkier. It looks great when used for huge headings and titles. It comes in 4 styles and they all come with the italic design as well.

Check it out →

Cool Articles

Optical size, the hidden superpower of variable fonts
I didn’t know that variable fonts have the optical sizing setting. This article explains clearly why it’s needed an how to use it. I’ll give it a try too!

When Designing With Text, Don’t Make This Embarrassing Mistake
You’ll have a good laugh when going through some of the examples in this article. I did 😂

I ❤️ NY
Here’s the fascinating story behind one of the most iconic logos.

Superior Type interview
I always enjoy reading the interviews with type designers, it’s a craft that I really admire. Take a look at this one, Vojtěch Říha designed some really good looking typefaces.

That’s it, see you next month! 👋