What are Typography Basics: Choose and Pair Fonts

TLDR: What will you learn

• Serif vs. sans-serif: Know the two main font families and when each fits.
• Pairing rules: Combine fonts by contrast, not by clashing; usually stick to two.
• Hierarchy and scale: Use size and weight to guide the eye from headline to body.
• Spacing and readability: Line height, letter spacing, and line length make or break legibility.
• Common mistakes: The beginner traps that make designs look off.
• Free font resources: Where to find quality fonts without paying a cent.

Why Typography Matters More Than You Think

When people talk about what typography basics are, they often imagine it as a finishing touch, something you sprinkle on at the end. In reality, it is the invisible workhorse that decides whether your message lands at all.

Type does its job before a single word is consciously read. Within a fraction of a second, the shapes, spacing, and weight of your fonts tell a reader whether to trust you, keep reading, or quietly leave.

As the designer, writer, and educator Ellen Lupton puts it in Thinking with Type, “Typography is what language looks like”. That is why the look of your type shapes trust before a reader has consciously processed a single word.

First impressions are made in type

Picture a hawker stall that has printed a new menu using three clashing fonts, some words stretched, others squashed to fit the paper. Even if the laksa is excellent, the menu whispers “rushed” and “amateur” before a customer orders.

Now picture an SME sending a GST invoice where the total, the GST number, and the payment terms are all set in a cramped, low-contrast font. The client hesitates, squints, and starts wondering if this vendor is as careful with their books as with their layout.

Compare that to a government service like SingPass or the GoBusiness portal. The type is clean, consistent, and generously spaced, so even a first-time user feels they are in safe, competent hands.

Legibility is an accessibility expectation

Good typography is not only about looking polished. It is about making sure everyone can actually read your content.

With IMDA’s ongoing digital inclusion push, Singapore businesses are increasingly expected to design services that older users, low-vision users, and non native English readers can navigate. Tiny font sizes, poor colour contrast and decorative fonts on body text quietly shut those people out.

When you set a comfortable font size, enough line spacing and strong contrast, you are not just being tasteful. You are meeting the same accessibility mindset behind Singapore’s push for inclusive digital services.

Consistent type builds brand recall

The third reason type matters is memory. When a café uses the same warm, rounded font on its shopfront, its Instagram posts, and its loyalty card, your brain starts recognising the brand even before it sees the logo.

Inconsistent fonts do the opposite. They fragment your identity, so customers never quite build a mental picture of who you are.

That is why I treat typography as a foundational skill, not a nice-to-have. If you are learning to build interfaces, pairing this knowledge with solid Figma design basics every beginner should master is what turns a rough draft into something people actually trust.

Once you see type as a trust builder, the rules that follow stop feeling fussy and start feeling worth the effort.

Serif Versus Sans-Serif and Other Font Families

When people ask me what typography basics are, the first thing I clear up is the font family jargon. It sounds technical, but once you can spot the difference, choosing type gets much easier.

Font families are just groups of typefaces that share a look. The two you will meet most often are serif and sans-serif, so let us start there.

What Serif Fonts Communicate

Serifs are the little feet or strokes at the ends of letters. Times New Roman and Georgia are the classic examples you have seen in newspapers and books.

These small details make serif fonts feel established, trustworthy, and a little traditional. That is why I often reach for them when a brand wants to signal heritage or craftsmanship.

Picture a Peranakan restaurant in Katong that has been serving ayam buah keluak for three generations. A serif typeface on their menu and signage quietly says this place has history, which is exactly the feeling they want to sell.

What Sans-Serif Fonts Communicate

Sans means without, so sans-serif fonts drop those little feet. Helvetica and Arial are the ones almost everyone recognises, clean and simple, with even strokes.

They read as modern, efficient, and approachable, which is why so many tech companies use them. A Singapore fintech startup pitching a new payments app will almost always go sans-serif, because it makes the brand feel current and easy to trust with your money.

