How to Make a Font: A Beginner’s Guide from First Sketch to Web-Ready File

What Is a Font, and How Is It Different from a Typeface?

A typeface is a design family, such as Garamond or Helvetica. A font is one version of that design, such as Garamond Bold at 12 points. Wikipedia describes a computer font as a digital file that holds a set of related glyphs, usually made with a font editor. In daily speech, most people use “font” and “typeface” to mean the same thing, and we will too.

What is a glyph? A glyph is the shape you see for a character. The letter “a” is a character. The drawing of “a” in a certain font is a glyph. One character can have several glyphs, such as a plain “a” and a fancy swash “a”.

Modern fonts are outline fonts. They describe each glyph with straight lines and Bézier curves instead of a grid of pixels. That is why we can scale text from a phone screen to a billboard without blur. Old bitmap fonts store pixels, so they look rough when we make them bigger.

A font file holds more than outlines. It usually contains:

• The outline of every glyph.
• A character map that links Unicode code points to glyphs.
• Metrics, such as glyph widths and line height.
• Rules for kerning, ligatures, and other layout features.
• Names, version, and license information.

How to Make a Font Step by Step

Here is the full path at a glance. We explain each step in its own section below.

1. Decide what the font is for.
2. Learn the parts of a letter and study similar fonts.
3. Plan the character set and map it to Unicode.
4. Sketch the first letters on paper or a tablet.
5. Choose a font editor.
6. Draw the glyphs as vector outlines.
7. Set the em square and the vertical metrics.
8. Space the letters and kern the pairs.
9. Add OpenType features and extra glyphs, if you want them.
10. Name the font, choose a license, and export the files.
11. Test the font, then use it or put it on a website.

Step 1: Decide What Your Font Is For

Before we draw anything, we ask three simple questions. Where will people see this font: on a logo, in headlines, in long body text, on signs, or in a game? What mood should it have: friendly, serious, playful, or old-fashioned? How large will it appear?

The answers change the design. Small text needs open shapes and roomy spacing. Large display text can be tighter and more detailed. A font for a long article needs calm, even letters, while a poster font can show off.

Start Small

Imagine we run a small bakery and want a headline font for our menu. We need capital letters, lowercase letters, numbers, and a few punctuation marks. We do not need thousands of symbols. A small goal gets us to a working font fast, and we can add more later.

Look at Similar Fonts

Next, we collect three to ten fonts with a similar feel. A guide from the type foundry TypeType suggests this too. We look at how thick the stems are, how round the curves are, and how wide the letters sit. We study how they are built. We never copy their outlines.

Step 2: Learn the Parts of a Letter

Every font follows a few invisible lines. Knowing them helps us draw letters that feel like one family.

• The baseline is the line that most letters sit on.
• The x-height is the height of lowercase letters like x, a, and o.
• The cap height is the height of capitals like H and E.
• An ascender is the part of b, d, or h that rises above the x-height.
• A descender is the part of p, g, or y that drops below the baseline.

Letters also have stems (the main strokes), counters (the enclosed spaces, like the hole in o), serifs (the small feet on some letters), and terminals (the ends of strokes). If we keep these parts consistent from letter to letter, the set feels like one font.

There is one more detail. Round letters like o usually go a little above the x-height and a little below the baseline. Flat letters like x stop right on the line. Without that small overshoot, round letters look too small. We call this optical correction.

Step 3: Plan Your Character Set

Which characters should the font include? To answer that, we need a quick look at Unicode. Unicode gives every character a number called a code point. The capital letter A is U+0041, for example. Unicode 17.0, released on September 9, 2025, holds 159,801 characters. No font draws all of them, and that is fine. If you want the basics first, read our short guide on what Unicode is.

How big is a normal font? The web.dev font guide says Latin fonts typically have 100 to 1,000 glyphs, while fonts for Chinese, Japanese, and Korean can pass 10,000.

A Starter Character Set for English

For a first English font, this list is enough:

• Uppercase letters A to Z (26 glyphs).
• Lowercase letters a to z (26 glyphs).
• Digits 0 to 9 (10 glyphs).
• Common punctuation and symbols, such as . , ; : ! ? ‘ ” – ( ) & @ # % $ £ €.
• A space glyph, so words can be separated.

