27 Must-Have Typefaces for Graphic Designers

AppId is over the quota
AppId is over the quota

This article explores 27 typefaces that will serve as a solid foundation for your typeface library. Take what you will from my suggestions. More importantly, learn from them and use that knowledge to build a typeface library that works for you!

Most typefaces fall into one of five categories: serif, sans serif, script, display/decorative, and blackletter. Within these main categories are a dizzying number of sub-categories such as modern, transitional, humanist, glyphic, calligraphic, digital, grunge, handwritten, geometric, slab, and old style, to name a few. It can get incredibly confusing in a hurry!

A well-stocked font folder should include a few typefaces from each of the above categories. Think of them as pantry staples… items like flour, baking powder, olive oil, chicken stock, sugar, tomato paste, crackers, fun size candy bars, potato chips, and Merlot. Oops, it seems I’ve wandered out of the pantry! Not to worry. Even though some of those items aren’t staples, they are nice to have on hand in case of an emergency. The same is true for your typeface library. Build a solid set of tried and true typefaces and throw in a few fun typefaces simply because you like them!

The difference between a serif typeface and a sans serif typeface is that serif typefaces have serifs (little "feet", or short lines, on the ends of their characters) and sans serif typefaces do not. Makes sense, huh?! It is believed that these little appendages/serifs help the eye flow from character to character and increase readability. Many books, magazines, newspapers, and other publications with large blocks of text are set in a serif typeface.

Conversely, sans serif text is thought to be easier to read at low screen resolutions and is the more common choice for the web. People have been debating and studying the validity of these assertions for ages. I believe it’s a matter of personal taste. More and more, I have been using sans serif fonts for body copy. Why? Because I like the way it looks.

Serif typefaces typically fall into one of four subcategories: Old Style, Transitional, Modern, and Slab.

Let’s start with the original serif typeface, Old Style. Also known as Humanist, Old Style serif typefaces have thick and thin strokes with slight variations in weight. The thinnest part of each character is at an angle, giving it elegance, a sense of movement and oodles of fancy pantsy-ness. If you drew a straight line from the thinnest part of an old style character to the thinnest part of the stroke on the opposite side, the result would be an angled line.

Typefaces such as Caslon, Bembo and Goudy are excellent classic options when a touch of dignity and formality is in order.

Transitional, or Baroque, serif typefaces differ from Old Style serif typefaces in that they are less calligraphic and more upright. The thin strokes of each character are at the top and the bottom rather than at an angle. There is also a significant contrast between the thick and thin strokes.

Baskerville, Century and Bookman are good examples of transitional serif typefaces. These typefaces are appropriate in formal settings yet aren’t as pretentious as their old style relatives.

Modern serif typefaces, also known as Didone or Neoclassical, have thin serifs and heavy vertical strokes, making them less suitable for large bodies of text. Modern serif typefaces are best used in headlines and other short lines of text.

Bodoni and Didot are two Modern serif typefaces that are right at home in a heading or subheading.

Slab serif typefaces also go by the name Egyptian. They are more rectangular and have fairly equal line weights throughout. They have thick blocky serifs with no tapering. Think of a slab serif as a hybrid typeface. If a serif and a sans serif had a little tryst that produced a child, the baby would be a slab serif.

Rockwell and ITC Lubalin are popular slab serifs. Both are perfect when you need to make a bold statement. They also look great when used with a lighter typeface. Try it!

Like serif typefaces, sans serif typefaces fall into categories, Humanist, Grotesque and Geometric being the most common. A well rounded typeface collection should include at least one face in each of these categories.

The stroke contrast of a Humanist sans serif typeface gives it a more organic, calligraphic look than other sans serif faces. If you want to use a sans serif typeface for body copy, a Humanist sans serif will do the job. Myriad Pro has been my go to sans serif typeface for quite some time.

The Grotesque style typeface was the first sans serif face designed. Prior to its arrival, you could choose between a serif and serif! A fairly new arrival, Helvetica (debuting in 1957), is its shining star. Everyone needs Helvetica, right? If you’re looking for something old school, Akzidenz-Grotesk (designed in 1896) is an excellent option.

Geometric typefaces are, well… geometric. They can be circular, rectangular, elliptical, or triangular. Depending on the subcategory they fall under, geometric typefaces can be used for everything from body copy to headlines.