There is also a practical reason sans-serif dominates on screens. Those clean shapes hold up better on lower-resolution displays and at small sizes, so websites and mobile apps lean on them for on-screen legibility.

If you are designing anything screen-first, this connects directly to the difference between UI and UX, because readable type is a core part of a usable interface, not just decoration.

Display and Script Fonts Used Sparingly

Beyond those two big families, you will run into a few specialised groups. My rule is simple: use them for flavour, never for body text.

Here is a quick guide to when each one earns its place:

• Slab serif: Chunky, blocky feet (think Rockwell). Great for bold headlines and posters that need to shout with confidence.
• Script: Flowing, handwritten styles. Lovely for a wedding invitation or a premium chocolate label, terrible for a paragraph of instructions.
• Display: Decorative, attention-grabbing faces built for large sizes. Perfect for a logo or a hero banner, but they fall apart in long copy.

The trap I see beginners fall into is setting an entire menu or website in a script font because it looks pretty. At small sizes and in full paragraphs, it becomes exhausting to read.

So keep your workhorse text in a solid serif or sans-serif, and let slab, script, and display fonts do their job in short, high-impact bursts.

The Rules of Pairing Fonts Without Clashing

When I teach font pairing to beginners, the first thing I do is take the pressure off. You do not need a designer’s eye to pair fonts well; you just need a few rules that stop you from second-guessing yourself.

Most clashes happen because people pair two fonts that are too similar or too loud together. The fix is simpler than you think.

Pairing for Contrast

The golden rule is to pair for contrast, not conflict. Two fonts should feel clearly different, not almost the same.

If your heading is a bold serif, your body text should be a clean sans-serif. The eye immediately reads them as two separate roles: one shouts, one explains.

Conflict happens when you pick two fonts that are both trying to be the star. Two decorative scripts, or two similar sans-serifs, look like a mistake rather than a choice.

Picture a small F&B startup in Singapore launching kaya toast kits on Shopee and Instagram. They pick one bold display font for headers like “FRESHLY BAKED DAILY” and a clean, neutral sans-serif such as Inter or Lato for their captions and product details.

The display font carries the personality. The sans-serif keeps their ingredient lists and delivery info readable on a phone screen, which is where most of their customers actually browse.

Using Superfamilies for Safe Pairs

If you want a guaranteed match, look for superfamilies. These are fonts designed with multiple weights and sometimes both serif and sans-serif versions built to work together.

Pairing a font with itself in different weights is one of the safest moves for beginners. A heavy bold for headings and a regular weight for body text gives you contrast without any risk of clashing.

For non-designers, Canva and Google Fonts already do a lot of this heavy lifting. Google Fonts suggests popular pairings for each typeface, and Canva groups tested font combinations right in its templates.

That means our Kaya Toast founder can lean on a suggested pair rather than guessing, which lowers the risk when nobody on the team has a design background. If you build your visuals in Figma, browsing the best Figma templates to kickstart your designs is another way to inherit pairings that already work.

How Many Fonts Is Too Many

The short answer: two is ideal; three is the absolute ceiling.

• One font for headings and display
• One font for body text and captions
• One optional accent font for a specific purpose, like a price tag or a promo badge

Anything beyond that starts to feel chaotic. Your Instagram grid loses consistency, and your brand stops looking like one voice.

I have seen new business owners try to cram five fonts into a single promo post because each one looked nice on its own. The result reads like a ransom note, not a brand.

Stick to your two chosen fonts across your Shopee listing, your Instagram captions, and your packaging. That repetition is what makes a small startup start to look established.

Building Visual Hierarchy With Scale and Weight

When someone lands on your page, their eye should know exactly where to go first. That is what visual hierarchy does: it ranks your content from most to least important so readers scan without effort.

Think about how you read a menu or a poster. You do not read every word in order. You jump to the biggest, boldest thing first, then work your way down.

The four tools that create hierarchy

