Introduction to Typeface Design

1. Trailer: Hi. I am Alonzo and I'm teaching Intro to Typeface Design. I've got a small design studio in Brooklyn focused on a wide range of projects from branding and identity systems to website application design to art direction, illustration, and typeface design. I spent a good part of the last couple of years learning more about working with type and how to design type. I'm excited to share with you some of what I've learned. The visual representation of language has evolved in incredible ways over thousands of years, with every advance in technology bringing with it an advance in how typefaces are made. Typeface design is a really exciting and interesting area of study. Letter forms make up a massive part of our visual culture, everything from billboards and posters to print ads and packaging, and of course, our screens both on the web and mobile. Typeface design is an art salty and small details. In this class, we'll be taking a structured approach going step by step in revealing some of the processes behind typeface design. So, you'll be designing your own typeface from A to Z and I'll end the class with some next steps for taking your typeface to the next level. We'll start out with some history and theory and then move into practical considerations for drawing your own unique typeface. I'm really excited about typeface design both where it is today and where it's all headed in the future. In particular, one area I see of growth is in designing quality typefaces for digital screens. Thanks to Skillshare, we have a chance to explore all this together. So, sign up today and join me in learning more about the process of designing type. See you on the Internet. 2. Why Design Type?: Welcome to unit one of intro to typeface design which is aptly titled Introduction to typeface design. In this course we will be looking at a broad overview of topography including some history and anatomy and then at some of the basics of typeface design. To begin with you may wonder if there's a need for more typefaces. I'd estimate that there are about 200,000 digital fonts in existence today give or take. Not necessarily typefaces, but definitely that many fonts and we'll get into the differences between typefaces and fonts in lesson two of this unit. With the sheer number of fonts that are available today for the desktop and web, you may wonder why typeface designers even bother trying to make new typefaces. Hasn't everything's already been done? These are questions that are on the mind of typeface designer Cyrus Highsmith a Font Bureau, when he wrote the article included in this lesson, which is titled "No There are Not Enough Typefaces Already". He says that these are interesting times in the world of topography. There are more typefaces available now than ever before and there are more different kinds of typefaces available than ever before. It isn't just the graphic designers have more to choose from but the average reader is exposed to more different kinds of typefaces than the average reader 20 years ago. He eventually asserts that there will always be more clients, more people that have a need for new typeface commissions that have both interesting ideas and problems that need to be solved. Typefaces have the ability to speak in different voices and as long as there are new voices that need to be heard, new typeface designs can satisfy the needs of ever more diverse audiences. I tend to agree with this line of thinking, I think technology is a primary impetus for creating new typefaces. Essentially, throughout human history each time our tools were revolutionized there's also a corresponding revolution in typeface creation and design. The digital type revolution has brought along with it many new typefaces and advances in how type has both created and consumed. It is also brought along with it many poor typefaces and designs that can be vastly improved upon. There also typefaces which may be unfinished or forgotten that can be revived for a new generation of type consumers. As we look forward, it is exciting to think about how typefaces we'll have to adapt to technologies that have not even been invented yet. The world is increasingly complex and new typeface designs must adapt to that complexity. So, to sum up, yes there are lots of typefaces in the world more than ever before but there is also more opportunity and better conditions than ever before for new designs and new designers to flourish. If you have any questions about this lesson you can post them to the class Q&A or send a tweet @alonzofelix. 3. What is a Typeface?: So, now that we see that there's still a need for these things called typefaces, what exactly is a typeface? We'll first look at the difference between a font and a typeface since those are probably the two terms used most interchangeably. These terms evolved over a considerable amount of time during many transitions in technology. So, they can sometimes be interpreted in varying ways. Of course, the end result is confusing terminology. So first, a font was a physical collection of glyphs which are what we call letters, numbers, punctuation, and other symbols. In the past, that meant a case of metal or wood type and one size and style. A font originally spelled F-O-U-N-T, in British English, but pronounced font, F-O-N-T comes from the antiquated practice of manufacturing type using molten metal. The font was a part of molten lead or tin which was used for casting individual glyphs and eventually complete lines of type via devices like the linotype machine. Today, a font usually refers to the software that contains a typeface. A font allows a user to install, access, and output the design, that design the way a font looks is called a typeface. As typographer Stephen Klaus put it, a font is the delivery mechanism and a typeface is the creative work. A single typeface might be available in several font formats. As we see in this image, this font is available in desktop web font, app, eBook and server versions. So essentially, we can think of typefaces as the clothes that fonts were, the way a font is dressed can take many forms, from very old to very modern and everything in between. We'll talk about the clothes fonts wear a bit more in unit two, lesson two on typographic classification. So, what makes a typeface different from a font, lettering, or calligraphy? Now, we know that a typeface refers to the visual appearance or design of a related group of letters while font is a software that packages letters and instructions on how to display them into something portable and usable. Some other terms that come up often when discussing typefaces and fonts are lettering and calligraphy. These four terms; typefaces fonts, lettering, and calligraphy are all related in that they are mechanisms that help us present and represent language visually, but there are important distinctions to be made. Lettering refers to a drawing of letters for a specific usage. Unlike fonts, pieces of lettering are not systems, they're not meant to be repeatable and rearrange in any order, brands like Coca-Cola or an example of using a specific piece of lettering to make a product more distinctive. In the case of Coca-Cola, the lettering was drawn individually for that specific usage. In practice, lettering can materialize in many ways. Lettering can be found on shop facades, on posters, book and record covers and of course in branding. The common trait with these examples of lettering is that they're all conceived of as unique solutions for specific purposes. That brings us finally to calligraphy which is writing letters in contrast to lettering which again is drawings of letters. The word calligraphy literally means beautiful writing. Before the invention of the printing press around 500 years ago, calligraphy was the way books were made, each copy written out by hand, by a scribe on materials like vellum or parchment. The writing instrument was generally a quill or brush and ascribe would have used ink and one of the period bookends like rustic, Carolingian minuscule or black-letter to copy a document. In Europe, between the 14th and 16th centuries, two cells developed that influenced all subsequent handwriting and printing, the Roman and Italic styles. Those styles are very familiar to us today and find their origins in this richest oral tradition of writing letters by hand. Calligraphy is often associated with craft as well, placing emphasis on shock rhythm and the expressive qualities of fluid lines. There's lots of digital type today that emulates what comes naturally to the hand, yet however diminished, the practice of calligraphy is still alive and well all around the world. So, to sum up, we've learned that a typeface refers to the design of a related group of letters, while a font is software that packages those letters together into a consumable unit. We've learned that lettering is a unique drawing of letters for a specific purpose while calligraphy is writing of letters tied to a rich historic tradition of penmanship. One final thought here. I mentioned the linotype machine earlier in this lesson, and about a year ago, I attended a screening of linotype for film. It's about the history of the machine, it's operators, and the state of affairs today. It's an insightful and emotional look at a piece of American Printing History, I highly recommend it. You can find out more at linotypefilm.com. If you have any questions about this lesson, you can post to the class Q&A section or send a tweet @alonzofelix. 4. Type Anatomy 101: Let's move on to typographic anatomy. How do you distinguish one typeface from another? If you're looking at two very different typefaces, the differences are easy to see. However, in other cases the differences are far more subtle. An important step in training your eye to see these often minute differences between letters is to look closer at the anatomy of the characters. There's no official universally agreed upon vocabulary for describing the unique structural features of type. But, there are some terms that type designers use often and we'll use them for the purpose of familiarizing ourselves better with the basic parts of letters. This typographic vocabulary should help you discuss type more fluently. You'll notice that many terms share some overlap of human and animal anatomy which is helpful since those are probably familiar to you already. So, first arms and legs. These are upper or lower horizontal or diagonal strokes that are attached on one end and free on the other. Ascender, this is the part of lowercase characters such as B and H that extends above the x-height. Apex. This is a point at the top of a character where two strokes meet and the case of the uppercase A, this is where the left and right strokes meet. The apex maybe a sharp point, blunt or rounded and is often an identifying feature of typefaces. Body height. This is the distance between the top of the tallest letter form and the bottom of the lowest letter form in a typeface. Bowl. This is a curved stroke that creates an enclosed space within a character, that space is then called a counter. Cap height. This is the height of capital letters from the baseline to the top of the letter form most accurately measured on characters with flat bottoms, such as E and H. Counter. These are partially or fully enclosed spaces and site characters also known as the aperture. Cross bar. This is a horizontal stroke in characters such as H and E. Descender. This is the part of a character such as lowercase G and Q that descends below the baseline. Diagonals are angled strokes, fan in letters such as capital W and capital Z. The ear is a small stroke that projects from the top of the lowercase G and I refer specifically to the enclosed space in a lowercase E. A hook is a curved, bent, protruding stroke in a terminal, usually found on a lowercase F. A link is the stroke that connects the top and bottom part the bowl and loop of a two-story lowercase G. The lobe is a rounded projecting stroke attached to the main structure of a letter, found on letters like uppercase P and B. A loop is the lower portion of a lowercase G. A serif is a projection extending off the main strokes of characters of serif typefaces. Serifs come into styles, bracketed and unbracketed. Brackets are the supporting curves which connect the serif to the stroke. Unbracketed serifs are attached sharply and usually at 90 degree angles. This is a quick overview of some serifs styles. The shoulder is the curved stroke of an H, M or N. Spine is the main curved stroke of an S. A stem is a straight vertical stroke or the main straight diagonal stroke in a letter which has no verticals. The stress. For typefaces that exhibit changes in the thickness or curved strokes, the inclination of the axis of the lower-case O is used to measure the angle of stress. Stress can be vertical as in this image, or it can be positive or negative depending on the angle. A tail is the descender of a queue. Terminals are the ends of strokes not terminated with serifs. Tittle. This is a small distinguishing mark such as the diachronic appearing on a lowercase I or J, also known as adopt. Vertex. This is the outside point at the bottom of a character where two strokes meet, such as in a V. This is the opposite of the apex. X-height. This is the height of lowercase letters specifically the lowercase X, not including ascenders and descenders. A full list of these terms with examples is available in the Downloads section for this unit. If you have questions about this section, you can post them to the class Q and, A or you can send a tweet at alonzofelix. 5. Overview of Typographic Classification Systems: Let's move on to an overview of typographic classification systems. How do we group and classify typefaces. For nearly 100 years, scholars and typographic groups have tried to create order from chaos but every system has its flaws and contradictions. There are always outliers, but a few of the better known ones are the Vox ATypI system and bring her system. The Vox ATypI System was created in 1984 by French writer an art critic Maximilien Vox. In his book, The Elements of typographic style and the Canadian writer and typographer Rubber Bringhurst categorizes typefaces loosely after periods of art history. The book is very highly regarded as a seminal text in typeface design circles. I prefer to group typefaces according to their visual appearance using the 15 groups outlined by typographers Stephen Coles in his book The Anatomy of type. So, now we'll move on to looking at the categories in this book. First, we have the Humanist Serifs. These are very calligraphic with a consistent stress angle and moderate stroke contrast. Serifs are usually bracketed and asymmetrical. As we will be discussing Serifs quite a bit in this section, here's a visual rundown of some Serif styles. They can either be bracketed meaning joined with a connected stroke or unbracketed in which case the strokes normally terminates at 90-degree angles. Okay, back to classification with the transitional Serif category. Transitional Serifs are slightly calligraphic with variable stress angle and usually more strokes contrast. Serifs are usually bracketed and bulb-shaped. The Rational Serif. These have a regularized structure with vertical stress and moderate to high stroke contrast. Some typefaces in this category have thin unbracketed Serifs. They all share ball terminals. Contemporary Serifs. Styles may vary here, but most have a large x-height low stroke contrast and large chunky serifs with very open apertures. Inscribed or Engraved typefaces are derived from chiseled or engraved letters. Low stroke contrast is common. Serifs are usually wedge-shaped and some have flared terminals. Grotesque Sans. These are similar in structure to transitional or rational serif typefaces. There's usually low stroke contrast and fairly regular proportions. Round shapes like O are often oval not circular. Neo-Grotesque Sans. Like Grotesque Sans but with more homogenous forms. There's minimal stroke contrast with closed apertures and horizontal terminals. Round shapes like O are more circular. The Gothic Sans. This is the American variant of the Grotesque style with simpler more static forms. These usually have a large x-height, a low stroke contrast and a condensed width. Geometric Sans. These are very static shapes that are nearly circular or nearly square with minimal stroke contrast. The Humanist Sans. This is the counterpart to a first category the Humanist Serif. They're calligraphic in structure, often with higher stroke contrasts than other Sans Serifs with very open apertures. The Neo-Humanist Sans. These are contemporary evolution of the Humanist Sans with a larger x-height. They're very open apertures and low stroke contrast. The Grotesque Slab. These have similar forms to Grotesque Sans Serifs but with heavy rectangular Slab Serifs. They have closed apertures and ball terminals are very common in this style. The Geometric Slab. These have similar forms to Geometric Sans Serifs though with unbracketed rectangular Slab Serifs about the same weight as the Stems. The Humanist Slab. These have similar forms two Humanist Sans Serifs, but with unbracketed rectangular or wedge-shaped Serifs. And finally, Scripts. Any typeface that emulates handwriting whether it connected cursive or informal print. So, what is the one correct system for classifying typefaces? There's no one universal system for classifying type, but the system we just looked that should give you a broad idea of categories that typefaces may fall into. There are always exceptions to the rule and typefaces that defies easy categorization. So, while there is no one quote correct system for classifying typefaces, it is still helpful to make some sense of the sheer number of fonts that are available. Hopefully, while learning about these groups, you've discovered a style of type that interests you for your own project. Again, a full list of these terms with examples is available on the download section for this unit. If you have any questions, you can post to the class Q&A or send a tweet @alonzofelix. 6. Text Type and Display Type: Let's talk about text type and display type. What are the differences between the two? A good text typefaces easy on the eyes, and comfortable to read, and long blocks of copy. It does not call much attention to itself and it's generally designed to perform best between six point and 14 point sizes. Text types usually employ fairly clean, consistent, uncomplicated design features with more open spacing than display faces and bolder strokes that hold up better at smaller sizes. In contrast, display or headline typefaces which we're focusing on in this class are normally used at large sizes 16 point and up and they're meant to grab and direct attention to a smaller text setting, to create a mood or set a tone or to announce important information. Sometimes they accomplish all of these at the same time. They are intended to stand out with a strong personality elaborate and more expressive shapes and a more stylish look. They perform well when they are appropriate. However, display typefaces can look very odd and the applications where text typeface designs are needed. Complicating things is the fact that current technology makes it possible to set any typeface at any size regardless of the intended use of the original design. So, it is important to note what the original intent of the designer was when looking at typefaces. Also important to note is that many typefaces do not conform to these distinctions and can be used successfully for both text and displaying. Again, for the purposes of this course, we will be drawing display or headline typefaces meant to be used at larger sizes for things like article headlines, posters, book jackets, or packaging. Let's talk about readability and legibility. Clarity and topography comes in two flavors, legibility and readability. Legibility is a function of typeface design. It's an informal measure of how easy it is to distinguish one letter from another in a particular typeface. It can simply be referred to the ability of something to be read. In other words, recognizability of the shapes of the letters is a necessary condition for legibility. Readability on the other hand depends on how the typeface is used. It can refer to comfort level while reading something. Readability is a crucial concept and text typefaces to help avoid eye strain and hold interest. For example, if a novel is really uncomfortable to read due to the shapes of the letters or spacing between letters and lines being too tight or too loose, that novel has poor readability. So, readability is a gauge of how easily words, phrases, and blocks of copy can be read. Just how important is readability to text type? The most important aspect of a text typeface is likely it's readability. Many decisions can influence the readability of a typeface. The type of contrast you choose, the length of the ascenders and descenders, the rhythm, the density of the type and so on. For example, the x-height of lowercase letters is generally larger and text types than display designs and serifs are more pronounced. In addition, spacing between characters is generally more open and text typefaces. All these characteristics help optimize the typeface for reading at small sizes. Taking a look at these two lines of type, we can see that the characters on the top row have much more contrast than the characters on the bottom row. The letters on the top line are more suited to display use. All the letters on the bottom line are better suited for text use, not only because the difference in contrast but also because the letters on the top row are more condensed. This makes them less legible at small sizes but more eye-catching and flexible for headlines. There are larger decisions like contrasts and width which can make text type more readable and also many smaller decisions which improve the readability of a font. For example, the ear of a G can help readers eye follow the horizontal reading direction more fluently. So, the G on the bottom row will work much better and a text typeface for small sizes than the one in the top row. If you have questions about this section you can post to the class Q and A or send a tweet @Alonzofelix. 7. Influence from Writing Systems: Let's look at how writing systems and tools have influenced styles of type. There are two main types of contrast in typeface design that affect the way letters are constructed, expansion and translation contrast. Both come from calligraphic origins, but different tools, rigid versus flexible. So, connecting these thoughts with the ones from unit one about calligraphy, the characters in the top row here are constructed with a rigid calligraphic tool called a pointed pen, that is held at a 90 degree angle when writing. The contrast is caused by changing the pressure on the pen, not because of the characteristics of the pen itself. This is called expansion contrast. Bodoni is one example of this, but also Sans- Serif faces like Helvetica, have this origin. The stems or main strokes resulting from this type of contrast are mostly vertical. So, looking at things this way, there is no difference between Bodoni and Helvetica, they both have the same construction, only the contrast in terminals vary. The characters on the bottom row here have their origin and broad-nib pen writing. This type of flexible calligraphic tool has both thick and thin parts as you can see in the image. The contrast in typefaces of this sort is made because of the form of the pen, not because of the pressure. This tool is held to paper slanted at an angle of around 30 degrees, give or take. Because of this, the thickest part of a character drawn with translation contrast will not be vertically oriented, but will be on an angle. By the same token, the thinnest parts of letters drawn with this type of contrast will not be on horizontals like letterforms based on a pointed pen. Typefaces like Garamond and Minion have this type of construction. If you want to know more about these different origins for letters, you can check out the books of Dutch topographer Gerrit Noordzij. He explains concepts of expansion and translation contrast very well in many of his writings. So, to sum up, in this unit we've learned how to better describe the parts of letters, and looked at one system of classification, the differences between text and display fonts, some principles of readability and the calligraphic origins of expansion versus translation contrast. Now, we can move on to looking at some practical considerations for designing type. If you have questions about this unit, you can post to the class Q&A, or send a tweet @alonzofelix. 8. The Design Space: Let's take a moment to consider the design space. We want to visualize the spectrum of available typographic options. As initial design ideas begin to take shape, most type designer start by defining the typographic parameters of the project. It is helpful to think of a type design in terms of a multidimensional space containing all possible shapes. The space is known as the design space. You can start to break down any particular type design by thinking of typefaces as the sum of all possible parameters. In other words, the design space contains all possible options for what a typeface could become and any given typeface is the sum total of all the decisions that the type designer made during the process. So let's move on to some practical considerations for designing type that make up the design space. These include considerations like, will the letters be serif or sans-serif? Will they be used for display or for text purposes? Will they be constructed geometrically or based on handwriting? We'll take each option in turn. First, you need a consistent baseline which is the imaginary line upon which letters rest. In most typefaces, the descenders on characters such as g extend down below the baseline, while curved letters such as C or O extend ever so slightly below the baseline. Cap height. This is the height of a capital letter above the baseline for a particular typeface. It's specifically refers to the height of capital letters that are flat, such as E or H, as opposed to round letters such as O, which normally go above the cap height. Ascender height. The upward vertical stem on some lowercase letters such as b or h that extends above the X height is the asender. The height of many ascenders is an identifying characteristic of typefaces. Descender length. Opposite the ascender height, is the descender length. The part of some lowercase letters such as g and q that extends below the baseline is the descender. The length and shape of the descender can affect readability of lines of type and is also an identifying factor for many typefaces. Serifs style. Serifs are little extra strokes found at the end of main vertical and horizontal strokes of some letter forms. They're commonly described as little feet. Some serif styles include cupped, rounded, hairline, bracketed, wedge and slab. Within these divisions, serifs can be blunt, rounded, tapered, pointed or some hybrid shape. Serifs can be bracketed or unbracketed. Unbracketed serifs attach directly to the strokes of the letter forms sometimes abruptly or at right angles. While bracketed serifs provide a curve transition between the serif and the main strokes. Here are some additional examples. X height. The X height of a typeface affects visual impact, size and spacing. Again, larger X heights work great in text typefaces as the larger size makes letter form is more open and easier to read as size is reduced. Contrast. This is the difference between a horizontal and vertical stroke thicknesses. Remember, the two types of contrast expansion and translation and the writing systems they come from. Weight. Stroke widths can range from very light to extremely heavy. A common progression is then, light, book, medium, dimmy bold, bold, extra bold, black and ultra. A typeface usually has at least three weights; light, medium and bold. Proportion. This refers to the width of a character in relation to its height. Generally, the narrowest proportion is described as ultra compressed or condensed. Descriptive width names then usually progress to extra compress, compress, condensed, regular, bold, black, ultra and extended. While a typeface may offer several degrees of typeface compression, it is rare to have more than one width of expansion. Here are some examples playing around with weight and proportion in combination. Stem width. The stems of capitals are usually bolder than the stems of lowercase letters. How much thicker will yours be? Also think about curve compensation. A curve tends to be thicker than a straight line. For example, at the widest point, the curve of this capital D is about 11 percent wider than the straight stem. Stress. Think of the stress or axis of a typeface as an imaginary line drawn from the top to bottom of a glyph bisecting the upper and lower strokes. For typefaces that exhibit changes in the thickness of curves strokes, the inclination of the axis of the lower-case O is used to measure the angle of stress. A completely vertical axis as in this example indicates a design with an angle of zero or vertical stress. When the axis leans to the left or right, the design has angled stress which can be either positive or negative depending on the angle. With all these possibilities for your typeface, self editing is a crucial part of the process. It is very normal at this stage to have lots of ideas that may or may not work together, so it's good to keep an open mind and be flexible with your choices. In addition to the options we just went over, another practical thing to consider is how you want your font to be used. If you want to draw a thought that can be used for a poster or a billboard as opposed to say a novel, you would approach the project differently. Having a clear idea of the end use of your typeface can help guide a lot of your decision-making. Drawing a shape you are certain about takes less effort, so if you know what you want, then you're halfway home. If you try and design a font that's good for everything, it might not really be good at anything. But if the font works really well for one specific use, it'll probably work really well for lots of other uses. If you have any questions about this unit, you can post to the class Q and A or send a tweet @alonzofelix. 9. Families and Superfamilies: Let's talk now about families and superfamilies in typeface design and what exactly those are. In this course, we're focusing on one weight and style of type and drawing out a small sampling of the character set. On the opposite end of the spectrum is the concept of families and type design. When typefaces were first invented the notion of having a family of type hadn't occurred to anyone. All fonts were simply Roman designs. In the early 16th century, cursive or italic type was introduced. There was still no typeface families, romans were one style of type and italics were another much like serif and sans serif types today. In the late 1700 foundries began to release fonts and families pairing Roman and itallic designs that matched each other in style. Later the concept of typeface weights and proportions was added to the typeface family mix. In the 20th century type families were enlarged even further with the introduction of different designs such as condensed, expanded and outlined. A really large family of type is called a superfamily. A superfamily can consist of dozens of related fonts and multiple weights or widths, often with both sans serif and serif versions. A good example of a superfamily is Univer which was designed by a Swiss typographer, Adrian Frutiger, in 1987. He designed 21 versions of Univers and five weights and widths because he felt that the traditional system of providing names for typefaces like bold, semi-bold, semi-bold condensed and so on was confusing and outdated, he proposed a logical systematic numbering scheme which you see here. In this system each typeface was given a two digit name. The first digit classified the alphabet weight with three indicating the lightest weight in the family and nine the boldest. The second digit identified the typeface proportion with higher numbers for condensed designs and lower numbers for wider designs. In addition, if the second number was odd, the typeface was a Roman design. If the second number was even, the typeface was italic. So looking at this chart, Univers 39 is a very light condensed Roman, while Univers 56 is a medium weight italic with normal proportions. Another good example of a superfamily is thesis by Dutch type designer, Loop De Groot, originally released in 1994 and expanded over the years. These kinds of large systems for typefaces can be very useful as all-purpose tools for communicating various types of content in a similar tone and voice. So, although we won't be creating any families or superfamilies of type in this course, I think it's important to know what's out there and how large your project could eventually become. If you have any questions about this lesson you can post to the class Q&A or send a tweet @AlonzoFelix. 10. Overshoots: So now, the moment we've been building toward, which is drawing your typeface, a process often referred to as drafting by typeface designers. We'll cover some concepts that will help you with accomplishing this large task. The first is overshoots, or how to draw forms that are optically correct. So now, putting everything together that we've learned so far, it's time to start sketching and drawing your typeface design. On regular paper, tracing paper or in vector drafting program like Illustrator, you can begin drawing your font. First, establishing some horizontal lines as general guides for baseline, your ascender and descender heights, and finally, the x-height. At this point, most type designers begin by sketching a few key letters that begin to develop the personality and proportions of the design. The concept of overshoot now comes into play. Overshoot of a round or pointed capital letter like O or A is the degree to which it extends higher or lower than a comparably sized flat letter like X or H, thus, achieving an optical effect of being the same size. Formally, it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height. To optically align all characters on a line, they cannot have exactly the same mathematical height. For example, the triangle in this drawing has to be higher than the square due to the excess negative space. If this is not the case, the triangle will look smaller than the rectangle. When creating a typeface, you want all the letters to have the same optical height, in other words, to appear equally tall. Also, round forms have to exceed the baseline to be optically similar. If the circle in this image had exactly the same mathematical height as the square, it will look smaller in comparison due to the excess negative space. Although the extent of overshoot varies depending on the design and the designer, about one to three percent of the cap or x-height is a typical overshoot for a letter like O. So this concept of overshoot is essential to type design because it's a principle for balancing the look of any kind of shape. If you have questions about this lesson, you can post to the class Q&A section or send a tweet @alonzofelix. 11. Grouping: The next important concept is grouping. As you begin sketching, you'll want to group your letters in logical ways to build your typeface. Although the letters in a typeface are distinct from each other, they share many common attributes such as exite, line weight, stress and a common vocabulary of forms and proportions. As such, it makes sense to capitalize on the shared forms by grouping the letters in a logical way during the design process. Keeping in mind overshoots, which we learned about in the last lesson, begin by drawing what is called a control group of characters such as lowercase n-o-p-v, or if you were also sketching caps, you can start with uppercase D-H-O-V, in addition to lowercase n-o-p-v. This control group serves to begin establishing proportions and shapes that you can refer back to throughout the process. In particular, a lowercase n can help establish more vertical forms and branching, and o can help withdrawing other round characters, while p establishes a descender length, and v establishes angles for diagonal letter forms. The same is true for letters like D-H-O-V in the uppercase. It may take some time to be satisfied with the results of your drawings, but hang in there. Once you've made a few good decisions, you'll find that future choices become easier to manage. When you're happy with your control group, move on to a larger group of lowercase a-g-n-o-p-v, or uppercase D-E-H-O-R-V and lowercase A-G-N O-P-V. Building on the forums you've begun to establish initially. At this point, you're drawing out what are generally two of the most distinctive letters in the alphabet, lowercase a and g. These two letters will help define the personality of your font. So, be sure to give them extra care and attention. Remember that the aperture of lowercase a can be very open, very closed, or somewhere in-between. The ball can take many potential shapes. These are a few of them. Be sure the branching matches what you have already decided for letters like n and p. A lowercase a is also generally a little narrower than a lowercase n. The double-storey form of lowercase g is one of the most beautiful letters in the alphabet. It as a complex system of curves that give it life and personality Therefore, distinct parts to this letter, an upper circular form like the shape of your lower-case o, but squatter. A link that usually sits on the baseline, a lower loop, and finally an ear. For spacing purposes, the ear should not extend too far to the right of the letter. When you're pleased with this group of letters, move on to the next set of letters, the uppercase control plus grouping and lowercase prototype. You'll find the full list of these groupings in the project steps. These sets contain some of the most commonly used letters in the English language, and at this stage, your drawings should start to look and feel more like a typeface. Again, be sure to look for similar forums across all the letters and match them so that things look cohesive. This group includes lowercase s, which is one of the trickiest letters to get right. When drawing S's, I find it helpful to first draw the top and bottom curves, and then add the spine in between connecting the two. When pleased with your results with these groups, move on to the prototyped group, again, you'll find the full list of groupings and the project steps. You'll notice that because of generally containing less complex shapes, uppercase letters are a bit easier to solve and draw. Next, you'll proceed to the uppercase prototype and lowercase full alphabet. Again, you'll find the list of groupings in the project steps. Your sketches may look something like this at this point. When you're pleased with your results, proceed to draw the remaining uppercase characters, at which point you should have your full alphabet of upper and lowercase letters if you chose to draw both. High-five. Proportions in type design are too dense to cover in detail in this course, but remember that you can always look at other quality typefaces for some guidance on with relationships between letters. If you have questions about this lesson, you can post to the class Q&A, or send a Tweet @alonzofelix. 12. Relationships: The final concept here is relationships between letters. How letters relate, and how solving for one can help you figure out others. Type design is a great example of the whole being greater than the sum of its parts. A small change will be echoed by other glyphs, and all of these can be multiplied hundreds of times across a single page, as in this text setting. The details as small as they may be, need to be right. As you work through your project, you begin to build a vocabulary of forms, shapes, lines, and curves that will reappear throughout the design. This is why grouping letters together in logical ways is important. For example, the same letter shape that appears in lowercase h will be repeated for the lowercase m and n. Or note how similar shapes appear in a lowercase b, d, p, and q. Be sure to look out for these patterns in your drawings both to save you time and to help your work be more cohesive. A nice resource to wrap up this unit is the site specimen as m.com by typographer Nick Showman. The name refers to typeface specimens which are printed or digital materials that show a typeface in context. Here are some examples of those. The site features large showings of interesting typefaces in a similar way to a typical type specimen, and studying some examples may help you understand the relationships between forms even better. Looking at some examples from the site, you may also find inspiration for your project, and you can put your knowledge to the test to see what you can identify about each sample. For example, we might say this serif typeface has a large x-height. This one has very closed apertures and moderate stroke contrast. This one has heavy slab serifs, and high contrast with a prominent ear on the letter g. This one has a humanist influence, and it's slightly condensed. This one has very closed counter forms, and heavy slab serifs. This one is a light or thin weight with a slightly squarish skeleton and no stroke contrast. This one has wedge serifs and it's influenced by inscribed at letterforms. It also has calligraphic exit strokes. You can check out the PDF provided for this unit to see what else you can now identify about these examples, and definitely check out specimenism.com. It's worth a few minutes of your time. Now that we've reached the end of this section on drawing your typeface, I recommend watching the final unit first, then retracing your steps to the project steps for this unit. You will spend most time sketching your typeface based on all you've learned, but the information in unit five will be helpful to you as you work through making a typeface of your own. If you have questions about this lesson, you can post to the class Q&A, or sending tweet @alonzofelix. 13. Spacing Type: Finally, let's look at some other considerations for designing your typeface. We'll start by learning about spacing type and the importance of the rhythm of type. After your letterform is all sketched, and you're satisfied with the results, the next step would generally be to scan your sheets of drawings and import them into a program with vector drafting tools, like illustrator or font lab. You would then place the drawings into background layers and trace over them to begin building vector forms. Since this is an introductory course, we won't get into a deep discussion of software, but we will discuss a few of the next steps in the process of making your drawings a real working font. So first, a bit about spacing type. As important as the shapes of the letterforms, is the rhythm of the type. A typeface with beautiful letters which are badly spaced can be extremely hard to read. As you can see here, the top line is too tight, the middle too loose, and the bottom is about rape. Defining the rhythm of your typeface goes hand in hand with defining the letter shapes. The negative space or white spaces inside and around letters help to find the rhythm of a typeface, much more than the letters themselves. When your typeface has good rhythm, it is more readable and balanced as a result. Generally, when drawing type and software design for it, you work on the spacing as you draw the type, starting with your control character set and spacing each letter as you draw it, constantly adjusting. Type and spacing affect to each other in every way. There's a natural codependency of positive and negative shapes in a typeface. One literally cannot exist without the other. Changing a white shape or negative space inevitably has an impact on the positive shape the letter form itself. Looking at things this way, we see that in type design, both positive and negative shapes are equally important. Shared spatial relationships between letterforms are also a point to underscore. For example, there is a natural relationship between the space inside a lowercase and the space between a lowercase and an I, as in this drawing. In the top row, you can see the space inside the N is much bigger than the space in between the N and the I. In the bottom row, the relationship is more equal and this way, you get much better rhythm and more harmony in your typeface. The same is true of the negative spaces in the lowercase a and e for example. There is an important relationship between these two forms. If they have optically roughly the same amount of white space inside the counter forms, your typeface will have better rhythm as these letters are repeated many times in a text setting. Spacing a typeface requires lots of testing and fine tuning and the goal is that the overall look of the typeface is even, not too tight or too loose. This way, blocks of copy look a uniform shade of gray. When you begin to space the typeface in a program like font lab, it is a good idea to once again start with control characters like HONo. These are good to start with since they will establish your general spacing for round and straight sided characters. Once you have good side bearings for these characters, which are the horizontal spaces on each side of a letter, you would apply those values to all glyphs that have straight around sides with adjustments where needed. Then you would proceed to place characters into spacing strings like HHAHOAOO for uppercase and nnanoaa for lowercase, replacing uppercase A or lowercase a in this setting, with the current glyph that you were working on. These strings of letters may look and sound a bit odd, but they are invaluable and developing proper spacing. For more troublesome glyph combinations, like A and V, where the letters are often too far apart due to the parallel diagonals, we can move them closer together and instruct the computer to remember. This is called Kerning. It is the process of adjusting the space between characters and a font. The newly adjusted tighter spacing will then appear wherever the letter combination appears in a setting. Finally, spacing italics is a very counter-intuitive process that could probably have its own separate course. Again, it is important to reiterate that spacing a font happens while you were also drawing the font. If the shape of a letter form changes, often the spacing needs to be adjusted as well, so the two should be done at the same point in the process. If you have questions about this lesson, you can post to the class Q&A or send a tweet @alonzofelix. 14. Critiquing Type: Finally, we'll discuss critiquing type and how to spot issues in your work. The process of critiquing a typeface is generally known as proofing. A thought proof is a template for viewing various settings of a typeface to gain context on how things relate overall and to help spot issues. All those web designers have different preferences for how proofs are set up. A good font proof will contain spacing strings, large sized showings of letter forms, paragraph settings of various sizes and perhaps even all caps showings. Paragraphs and font proofs often contain lines of pangrams which are sentences containing every letter of the alphabet at least once. A common pangram that you may be familiar with is, the quick brown fox jumps over the lazy dog. Font proofs are typically generated in the software and design from the latest working draft of a digital typeface. Again, self editing is a crucial part of the process that might look something like this. Early on in the process of drawing a typeface, it's common for a design to contain too many ideas. Editing those down to find the sweet spot and hopefully a novel idea, is part of the process of critiquing your typeface. Besides starting with too many ideas in one design, another common issue is drawing lots of quirky fun glyphs that don't work as a system. Since the typeface is a system, you have to take care that things remain in balance. There are usually certain key letter forms like a lowercase g or a that show off the personality of your font a bit. Not all letters will carry equal amounts of personality and that's okay. It's also important to zoom out. Designing type is switching between micro and macro views. When you're drawing a character, and it's taking up the full size of your paper or screen, it's easy to forget how it will look when you print it out or use it on a small size. It's okay for details that appear at a large size to disappear in text. Only by printing font proofs at different sizes, can you see the real effects of your choices, you gain context for the work. Only by looking at the individual letters that you've drawn and words, sentences and paragraphs, can you begin to understand how all the glyphs work together as a system. Now to close out the course, some general tips for improving and working through problems and typefaces. Showing your work to other people who design type or have a good eye for type can be really helpful. Looking at lots of other typefaces is helpful as well. There are lots of beautifully drawn fonts in the world and studying them closely to figure out why certain decisions were made can help you improve your own skills. You can even open fonts and programs like font lab to examine the drawings in full detail. Remember, to draw both the black and the white shapes deliberately, consider the positive and negative spaces. Balancing them will help you with spacing and understanding the overall weight of the forums. You can also turn your drawings upside down or sideways which will help you understand the forms from a different perspective. Even with all the technological advances and typeface design, it is still a process largely dependent on the human eye. Developing your eye for typographic details is crucial to making quality type, as with anything, it takes time for things to become instinctive. I highly encourage both lots of looking and lots of drawing. Remember, designing a good typeface is a marathon, not a sprint. Good luck out there. If you have questions about this lesson, you can post to the class Q&A or send a tweet at @alonzofelix. 15. Class Wrap-Up: Now, for a very brief class wrap-up. In the resources section for this unit, you will find a PDF containing a list of resources for further study. If you, like me are intrigued by the process of designing type and wants to learn more, you will find suggestions and recommendations there. I curated a shortlist of books with information on everything from typographic theory to how to use typefaces effectively and lots in-between. There's a list of commonly used software programs for designing typefaces and a list of magazines and journals to read more about the role of type. If you're interested in spending a year learning more about all of this, here's some educational programs where you can do that. These are sites and forums to check out online that are devoted to typography, followed by a curated list of type foundries that do great work. Finally, some resources for using quality typefaces on the web. Thanks for listening. Thanks to Skillshare for making this class possible. Good luck. 16. Explore Design on Skillshare: way.