Century Gothic is a good example of a typeface inspired by circles. In contrast, Eurostile is a popular square typeface. Need something with more of an oval look? Try Copperplate Gothic. If circles, squares and ovals aren’t doing the trick, the triangular typeface Black Boton with its Pac-Man-esque "C" is an interesting typeface to consider.

Script typefaces come in two styles – formal and casual.

Formal script typefaces such as Snell Roundhand and Edwardian Script are most often used in announcements and invitations.

Casual script typefaces such as Zar2 Script and Reklame Script have a more handwritten, irregular appearance. These typefaces are the perfect choice for a project that requires a little fun and personality.

Now we’ve come to the quirkiest category of all, display and decorative typefaces. These typefaces are meant to pack a punch and are best used sparingly. There’s a display/decorative typeface for any mood or tone you desire to achieve. This category is highly personal, but here a few typefaces I find myself using on a regular basis: Stencil, Rosewood, Magneto, and Coolector.

Explore this category to find typefaces that will work for you and the type of work you design.

The calligraphic, formal nature of blackletter typefaces brings to mind diplomas, religious texts, knights, and the Hogwarts School of Witchcraft and Wizardry.

Old English Text and Plain Black are respectable choices when a ceremonial or medieval feel is desired.

While these suggestions are a good start, I strongly encourage you to build a typeface library that suits you and the type of work you create. It truly is a personal thing. Your typeface library will evolve as time passes and trends come and go, as it should. Stay on top of it and keep it fresh!*

As sharing is caring, what font do you think all graphic designers should have? What is that one typeface you could not live without?

*A fresh typeface library does not include Comic Sans, Hobo or Papyrus.

View the original article here

Quick Tip: Create like iOS card counters with graphic styles

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request

With this tutorial I’ll show you how to create an iOS map indicator icon perfect for importing into your next map based app design. We’ll be using a single shape with multiple Appearance attributes to create an easy to use and edit Graphic Style in Adobe Illustrator.

Let’s start off by preparing our document. Open Illustrator and hit Command + N to create a New document. Enter 500 in the width box and 500 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before your click OK.

When working with resolution independent devices pixel perfection is a must and in order to create crisp shapes it would be easier to have Grid View set up and Pixel Snapping enabled so we’ll do that now. Let’s enable the Grid (View > Show Grid) and then Snap to Grid (View > Snap to Grid). After those are on, you’ll need a grid every 1px. Simply go to Illustrator > Preferences > Guides & Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. Now let’s set the unit of measurement to pixels from Illustrator > Preferences > Unit > General. Once completed your document should look like the images below.

Now that our document is set up let’s start by creating our circle shape used for the indicator icon. Since we’re creating for a retina display we’ll need to work at double the size of the object we want to create. On our retina device we will want the indicator to appear to be 16px by 16px so if we multiply that by 2 we arrive at 32px. With this in mind let’s select our Ellipse Tool (L) then click anywhere on the canvas. When the dialog box appears let’s type in 32px for both the width and the height. This will create the perfect circle needed for our indicator.

Tip: Press the letter “D” on your keyboard to reset your Fill and Stroke color to their default settings.

With our shape drawn we can get to the fun stuff. Open the Appearance panel (if it isn’t already go to Window > Appearance) and let’s begin creating our icon.

There are a quite a few Appearance attributes for this shape so to make it easier to follow we’ll be working from the bottom up in the Appearance panel.

To begin, in the Appearance panel select the bottom Fill item and we’ll create an opaque to transparent radial gradient as outlined in the image below then adjust the Opacity to 50%. With that Fill item still selected we’ll also go click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. We will also need to Transform the Fill item so select the Add New Effect button again and navigate to Distort & Transform > Transform and enter the attributes as seen below. If you haven’t guessed yet, this will be the shadow for the indicator icon and what we’ve done is create a completely vector drop shadow that gives a slight halo to our main shape and is nudged down just enough to provide depth. It doesn’t look like much now but things will start to pull together soon.

Now, let’s create another Fill item above our gradient Fill item. By default this will add our black to transparent gradient but we’ll need to remove this gradient in lieu of a flat color Let’s go ahead and select a nice bright red color for this layer as outlined below. At this point it may seem strange to use such a vibrant red but it will all make sense in a moment. This bottom layer will act as both our base color as well as our secondary highlight once we move on to the next step.