You have four levers to control what stands out: size, weight, colour, and spacing. Used together, they let you signal importance without cramming in extra fonts.

Size is the most obvious. Bigger text reads as more important, which is why a headline dwarfs body copy.

Weight is your quiet workhorse. A bold word inside a paragraph of regular text pulls the eye instantly, and you get that emphasis from a single font family rather than a second typeface.

Colour and spacing do the rest. A brand colour on a button or a generous gap around a heading tells readers “this matters” long before they read a single word.

Setting sizes with a type scale

Beginners often pick font sizes at random, nudging numbers until something looks fine. That guesswork is why so many first drafts feel messy.

A type scale fixes this. It is a small, fixed set of sizes based on a consistent ratio, so each level relates to the next in a way that feels deliberate.

A simple starter scale gives you roughly these five roles:

• H1: Your page title, the biggest element on screen
• H2: Section headings that break up content
• Body: Your main reading text, the size everything else compares against
• Caption: Small notes, labels, and image credits
• Button or CTA label: Sized to feel tappable and confident

Set your body first, then scale H2 and H1 up from it using the same ratio each time. That single decision keeps everything consistent.

A Singapore landing page example

Say you are designing a landing page for a SkillsFuture-funded data analytics course. Three things must win the scan: the course title, the price after subsidy, and the “Register Now” button.

The title takes your H1 size so it dominates. The subsidised price gets bold weight and your brand colour so it jumps out, even at body size. The CTA button sits in a strong orange with plenty of padding around it, so no one misses the next step.

Notice you did this with one font family, scale, and weight, not three competing typefaces.

Build this scale once as reusable text styles in Canva or Figma, and every future asset stays on-brand automatically. If you are new to the tool, a step-by-step Figma tutorial for beginners walks you through saving styles you can apply in a click.

Spacing and Readability: From Line Height to Line Length

Choosing a good font is only half the battle. How you space that text decides whether people actually read it or bounce.

I see this constantly with local SMEs. A retail shop or clinic sends out an EDM or downloadable PDF brochure with text crammed edge to edge, tiny gaps between lines, and no breathing room.

The information is all there, but nobody wants to wade through it. The moment we open up the spacing, the same content suddenly feels approachable, and open-and-read behaviour improves.

Getting Line Height Right

Line height (also called leading) is the vertical space between lines of text. Too tight, and the lines feel like they are stacking on top of each other.

For body text, I aim for a line height of around 1.4 to 1.6 times the font size. So a 16px paragraph reads comfortably at roughly 24px line height.

Headings can go tighter, closer to 1.1 or 1.2, because short lines do not need as much room to breathe.

This matters for accessibility too. Older readers, and anyone reading on a small phone in bright sunlight at a hawker centre, benefit hugely from generous line spacing.

Keeping Line Length Comfortable

Line length, sometimes called the measure, is how many characters sit on a single line before it wraps.

My rule of thumb is 50 to 75 characters per line for body text, including spaces. Any longer and the reader’s eye struggles to find the start of the next line.

Think of that SME brochure again. When text spans the full width of an A4 page in a single column, each line becomes exhausting to track.

The fix is simple: narrow the text column, or split the layout into two columns. Suddenly the same paragraph feels effortless.

On websites, this is why article content usually sits in a constrained centre column rather than stretching wall to wall.

When to Adjust Letter Spacing

Letter spacing (tracking) is the horizontal space between individual characters. For most body text, leave it alone; the type designer already set it well.

You will want to adjust tracking in a few specific situations:

• All-caps headings or labels, which usually need slightly looser spacing to stay legible
• Large display headlines, which can often be tightened a touch for a polished look
• Small print or button text, where a hair more space improves clarity

Beyond these cases, resist the urge to fiddle. Over-tracking body text is a common beginner mistake that makes paragraphs feel loose and disconnected.

Finally, pair your spacing with adequate contrast between text and background. Good spacing plus strong contrast is what keeps your content inclusive and aligned with the inclusive-design thinking that IMDA’s Digital for Life movement promotes here.