The printable ASCII range, which covers the basic English keyboard, has 95 characters including the space. If you want readers to type names like Zoë, José, or Núñez, add accented letters too.

Character Mapping and Glyph Names

The character map, called the cmap table, connects each Unicode code point to a glyph. If the link is wrong, typing “a” shows the wrong shape or an empty box. Most editors build the map for us when we name glyphs with standard names like A, a, and ampersand. Microsoft’s OpenType recommendations suggest using Adobe Glyph List names for Unicode characters, and for glyphs without a code point, such as ligatures.

Every font also needs a special glyph in position zero, named .notdef. It appears when the font has no glyph for a typed character. Microsoft recommends giving it a visible outline, such as an empty rectangle, so a missing character does not look like a space.

Accented Letters and Components

The letter é is an e with an acute accent on top. Most font editors let us build it from two components. When we later change the e, the é updates too. This saves hours when we add accents for many letters.

Step 4: Sketch Your Letters

Why sketch first? Paper is faster than software for finding shapes. A pencil lets us try ten versions of an “a” in ten minutes.

We have three common ways to start. We can draw on paper, scan the page, and trace the shapes. We can draw on a graphics tablet in a vector app such as Adobe Illustrator and paste the shapes into a font editor. Or we can draw directly in the font editor. The article series So you want to create a font compares these three methods, and the advice still holds even though the software prices in it are old.

If we draw on paper, we draw large and use pencil guidelines for the baseline, x-height, and cap height. Large drawings hide shaky lines after scanning.

A common approach is to start with a few letters, such as n, o, H, and O. They set the stem thickness, the width, and the curve style that the other letters will follow. In our bakery example, we sketch those four letters first and then try the word “Bake” before we draw the rest.

Turn Handwriting into a Font

Handwriting fonts take a shortcut. A tool like Calligraphr says it can transform your handwriting or calligraphy into a font, and it lets you start for free. In a roundup of font-making tools, the workflow is to fill in printed template sheets by hand, upload a scan or photo, and let the tool convert it.

There is one catch. A font repeats each glyph exactly. Real handwriting never repeats, so double letters like “ee” or “ll” can look robotic. We can reduce this by testing common pairs before we finish.

Some editors can also trace a scanned bitmap into an outline. Wikipedia notes that a trace program can turn a high-resolution bitmap into a first outline that the designer then cleans up. We should always clean up traced shapes, because they carry extra points and bumpy curves.

Step 5: Choose a Font Editor

A font editor is the software where we draw glyphs, set metrics, and export the font files. The table below compares six popular choices. We list only facts we could check on each tool’s own site or in a trusted guide.

TypeType’s guide advises trying two or three editors before we commit to one. Many offer trials. Prices and plans change, so we check each site before we decide.

Which one should we pick? If we want a handwriting font, we start with Calligraphr. If we want blocky or pixel-style letters, FontStruct fits. If we want free tools with full control, we try FontForge or Glyphr Studio. If we plan to make fonts for a long time, Glyphs on a Mac or FontLab on Windows are the usual paid choices. Whichever tool we use, how to make a font follows the same steps: draw shapes, set metrics, space letters, and export files.

Step 6: Draw the Glyphs

Now we draw. Outline fonts use Bézier curves, which have points and handles. We place points, and we pull handles to bend the curve between them. Per Wikipedia’s OpenType article, TrueType outlines use quadratic curves, while the CFF outlines usually found in .otf files use cubic curves. Editors convert between them, so we can draw with the tool’s default curves.

These habits make glyphs cleaner:

• Put points at the extremes of a curve: the top, bottom, left, and right.
• Use as few points as the shape needs. Extra points create bumps.
• Keep corners sharp only where the design calls for them.
• Keep stem thickness the same across letters. Check it by overlaying n, h, and m.
• Snap points to guides for the baseline, x-height, and cap height.
• Start with one weight, such as Regular. Bold and Italic can come later.

Test with a Word Early

After we draw five or six letters, we type a word with them. For the bakery font, we might type “Bake” and “Rye”. A single letter can look perfect alone and still look odd beside its neighbors. Early tests save us from redrawing the whole set.

