Design insights & tutorials.

How To Design a Font: {Part2} Draw Up A Storm!

Turquoise Flag-Tip

Terminology

Before we get into the meat of this tutorial I want to give you a crash course in font terminology. I know it’s not exactly the most exciting thing but I seriously think it’s good for you to know this before we get too far.


Sans serif: A type of font that doesn’t have accents on the end of its strokes.


Serif: A font that has little accents on the end of its strokes.

Vocabulary to Know:
Baseline: The line that the letter sits on.
Median: the middle line where lowercase letters end.
X height: the distance between baseline and median, traditionally 60 percent of the total height of the cap height.
Cap height: the line where capital letters end.
Ascender height: The line where ascenders end, only slightly above the cap height.
Ascender: the part of a lower case letter that extends above the median.
Decender: the part of a lower case letter that goes below the baseline.

Sketching

Now that you have your inspiration and an idea for your font it’s time to put it into action. I think that some designers sort of forget about the sketching process. It’s honestly the MOST crucial. The beauty of sketching is there isn’t a sense of commitment. You can crank out loads of ideas very quickly since you aren’t worried about making the design look perfect. It’s a lot faster to do 10 loose sketches on paper than trying to do the same thing on the computer. I remember one of my professors once said that the computer is a tool, no different than a pencil or pen, don’t rely on it to design for you.


There are several different ways in which you can draw some ideas. I use a combination of ways to get my thoughts together. Usually I use a scroll that’s always on my desk for sketching. The reason I use a scroll instead of a piece of paper is because I like not being limited by how many sketches I can do. Plus, it’s all contained in that one roll so I never have to worry about losing a sketch.


In the sketching process I will draw a few characters that I think might help me figure out the characteristics of the rest. Here are the characters that I usually start out with first: a, e, g, n, d. You can also do a few capitals as well like: A, E, G, M. From these characters it will give you a good variety of forms that are pretty similar in other letters. Start out designing these letters and see what you think. If they’re working try some more, if not then you haven’t wasted your time designing an entire font that sucks.


Draw a variety of perspectives of the font as well. I usually like to draw a few pieces of the font to show how different pieces are going to connect. Don’t be afraid to draw really quickly at first. When you start seeing something you like, draw a few different versions of that idea to see what you like best. Never settle for your first idea. Sometimes I will also write notes on the side of my sketches just to remind myself of something when I do the final sketch.

This initial sketching time is sort of like a funneling process to get down to that one idea that you are really excited about.

Once you’ve got a pretty clear idea of where you see the font going, it’s time to get out the grid paper. This is when you are going to draw out ALL of your characters. I like to use grid paper just because I can get the proportions between letters right on. Keep in mind that all your letters aren’t going to take up the same width, but they should be the same height. Some letters like “M” and “W” are going to take up a lot of width but letters like “I” don’t take up much at all. At this point in your sketching you’re still not fully committed to one idea, so feel free to play around with different ideas. Sometimes I will do a few different versions of a letter if I’m still not satisfied.

Next Time: Going Digital

Now that you have all of your characters drawn it’s time to get digital. Sometimes I will scan in my grid paper drawings and just trace them in illustrator. You can also just look at the drawings to design the characters, whatever works best for you. If this is your first font maybe you should go from a scan.

About the Author, Katie Major