Common Typography Mistakes Beginners Make

Once you understand the typography basics, the fastest way to level up is to stop making the errors that scream amateur. I see the same handful again and again, and the good news is every one of them takes minutes to fix.

Picture a condo notice board in an HDB estate or a community centre event poster. It uses five different fonts, a Comic Sans headline, a clip-art border, and text that swings from left to centre to right. The message might be perfectly reasonable, but nobody trusts a notice that looks like a ransom note.

Too Many Fonts and Effects

The most common mistake is treating your font menu like a buffet. Before: a residents’ committee flyer mixes a script for the title, a serif for the date, a bold sans for the venue, and a decorative font for the RSVP line.

After: pick two fonts, one for headings and one for body, and let size and weight do the rest. That single condo notice becomes instantly more credible when you swap five fonts for something like Poppins for headings and Open Sans for the body.

Drop shadows, outlines, and rainbow gradients on every word have the same effect. If you added an effect to make text stand out, ask whether a size or weight change would do it more cleanly.

Ignoring Contrast and Accessibility

Poor contrast is the sneaky one because it looks fine on your own bright laptop screen. Before: pale grey text on a cream background, or thin white type over a busy photo of a Marina Bay skyline.

After: aim for strong contrast between text and background so the same auntie reading the notice on her phone in the afternoon glare can actually read it. This matters even more for anything public-facing, where accessibility is a genuine consideration.

Centring everything is a related trap. Long paragraphs set centre-aligned force the eye to hunt for each new line, so keep body text left-aligned and reserve centring for short headlines.

Distorting or Overstyling Type

Nothing gives away a rushed Canva job faster than stretched or squashed letters. Before: someone drags a text box corner to make the headline fill the width, and the letters look fat or starved.

After: change the font size or choose a naturally condensed or extended typeface instead of warping the shapes a designer carefully drew.

Two more quick fixes to self-audit today:

• Setting long passages in ALL CAPS: Fine for a short label, exhausting for a full paragraph, so switch body copy back to sentence case.
• Defaulting to overused fonts like Papyrus or default Calibri: Try a fresh pairing so your design does not look like every other template.

Open one of your recent Canva designs right now and run this checklist. You will usually spot at least two easy wins.

Where to Find Free and Reliable Fonts

Once you understand what typography basics are, the next practical question is where to actually get fonts without landing in legal trouble or working with poor-quality files.

The good news is that you do not need to pay a cent to build a professional-looking brand. You just need to know which sources are trustworthy.

The four sources I trust

I point every beginner to the same handful of libraries because they are reliable, high-quality, and clear about licensing.

• Google Fonts: Completely free, web-ready, and it suggests font pairings right on each font page. This is my default recommendation for most small businesses.
• Adobe Fonts: Included with a Creative Cloud subscription, with a large professional library synced across Photoshop, Illustrator, and InDesign.
• Canva: Its built-in font library is handy for quick marketing graphics, though some fonts are limited to paid plans.
• Figma: It draws on the Google Fonts library plus any fonts installed on your machine, which makes it easy to prototype consistently. If you are new to the tool, this guide on what Figma is used for in real design projects is worth a read.

Why licensing actually matters

Here is the trap beginners fall into. A font might be free to download, but that does not always mean it is free to use commercially.

Many fonts on random “free font” sites are licensed for personal use only. The moment you print that font on merchandise, put it in a paid ad, or sell a product with it, you could be breaching the licence.

For a Singapore business, this is not just theoretical. If you run Meta ads or print tote bags for an event, a rights holder can send you a takedown or invoice.

Imagine an Enterprise Singapore-supported SME building its first brand kit. Choosing a Google Fonts pairing, say Poppins for headings and Inter for body text, keeps costs at zero and keeps usage fully compliant across their website, decks, and printed collateral.