Once again let’s create another Fill item. This will default to the flat red color we chose earlier but we want a nice radial gradient for this item so select the Gradient panel and input the attributes outlined below. A nice purple to white combo set to Multiply and the Opacity dropped to 50% will add a nice full bodied rounded 3D shape to the icon. To push the 3D effect even further let’s Zoom (Z) in to our icon until we see the individual pixel squares on our art board. With that gradient item still selected choose your Gradient Tool (G) from the Tool panel and this will show the gradient bar over the icon. We are going to Click and drag this bar up about 2.5 pixels using our art board as a guide making sure to keep the bar as centered as possible.

Now we’ll start to create our primary light source. Please remember we’re working from bottom to top so things may not make sense until we finish with the next few steps.

Keeping in mind we’re trying to create a bright shine on our icon it stands to reason that this shine will cast some diffusion lighting against our object so this is what we’re going to create now. Again we’re going to create a new Fill layer. Let’s adjust this gradient so it’s opaque to transparent as outlined below with an over all Opacity of 60%. Select the Gradient Tool (G) and using the white handle bar with the black center on the left side of the gradient marquee click and drag that handle towards the center of the circle so it’s almost half its original size then click the center gradient bar and drag it up and over to the left a bit. Keep an eye on this layer as you may want to come back to it later to line it up exactly with our main white highlight layer later on.

Now that we have some diffusion we’ll add a glow to the highlight itself. Create another Fill layer and fill it with a white to transparent gradient as outlined below. Please keep in mind that the gradient position will match the layer below so before you adjust this gradient please click the “None” swatch in the Swatches panel to clear out that fill then add then add the new opaque to transparent gradient so its position is reset. With the gradient in place we are going to want to Offset and Transform this Fill layer also. Click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. We will also need to Transform the Fill item so select the Add New Effect button again and navigate to Distort & Transform > Transform and enter the attributes as seen below.

With that glow out of the way let’s add our actual highlight. Click the Add New Fill button again and fill it with a flat white color Then select the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. We will also need to Transform the Fill item so select the Add New Effect button again and navigate to Distort & Transform > Transform and enter the attributes as seen below.

At this time you can go back to the red gradient diffusion layer we made a few steps back and adjust the center point of the gradient to be directly under the white highlight.

Now let’s adjust that black border that has been sitting there staring at us this whole time. We’ll set it to outside with a Stroke Weight of 2px and the color outlined below.

The indicator itself is now complete but let’s take it a step further and create the GPS radius ring as well. Click the Add New Fill button again and fill it with a red to transparent gradient as outlined below and drop the Opacity to 25%. Then select the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below.

For the last piece of the icon we’ll add the border around the GPS radius ring. Click the Add New Stroke button on the bottom of the Appearance panel and choose a 2px red Stroke Weight on the inside of the shape. Now let’s offset the path by clicking the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Path > Offset Path and enter the attributes outlined below. And then finally we’ll add an Outer Glow to this stroke. To do so click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Outer Glow

At this point you can Shift + Click on the two GPS radius ring items to select them both in the Appearance panel then drag them to the bottom of this list so that the actual indicator icon sits on top.

With the indicator out of the way we’ll now create the name pop up. Select the Rounded Rectangle tool and click on the page and enter the information outlined in the image below. Keep in mind that the width can be anything you desire so long as the name you choose later on fits but for the purposed of this tutorial we’ll use this set width.

We’ll also need to click once more with the Rounded Rectangle tool to create the arrow on the bottom. for this we’ll need it to be perfectly square and we’ll drop the radius as well as indicated below. When the shape made let’s rotate it 45 degrees. To do so, select the Selection Tool (V) then position your mouse near any corner of the square and while holding the Shift key on your keyboard drag the shape in any direction until it looks like a diamond as seen in the screenshot below.

Now we’ll align these objects to be centered with one another. With the Selection Tool (V) in hand shift click both objects so they are both selected at the same time. We’ll now navigate to the Align panel (Window > Align) and choose the second option under the Align Objects header called Horizontal Align Center. Then click the last option under that same header called Vertical Align Bottom.

With the Selection Tool (V) still enabled, click on the smaller diamond shape so it is the only object now selected. While holding Shift on the keyboard press the Down arrow on your keyboard once. Release shift then press the down arrow on your keyboard three more times to move the diamond into the perfect position.

