Creating your own font pages

Joel Whitworth 1 Creating Your Own Font Pages.indd 1

24/05/2016 9:56 AM

Contents 2 Creating Your Own Font Pages.indd 2

24/05/2016 9:56 AM

Welcome to type.

2. Font Fundamentals

28. The beauty of digital type.

4. Serif or Sans-serif? (font theme)

30. Leading and kerning: the difference

6. Draw

32. Leading and kerning

8. Don’t be afraid!

34. Trust your gut

10. From paper to digital

36. File types

12. Using Illustrator

38. Exporting

14. Refining in illustrator

40. Using your font

16. Font creation software

42. Refining your font

18. FontForge

44. Practice makes perfect

20. FontLab

46. Distributing your font

22. Glyphs app

48. Selling your font

24. Building the typeface: part 1

50. Challenege yourself

26. Building the typeface: part 2

Creating Your Own Font Pages.indd 3

3 24/05/2016 9:56 AM

A A 4 Creating Your Own Font Pages.indd 4

24/05/2016 9:56 AM

Font Fundamentals It’s imperative that you understand how typography is structured before you start designing characters. The incipient design phase requires knowledge of terms like baseline and x-height. If you’re unfamiliar with these terms please skim this typographic glossary published by Codrops.

Here are the most important things you need to know: Baseline: Where all the letters sit. Think of this like a shelf where the bottom of each letter should rest.

Overhang: Rounded bottoms of letters like O and B which dip just below the baseline.

X-Height: A line delineating the height of most lowercase letters(notably the letter “x”).

Cap Height: A line delineating the height of most capital letters.

Ascender Height: Often resting above the cap height, the ascender height limits the very tip of lowercase letters such as “k”.

Descender Height: The length of descending marks from characters like “y” and “q”.

It helps to know other terms like finial and ligature, but these are admittedly useful in more advanced typefaces. When just getting started you mostly need to understand how your letters should be organized in a grid system.

5 Creating Your Own Font Pages.indd 5

24/05/2016 9:56 AM

BBBBB BBBBB BBBBB 6

Creating Your Own Font Pages.indd 6

24/05/2016 9:56 AM

Serif or Sans-serif? (font theme) What are you planning to use this font for? do you want it to be modern or classical? do you want a mixture of the two? Take this into consideration whilst sketching.

7 Creating Your Own Font Pages.indd 7

24/05/2016 9:56 AM

Creating Your Own Font Pages.indd 8

C

C C

C

C 8

24/05/2016 9:56 AM

Draw You’re going to want to use a piece of white paper and a black marker when drawing the letters for your font. Most people want to just dive right in and go in alphabetical order, but there’s a little-known trick by fontmakers to create the letters H-A-M-B-U-R-G-E-V-O-N-S first and then move on to the rest.

Why? Because every other letter can be adapted from those letters, so it makes their job easier. For example, H easily becomes I, two Vs equal a W, and removing some of Es appendages quickly turns it into an F or an L. And don’t stop at the typical 26-letter alphabet. If you want, go ahead and draw unique numbers, punctuation marks, and accents so they fit in with your font.

9 Creating Your Own Font Pages.indd 9

24/05/2016 9:56 AM

DD 10 Creating Your Own Font Pages.indd 10

24/05/2016 9:56 AM

Don't Be Afraid!

Don’t be afraid to revise or make drastic changes to the point of starting over from scratch. Your goal is to eventually create a final set of characters that can be scanned into the computer for digitization.

11 Creating Your Own Font Pages.indd 11

24/05/2016 9:56 AM

E

E

12 Creating Your Own Font Pages.indd 12

24/05/2016 9:56 AM

From Paper to Digital Once you have the letterforms sketched out it’s time to move into the digital realm. If you don’t have a scanner you can get by with photos from your phone, but a scanned copy of your work is the best way to go.

You’ll need to trace these sketches in a font design program and you’ll want them to be as close to proportion as possible.

13 Creating Your Own Font Pages.indd 13

24/05/2016 9:56 AM

F 14 Creating Your Own Font Pages.indd 14

24/05/2016 9:56 AM

Using Illustrator If you choose to use illustrator to vector your characters there is few ways to do it.

Firstly the easiest method which involves ‘image tracing’ your letter forms. This is the quickest method and is recommended for beginners.

The second method is manual vectoring and is slightly more advanced but gives much greater and refined results. Manual vectoring involves hand tracing the letterforms with the pen tool,

15 Creating Your Own Font Pages.indd 15

24/05/2016 9:56 AM

Creating Your Own Font Pages.indd 16

GGGGG

16

24/05/2016 9:56 AM

Refining in Illustrator Once you’ve got your rough vectors done make any final adjustments to letters. Pay careful attention to how the letterforms look in certain sizes and practice aligning them to get a feel for your font. Once you’re happy you can move on to font software,

17 Creating Your Own Font Pages.indd 17

24/05/2016 9:56 AM