That single decision saves them a licensing headache later, which matters when a grant budget is tight.

A quick vetting checklist

Before you commit a font to your brand, run through these checks. It takes two minutes and saves real trouble.

1. Confirm the licence explicitly allows commercial use, not just personal use.
2. Check whether it covers web embedding, print, and product use, since these are sometimes separate.
3. Verify the font has a full character set, including numbers, punctuation, and any accents you need.
4. Download only from the source itself, never a mirror site with a vague licence.
5. Keep a copy of the licence file with your brand assets for future reference.

If a site cannot tell you the licence clearly, walk away. A slightly less flashy font from Google Fonts is always safer than a mystery download that could cost you later.

Putting It Together in a Simple Type System

Once you understand what a typeface is, how pairing works, and why hierarchy matters, the final step in learning what typography basics are is turning all of it into something you can actually reuse.

A type system is just a small set of decisions written down once so you never have to guess again. For a beginner, that means one heading font, one body font, a simple scale, and a few spacing rules.

Choose your fonts and set a scale

Start by locking in two fonts: one for headings that has personality, and one for body text that stays quiet and readable at small sizes.

Then set a type scale, which is nothing more than a handful of fixed sizes you will use everywhere. A common approach is to pick a body size, then step up in even jumps for subheadings and headings so each level feels clearly bigger than the last.

Finally, write down your spacing rules: line height for paragraphs, and the gap you leave above and below headings. These small consistencies are what make a design look intentional rather than thrown together.

A Singapore bakery example

Picture a home-based bakery in Bedok run by one founder and a part-time helper. Every week she posts on Instagram, updates a menu, and prints stickers for her packaging.

Without a system, each asset uses a slightly different font and the brand looks inconsistent across channels.

So she builds a one-page brand kit in Canva. She saves her heading font, body font, colour hex codes, three text sizes, and her spacing rules on a single page, then pins it as a Brand Kit template.

Now when her helper designs a new promo post, she copies the saved styles instead of inventing new ones. The menu, the Instagram grid, and the packaging suddenly speak the same visual language.

That saved system is a genuine time saver. Decisions made once get reused hundreds of times, and a small team stays on-brand even when different people are creating content. It also plugs neatly into a bigger plan for how to build a content marketing strategy that boosts SEO, because consistent visuals build recognition over time.

Your challenge this week: build your own two-font system and test it on one real asset. Pick a heading font, a body font, three sizes, and your spacing; save it in Canva or Figma, then apply it to a single post or menu.

Judge it against your old version. If the new one reads more clearly and feels more like you, your type system is working.

Conclusion

Remember that nagging feeling at the start, when your slide, flyer, or social post looked slightly “off,” but you could not say why? In most cases, I trace that back to type.

The reassuring part is that typography is not a mysterious talent you either have or you do not. It is a set of learnable rules, and you have now walked through the ones that matter most.

We covered how font families behave, why serifs and sans serifs send different signals, and how to pair two fonts without them clashing. We looked at hierarchy, spacing and line length, and where to find fonts you can actually use without breaking a licence.

Put together, understanding what typography basics are is one of the fastest ways to lift the quality of anything you design, often more than fancy colours or graphics ever will.

For a Singapore marketer building an EDM, an SME owner designing your own promo posters, or a career switcher assembling a portfolio, this is a skill you will use every single week. You no longer need to outsource every small visual or settle for something that looks amateur.

Keep the checklist close: limit your fonts, set a clear hierarchy, mind your spacing, and only use licence-safe sources. Apply it to your next design, and you will feel the difference immediately.

That said, rules make far more sense once someone reviews your work and tells you what is off and why. Feedback is where the real jump happens.

If you want to build these fundamentals properly with hands-on practice and guidance, enrol in the SkillsFuture-supported WSQ Advanced UX UI Design Course at Equinet Academy. It is the natural next step: you get structured learning, a real design tool, and an instructor to help you turn these typography rules into confident, polished work.