Step 7: Set the Em Square and Metrics

Every glyph sits on a grid called the em square. The number of grid units across it is called units per em, or UPM. A higher number gives a finer grid. The OpenType spec says the units per em value can be anything from 16 to 16384, and it recommends a power of 2 for fonts with TrueType outlines. Many fonts use 1000 or 2048. The Google Fonts guide uses 1000 in its examples.

Next come the vertical metrics: the ascender, the descender, and the line gap. Together they decide the line height. This is where many first fonts go wrong, because different systems read different tables. The Google Fonts metrics guide explains it like this:

• macOS reads the hhea table. Microsoft apps read the OS/2 typo values when the USE_TYPO_METRICS flag (bit 7 of fsSelection) is on. The guide says to set the hhea values equal to the typo values.
• The OS/2 win values should match the font’s bounding box, so nothing gets cut off.
• The line gap should be 0.
• For Latin fonts, the ascender plus the absolute descender should be about 120 to 130 percent of the UPM.

Step 8: Space the Letters and Kern the Pairs

Each glyph has empty space on its left and right sides. We call these the sidebearings. The advance width is the full distance from one glyph to the next. It equals the glyph’s width plus both sidebearings.

Good spacing makes text look even, like a smooth gray texture, with no tight or loose spots. We usually follow this order:

1. Space the round and straight letters first, such as n, o, H, and O.
2. Space the other letters in relation to those.
3. Test the spacing in words and short sentences, not in single letters.
4. Kern only after the spacing feels even.

A common trick is to type strings like “nnonnoonn” and “HHOHOOHH”. If the gaps look equal in every position, the base spacing is working.

Kerning fixes the gap between specific pairs. Some pairs leave odd holes because of their shapes, such as AV, To, and Yo. Kerning pulls them closer or pushes them apart. TypeType describes kerning as fine-tuning letter pairs. We should treat it as a patch for the few pairs that still look wrong, not as a way to repair weak spacing.

Step 9: Add OpenType Features and Extra Glyphs

OpenType lets a font act smarter than a simple set of shapes. Per Wikipedia, ligatures are replacement features, kerning and mark placement are positioning features, and the format also supports stylistic alternates and contextual forms. Designers describe features in feature files, which compile into the font. A first font does not need any of this. We can add features in a second version.

Features that beginners often add first include:

• Ligatures, such as fi and fl, that join letters that would otherwise touch.
• Alternate glyphs, such as a second “a” for a more playful look.
• Extra number styles, such as fractions or old-style figures.

Variable fonts are worth a mention. OpenType 1.8, published on 14 September 2016, lets one file hold many design variations, such as light to bold weights. The 2025 Web Almanac found that 39.4 percent of desktop sites and 41.3 percent of mobile sites use at least one variable font. We suggest finishing one regular weight before we try a variable font.

Step 10: Name, License, and Export Your Font

Name Your Font

The name table stores the names people see. For a basic font, we fill in these fields from the OpenType name table spec:

• Copyright notice.
• Family name, such as “Bakery Display”.
• Style name, such as “Regular”.
• Full name, usually the family and style together.
• Version, written like “Version 1.00”.
• PostScript name. It uses printable ASCII only, stays under 64 characters, and cannot contain the characters [ ] ( ) { } < > / %. Spaces are not allowed either.
• License description and a license URL.

We should pick a family name that no other font uses. Two fonts with the same name can clash on a computer.

Choose a License

Who can use our font, and how? We can keep it for ourselves or our clients. We can sell it under a commercial license. Or we can release it under an open license. The SIL Open Font License is a free, open license made for fonts. It lets people use fonts in print, logos, and websites, and it lets them modify and share fonts, within its conditions. It also lets designers protect a font name through a Reserved Font Name.

If we start from another designer’s font, we read its license first. Some licenses forbid changes. When money or contracts are involved, we ask a lawyer.

Pick the Export Formats

Most editors can export several formats. Here is what each one is for:

How much smaller is WOFF2? The web.dev guide says it compresses about 30 percent better than WOFF. In the W3C’s WOFF 2.0 evaluation report, the Brotli method gave a median gain over WOFF 1.0 of about 24 percent on a Google Fonts set and about 27 percent on an Adobe set of TrueType fonts. The report calls these initial results, so we treat them as a guide and not a promise.