H 18 Creating Your Own Font Pages.indd 18

24/05/2016 9:56 AM

Font Creation Software Font creation programs have a marketplace of products just like graphic design and photo editing programs. You’ll find many suggestions online but the same names often pop up time & time again.

Let me clarify that a font creation program is necessary to make any real usable font. TTF/OTF files are generated from these programs and they’re an essential part of the workflow.

19 Creating Your Own Font Pages.indd 19

24/05/2016 9:56 AM

I I

20 Creating Your Own Font Pages.indd 20

24/05/2016 9:56 AM

FontForge If you’re completely new to type design then FontForge is the best choice for amateur work. It has every feature you could need and even some advanced methods of glyph manipulation that you’ll likely never use. Plus other programs will cost money so if you’re new it’s not worth sinking dough into a program that you may never use.

It’ll take practice to learn FontForge just like nobody opens Photoshop for the first time and crafts a perfect photo composite. You’ll struggle and probably get frustrated. Use Google to your advantage.

21 Creating Your Own Font Pages.indd 21

24/05/2016 9:56 AM

J

J

22 Creating Your Own Font Pages.indd 22

24/05/2016 9:56 AM

FontLab Almost every typographer knows about FontLab and their assortment of programs, the most notable being FontLab Studio. Professional design agencies & type foundries often rely on this program given its standing as the most popular type design program on the market.

The biggest downside for new designers is the $650 price tag. If you’re familiar with Adobe’s pricing then you know design software isn’t cheap.

At some point it may be worth shelling out for this premiere program – but designing your very first font probably isn’t this point.

A cheaper alternative is FontLab TypeTool which is only $50. It runs on both Windows & OS X with many similar FontLab features – most important being a similar interface. If you learn TypeTool then you’ll have an easier time learning FLS if you ever want to spend $600+ on their top-tier program.

23 Creating Your Own Font Pages.indd 23

24/05/2016 9:56 AM

24 Creating Your Own Font Pages.indd 24

24/05/2016 9:56 AM

Glyphs App The previous two programs support all operating systems which is definitely advantageous. But Mac OS X users may want to check out a 3rd option named Glyphs in the Mac App Store.

It follows a different interface than FontForge and FontLab which means learning this program may not transfer well into others. But Glyphs contains all the features you’d need to make a basic(or complex) font from scratch.

New designers should check out Glyphs Mini which costs about $50 for a full license. It’s tailored more towards beginning typographers who want to create a font but don’t need all the advanced features. Take a look at the comparison chart on the Glyphs Mini page to see how they stack up.

Again this may not be a popular choice since it’s not supported on any Windows machines. But OS X users with a taste for adventure may come to know & love Glyphs as their preferred font creation program.

25 Creating Your Own Font Pages.indd 25

24/05/2016 9:56 AM

26 Creating Your Own Font Pages.indd 26

L

24/05/2016 9:56 AM

Building The Typeface: Part 1 Each piece of software is very complex and would require its own guide to explain every feature. Thankfully most of the basics remain familiar across all programs – the differences lie in the interface & workflow techniques.

For example, FontForge covers Bézier curves which are common to those who understand Illustrator’s pen tool. There’s an entire bézier curve guide explaining how this works for PostScript fonts.

27 Creating Your Own Font Pages.indd 27

24/05/2016 9:56 AM

M 28 Creating Your Own Font Pages.indd 28

24/05/2016 9:56 AM

Building The Typeface: Part 2 Another style of drawing is Quadratic curves which are mostly used in TrueType fonts. These can be auto-generated from Bézier curves and as such many designers prefer Bézier. You can read about these two methods and decide for yourself.

In general it’s easier to stick with Bezier since it’s more familiar and follows the same techniques found in Illustrator/Photoshop.

29 Creating Your Own Font Pages.indd 29

24/05/2016 9:56 AM

N

N

30 Creating Your Own Font Pages.indd 30

24/05/2016 9:56 AM

The Beauty of Digital Type Each font design program allows you to import scanned photos as background references and trace the letters to perfection. This is highly recommended but not a perfect solution because hand-drawn artefacts do not always come out perfect.

The beauty of digital type design is precision. You can(and should) align an x-height along with other values that best match your font.

Sometimes you’ll deviate from your original sketch but that’s okay. Your ultimate goal is to make a completed font that works as smoothly as possible.

31 Creating Your Own Font Pages.indd 31

24/05/2016 9:56 AM

O 32 Creating Your Own Font Pages.indd 32

24/05/2016 9:56 AM

Leading and Kerning: The Difference Space is something you’ll need to consider while designing your letterforms. Leading refers to the space between lines of text while kerning refers to the space between individual letters in a word (similar to text tracking).

33 Creating Your Own Font Pages.indd 33

24/05/2016 9:56 AM

34 Creating Your Own Font Pages.indd 34

P

24/05/2016 9:56 AM