I'm a graphic designer with a passion for typography, learning, photography, reading, knitting, and playing music. Check out some of my personal projects here.
Discover More by Katie Major

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • http://www.studio5555.de/ Philipp

    Nice How To! I use a ring binder for my sketches an i never lose a sketch, too. :)

  • http://www.studio5555.de/ Philipp

    Nice How To! I use a ring binder for my sketches an i never lose a sketch, too. :)

  • http://designshard.com Max | Design Shard

    Nice 2nd part i was wondering which letters to sketch out first for detail reasons (now i know), a roll of sketching paper is a neat idea, less clutter and more space,

    Cant wait for the next part.

  • http://designshard.com Max | Design Shard

    Nice 2nd part i was wondering which letters to sketch out first for detail reasons (now i know), a roll of sketching paper is a neat idea, less clutter and more space,

    Cant wait for the next part.

  • http://www.geoffmay.com Geoff May

    Nice job, Katie.

  • http://www.geoffmay.com Geoff May

    Nice job, Katie.

  • Ragnar Þór

    nice, keep it coming

  • Ragnar Þór

    nice, keep it coming

  • ChequeredManiac

    Great lesson, such a teaser tho. But I guess there’s plenty of info for us to get our heads around first.

  • http://www.grafp.com Corbin

    shame you dont own a Mac. hahahahaha awesome tips, thank you so much

  • http://www.grafp.com Corbin

    shame you dont own a Mac. hahahahaha awesome tips, thank you so much

  • ChequeredManiac

    Great lesson, such a teaser tho. But I guess there’s plenty of info for us to get our heads around first.

  • http://www.williambiwer.com Bill Biwer

    Great information for the second part of the series. Again, can’t wait for the next installment.

  • http://www.williambiwer.com Bill Biwer

    Great information for the second part of the series. Again, can’t wait for the next installment.

  • http://pica-ae.deviantart.com pica-ae

    wow, this is a really great series of tutorials
    i’m really looking forward to seeing more
    …and the scroll for scribbles is pretty strange, but good :-)

  • http://pica-ae.deviantart.com pica-ae

    wow, this is a really great series of tutorials
    i’m really looking forward to seeing more
    …and the scroll for scribbles is pretty strange, but good :-)

  • http://www.spgrafiks.com Simona

    Great info, cannot wait until you’ll post “going digital”.

    @Philipp : Gotta get that ring binder, great idea.

  • http://www.spgrafiks.com Simona

    Great info, cannot wait until you’ll post “going digital”.

    @Philipp : Gotta get that ring binder, great idea.

  • Tori

    WOOHOO…I am a font freak…(not to be confused with the website)and Im waiting on pins and needles to know the next step… I have TONS of font ideas…but any kind of “font maker” deal I ever downloaded never gave me the results I wanted…I knew I could do it in illustrator…but never honestly bothered to search enough to find out how…Thanks for the ongoing tutorial..I cant wait to finally see my OWN font

    LOVE the scroll…I have a butt load of that butcher paper here as well…(its great for kids too)….

  • Tori

    WOOHOO…I am a font freak…(not to be confused with the website)and Im waiting on pins and needles to know the next step… I have TONS of font ideas…but any kind of “font maker” deal I ever downloaded never gave me the results I wanted…I knew I could do it in illustrator…but never honestly bothered to search enough to find out how…Thanks for the ongoing tutorial..I cant wait to finally see my OWN font

    LOVE the scroll…I have a butt load of that butcher paper here as well…(its great for kids too)….

  • Mayj

    thanks for the great idea! now i have great use for 2 rolls of craft paper gathering dust!!

  • Mayj

    thanks for the great idea! now i have great use for 2 rolls of craft paper gathering dust!!

  • http://aetoricdesign.carbonmade.com Jacob Campbell

    Scroll is a great idea. If I ever get an office, I’ll have to try that idea out. Maybe start out with one a little small that yours though. Looking forward to the next installment!

  • http://aetoricdesign.carbonmade.com Jacob Campbell

    Scroll is a great idea. If I ever get an office, I’ll have to try that idea out. Maybe start out with one a little small that yours though. Looking forward to the next installment!

  • http://userinterfacedesigns.blogspot.com/ Madhu R

    Great yaar….
    This is a really great series of tutorials….

  • http://userinterfacedesigns.blogspot.com/ Madhu R

    Great yaar….
    This is a really great series of tutorials….

  • Tim

    Gah, awaiting my new Moleskines, so most of my sketching is on hold. I really wanna get into some better typography though.

  • Tim

    Gah, awaiting my new Moleskines, so most of my sketching is on hold. I really wanna get into some better typography though.

  • http://www.technosamrat.com TechnoSamrat

    Wow a good tutorial.. I do not know until I read this post that there is a lot of work like this involved in designing a font…

  • http://www.technosamrat.com TechnoSamrat

    Wow a good tutorial.. I do not know until I read this post that there is a lot of work like this involved in designing a font…

  • http://www.axzm.com axzm

    Lovin’ it guys. Concise, informative, methodical… Keep em coming!

  • http://www.axzm.com axzm

    Lovin’ it guys. Concise, informative, methodical… Keep em coming!

  • http://svensworld.de sven

    I can’t wait for the going digital part of this series as I always wanted to create a few handwriting style types, but never had the chance to really look into the process of creation. Thanks for outlining the basics.

  • http://svensworld.de sven

    I can’t wait for the going digital part of this series as I always wanted to create a few handwriting style types, but never had the chance to really look into the process of creation. Thanks for outlining the basics.

  • Pingback: AndySowards.com :: Web Development Nerdy Daily Links For 11/04/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • Auror

    very insightful article, great job katie!
    I’m always interested in other designers work habits. Always helps me improve my own.

  • Auror

    very insightful article, great job katie!
    I’m always interested in other designers work habits. Always helps me improve my own.

  • http://www.gomedia.us katie

    hey everyone! thanks for the awesome support for these tutorials! If you have any questions as we’re going along please feel free to email those questions. katie@gomedia.us

  • http://www.gomedia.us katie

    hey everyone! thanks for the awesome support for these tutorials! If you have any questions as we’re going along please feel free to email those questions. katie@gomedia.us

  • adam

    Wow! im looking the next step of this tutorial.

  • adam

    Wow! im looking the next step of this tutorial.

  • Pingback: ionoi » Real world advice from working artists and designers

  • Perlinpinpin

    the scroll is great…

  • Perlinpinpin

    the scroll is great…

  • http://www.starik.name/ СЕО

    Не пора бы вам начать монетизировать ваш блог?

  • http://www.starik.name/ СЕО

    Не пора бы вам начать монетизировать ваш блог?

  • Pingback: How to Design a Font: {Part 4} Finishing Touches | GoMediaZine

  • Pingback: SWANKOID » Font Creation Resources

  • http://www.downloadic.com Downloadic

    Nice information, I like the typography…

  • Scoot159

    Good. Very high quality work that many labor More look certain to hold a health….

  • Scoot159

    Good. Very high quality work that many labor More look certain to hold a health….

  • Scoot159

    I have TONS of font ideas…but any kind of “font maker” deal I ever downloaded never gave me the results I wanted…I knew I could do it in illustrator…but never honestly bothered to search enough to find out how

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://iphonejailbreak.us Iphone Jailbreak

    very amazing font…

  • http://www.usa-basketball-shoes.com/Vince-Carter-shoes.html Vince Carter Shoes

    Here elaborates the matter not only extensively but also detailly .I support the write’s

    unique point.It is useful and benefit to your daily life.You can go those Wisdominthemind.com Elegance-is-Edgy-Dress.com

    sits to know more relate things.They are strongly recommended by friends.Personally

  • http://www.nike-air-force-one.com/Nike-Air-Force-1-mid.html air force shoes

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. music-ofthesun Believe me these websites won’t let you down.

  • http://www.nike-air-force-one.com/Nike-Air-Force-1-mid.html air force shoes

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. music-ofthesun Believe me these websites won’t let you down.

  • http://vibram4u.com/ moncler outlet store

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here <a href=” http://music-ofthesun.com/ ” >wslmart.net you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. Believe me these websites won’t let you down.

  • http://www.moncler-down-jackets.com moncler down jackets

    Here elaborates the matter not only extensively but also detailly .I support the write's unique point.It is useful and benefit to your daily life.You can go those sits to know more relate exceptfor.net things.They are strongly recommended by friends.Personally I feel quite well.

  • http://www.discount-nike-dunk-shoes.com dunk sb shoes

    Hhe article's content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion.
    http://www.assure-every.com

  • http://www.discount-louis-vuitton.com louis vuitton for sale

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I ugg boots m free and I find there are so much good information we can learn in this forum!

  • http://www.usa-basketball-shoes.com usa basketball shoes

    In this material life of society, fashion seems to be a habit. Here you can recommend a few mall, I feel good.basketball shoes outlet

  • http://www.chaneloutletstores.com/Chanel-accessories.html Chanel accessories

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum!
    Chanel shoes

  • http://www.hizlindir.org hizlindir

    good tutorials l think.

  • http://www.discount-louis-vuitton.com louis vuitton for sale

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this louis vuitton for sale forum when I m free and I find there are so much good information we can learn in this forum!

  • http://www.louisvuittonbagmall.com/ louis

    Good post,very amazing font.

  • gucci web

    Good. Very high quality work that many labor More look certain to hold a health….

  • http://www.filmizlerik.com filmizle

    These tutorials are ace. Have learned loads from em. Keep em coming and thanks a lot!

  • http://www.domain2host.in Domain Registration

    Good article and very valuable information. Keep it up!
     

  • http://twitter.com/CyberCorpSoft Cybercorp Software

    You make it look so easy!

  • Angelina Parker

    Informative details shared on designing font, its very helpful