Shift click the larger rounded shape so both objects are selected once again and navigate to the Pathfinder panel (Window > Pathfinder) then click the first option under the Shape Modes header titled Unite. Both objects should now be joined in to one.

With our pop up. shape now created we’ll work on styling it. With the shape selected navigate to the Appearance panel (Window > Appearance) and select the Stroke. We’ll be keeping this as basic black but let’s set it to be outside the shape with a Stroke Weight of 2px.

Next, select the Fill and we’ll fill this with a grayscale semi-transparent 90 degree gradient as outlined below.

Lastly we’ll add a drop shadow effect to this object. Click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Drop Shadow and enter the options outlined in the screenshot below.

Let’s give this object a nice highlight at the top. With the object selected we’ll Copy (Command + C) then Paste in Front (Command + F). Let’s quickly reset to the default style by pressing “D” on your keyboard. This will remove the effects we added previously and return the shape to basic white with a black stroke. For the purpose of this highlight we won’t need a stroke so navigate to your Tools panel and click on the stroke fill option near the bottom to select it. Then click the white square with the diagonal red line through it to remove the stroke completely. With the stroke gone let’s Copy it (Command + C) then Paste in Front (Command + F) again so we now have two plain white shapes one on top of the other. Then while the top most shape is selected and the Selection Tool (V) is enabled press the down arrow on your keyboard twice to nudge the object down. Once nudged, shift click the plain object behind it to select both at once. While both objects are selected navigate to the Pathfinder panel (Window > Pathfinder) and select the second option under the header “Shape Modes” titled “Minus Front”. You should now be left with a small sliver of the original shape at the very top. With this sliver selected let’s lower it’s Opacity to 25% in the Appearance panel (Window > Appearance).

Now we’ll create the text for this pop up. Select the Type Tool (T) from the Tools panel and then click on the art board and type out the name you wish. In the Tools panel click the Fill color and change it to white. Now navigate to the Character panel (Type > Type > Character) and adjust the size and the font type as outlined below.

With the text selected navigate to the Appearance panel (Window > Appearance) and click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Drop Shadow and enter the options outlined in the screenshot below. We can also use the Selection Tool (V) to drag the text to the desired location in the bubble shape. Because Smart Guides and Snap to Grid is enabled this should be easy to find.

With the text out of the way let’s create the arrow icon. Select the Rounded Rectangle tool and click on the art board then plug in these options.

Now select the Selection Tool (V) and click on the newly created rectangle. With the object selected we’ll Copy (Command + C) then Paste in Front (Command + F). Now let’s rotate this new object 90 degrees. Now we’ll align these objects to form a backwards L shape. With the Selection Tool (V) in hand shift click both objects so they are both selected at the same time. We’ll now navigate to the Align panel (Window > Align) and choose the third option under the Align Objects header called Horizontal Align Right. Then click the last option under that same header called Vertical Align Bottom.

With both objects still selected navigate to the Pathfinder panel (Window > Pathfinder) then click the first option under the Shape Modes header titled Unite. Both objects should now be joined in to one. With the Selection Tool (V) still selected let’s rotate the shape 45 degrees. To do so, select the Selection tool (V) then position your mouse near any corner of the square and while holding the Shift key on your keyboard drag a corner on the right of the bounding box up until it looks like an arrow pointing to the right.

With the arrow selected navigate to the Appearance panel (Window > Appearance) and click the Add New Effect button (it looks like the letters “fx”) on the bottom of the Appearance panel then select Stylize > Drop Shadow and enter the options outlined in the screenshot below. We can also use the Selection Tool (V) to drag the arrow shape to the desired location in the bubble shape.

With the pop up. section completed enable the Selection Tool (V) and drag out a selection over all the pop up. objects to select them all simultaneously. Now go to Object > Group (Command + G) in the menu panel to Group these objects together. We can then drag this group above the indicator icon and center it so it looks like the screenshot below. And with that in place, we’re done!

I hope I was able to show you how to use the Appearance panel to create complex effects without the need for extra layers. Feel free to play with different colors as you see fit. With so many resolution independent devices floating around now-a-days it’s really great to be able to use infinitely scalable objects that can be used and reused in your app designs.

View the original article here