Test Your Font Before You Share It

A font can look fine in the editor and fail in real apps. We run through this checklist before we share it:

• Install the TTF or OTF file on Windows and on macOS, then restart the apps.
• Type every glyph: letters, numbers, punctuation, and accents. Make sure the .notdef box does not show up where it should not.
• Set a paragraph at a small size, such as 10 to 16 pixels, and at a large size. Look for tight or loose spots.
• Check line height. Look for cut-off accents or lines that sit too far apart.
• Try the font in a word processor, a design tool, and a browser.
• Run a checker. Font Bakery is a command-line tool that checks font files and project data for quality problems. It is not an official Google project, but it was built with the Google Fonts team’s support.
• Ask a friend to type with the font and tell us what feels off.

Put Your Font on a Website

Now the web part. We upload the WOFF2 file and point CSS at it with an @font-face rule:

If the site runs on WordPress, we can upload the file with FTP, the host’s file manager, or a font plugin, and then add this CSS in the theme’s custom CSS area. These points keep the font fast and safe:

• Serve WOFF2 first. Add WOFF only if you must support very old browsers.
• Use font-display: swap. Per web.dev, it has a 0 millisecond block period, so readers see fallback text right away. The 2025 Web Almanac found swap on about half of all pages.
• Keep a fallback stack, like Georgia and serif above, so text stays readable while the font loads. The size-adjust descriptor can reduce layout shift between the fallback and the web font.
• Subset the font to the characters you need. The fontTools command fonttools subset bakery.ttf --unicodes="U+0020-007E" --flavor=woff2 keeps basic Latin and writes a WOFF2 file. WOFF2 output needs the Brotli Python package. Check your license before you subset.
• Preload with care. Preload can compete with other files, and it ignores unicode-range. The Web Almanac found about 12 percent of pages preload fonts.
• If the font files sit on a different domain, send the right CORS headers. Your server should also send a font MIME type, such as font/woff2.

How big should the files be? The 2025 Web Almanac reports a median font file of about 35 to 36 KB when compressed. The 90th percentile is about 115 KB. If one file is far bigger, subsetting usually fixes it. The same report says about 88 percent of websites use web fonts, and about 72 percent self-host at least one font file. Google Fonts is used by about 54 percent of desktop sites and 47 percent of mobile sites. So hosting your own file is a common, normal choice.

Custom Fonts vs Styled Text on Social Apps

Some readers want a fancy bio or username, not a font file. The two are not the same. A font only changes how text looks on a device or page that has the font. If we write a post in our custom font, other people still see the app’s own font. Instagram, TikTok, Facebook, and Discord do not load our font files.

Styled text works another way. A font changer swaps normal letters for other Unicode characters that look bold, cursive, or gothic. Those characters travel with the text, so they show up almost anywhere. These pages on our site help with that:

• Copy and Paste Fonts: pick a style, copy it, and paste it anywhere.
• Font Changer: type your text and see it in many styles at once.
• Stylish Name Generator: get name ideas, then style them.
• Instagram Stylish Name: names and bios for Instagram.
• Viral Stylish Name TikTok: ideas for TikTok profiles.
• Facebook Stylish Name: styles for Facebook names.
• Fonts for Discord: nicknames and server names.
• Free Fire Name Style: in-game names for Free Fire.
• PUBG Mobile Name Style: in-game names for PUBG Mobile.

Styled text has limits. These letters are Unicode characters, not fonts. Accessible Social explains that screen readers may skip them or read them as strange sounds. We keep important words in plain letters.

Common Mistakes When Making a Font

• Drawing every glyph before testing a few letters in a word.
• Using different stroke thickness from letter to letter.
• Adding too many points, which makes bumpy curves and big files.
• Leaving the metrics for the end, then finding clipped accents.
• Spacing letters one at a time instead of in real words.
• Forgetting the .notdef glyph, or giving the space glyph no width.
• Skipping the name table, or reusing the name of a font that already exists.
• Copying another designer’s outlines or ignoring a license.
• Exporting only one format, then finding the website needs WOFF2.

Frequently Asked Questions