Leading and Kerning Both features are built into fonts and while they are changeable using Photoshop’s Type panel, each font needs to have default metrics. If you’re completely new to type design then a lot of this process will be trial-and-error.

Go by other examples and trust your eye. If something looks wrong then it’s probably wrong.

Individual letter spacing needs to be considered but there’s also the potential for ligatures. Again the FontForge guide covers word spacing and line spacing with incredible detail. There may also be differences in weights if you create italic/bold versions of the font.

35 Creating Your Own Font Pages.indd 35

24/05/2016 9:56 AM

Q 36 Creating Your Own Font Pages.indd 36

24/05/2016 9:56 AM

Trust Your Gut! Kerning and leading are two large topics that require practice and a keen eye to fully comprehend. The best advice for a new designer is to do your best and trust your gut. If you’re itching to create a new font then you should jump right into the process without hesitation.

Just don’t forget the importance of measuring space, and more specifically the kerning/leading attached to your typeface design.

37 Creating Your Own Font Pages.indd 37

24/05/2016 9:56 AM

R R 38 Creating Your Own Font Pages.indd 38

24/05/2016 9:56 AM

File Types The two common file types are OTF(OpenType) and TTF(TrueType).

Most type designers feel OTF is a superior choice because it supports more features and more drawing formats. OTF is newer and generally regarded as better for complex fonts.

But if you’re just practicing a simple typeface you wouldn’t notice much of a difference between TTF & OTF. As you get more complicated you may run into different OTF styles like Std, Pro, and W1G. These are font varieties used to outline which features are supported in a particular font(ex: FF Tisa vs FF Tisa Pro).

OpenType font varieties are not necessary for beginners since they’re mostly used by type foundries – but it doesn’t hurt to have a little background knowledge.

39 Creating Your Own Font Pages.indd 39

24/05/2016 9:56 AM

S 40 Creating Your Own Font Pages.indd 40

24/05/2016 9:56 AM

Exporting Towards the final design stage you’ll want to export your font for testing. This can take many drafts before completion and requires a lot of exporting.

The export process is different with each program and simply takes a bit of research. Since FontForge is open source they do have a free export guide which covers some basic differences and the step-by-step process.

41 Creating Your Own Font Pages.indd 41

24/05/2016 9:56 AM

T 42 Creating Your Own Font Pages.indd 42

24/05/2016 9:56 AM

Using Your Font Now that you’ve exported your font you will be able to install the font file to your own computer and use it like any other font.

43 Creating Your Own Font Pages.indd 43

24/05/2016 9:56 AM

U 44 Creating Your Own Font Pages.indd 44

24/05/2016 9:56 AM

Refining Your Font Even though most of your refinement was done pre-export it’s important to play around with your font. This checks your fonts functionality and will tell you if you need to go and readjust a character or your leading and kerning settings. You may need to export your font several times before you get a useable font.

45 Creating Your Own Font Pages.indd 45

24/05/2016 9:56 AM

V 46 Creating Your Own Font Pages.indd 46

24/05/2016 9:56 AM

Practice Makes Perfect Type design is like most areas of the design world: you’ll learn best by doing. Of course that advice can be off-putting when you have no idea where to start.

Designing a masterful typeface requires years of practice – but it may take only a couple weeks to complete your first font and learn quite a bit from the experience.

47 Creating Your Own Font Pages.indd 47

24/05/2016 9:56 AM

W 48 Creating Your Own Font Pages.indd 48

24/05/2016 9:56 AM

Distributing Your Font Once you have finalised a font or two you may find yourself wanting to gain recognition for all the hard work you put into your font. A good way of gaining recognition and receiving feedback from other type designers is by uploading your font to the internet. There are multiple font sites that you can publish your work to for free. Then the whole world will be able to download and use your font.

49 Creating Your Own Font Pages.indd 49

24/05/2016 9:56 AM

X 50 Creating Your Own Font Pages.indd 50

24/05/2016 9:56 AM

Selling Your Font If you think your font is good enough you can even sell your font through various online sites such as FontShop.com and MyFonts.com Selling fonts is not recommended for beginner type designers so practice!

51 Creating Your Own Font Pages.indd 51

24/05/2016 9:56 AM

Y 52 Creating Your Own Font Pages.indd 52

24/05/2016 9:56 AM

Challenge Yourself With designing your own fonts you should become comfortable with every process and you’ll find it will help your creative process in the rest of your design endeavors as well. If you really want to challenge yourself try designing a font for an entirely different language, this will help you develop non-bias letterforms and can help you beat creative boundaries created by your native language. Challenge yourself but most of all have fun! Enjoy your new found skill.

53 Creating Your Own Font Pages.indd 53

24/05/2016 9:56 AM

Z 54 Creating Your Own Font Pages.indd 54

24/05/2016 9:56 AM

you're now a type designer...

55 Creating Your Own Font Pages.indd 55

24/05/2016 9:56 AM

56 Creating Your Own Font Pages.indd 56

24/05/2016 9:56 AM