Study of Font Styles and Best Uses for Each

The world of typography can be daunting, to say the least. For a few dollars, you can download 10,000+ fonts in just a few minutes and tens of thousands are available for free if you are willing to sort through them all. Not only are there a plethora of font famillies but there are also the font styles within each family. So, really, the question isn’t whether or not you can get a specific font – it’s where to begin!

Study of Font Styles and Best Uses for Each

Knowing what fonts should be used where and which ones should be avoided in certain situations will help narrow your search. Then you can further tone down your search by defining the look you are trying to create. Some font styles can add a dimension of femininity, others can add to a grunge design, and still others can create a more corporate look. Even so, the same font can be used to create different looks, which is why it can sometimes be best to keep an open mind when choosing a font to create a certain look.

This article provides you with a high-level overview of the different kinds of fonts and how they can be used properly. To begin with, we start with a discussion of font families and what this term means. Then we jump into categories such as serif and sans serif, and finally discuss different font family styles available and best uses for each. Of course, all discussions come with examples to give you a full understanding of the styles.

Font Families

Technically, a font family is made up of the styles available within a single font-face. For example, many fonts include styles like normal, bold, italic/oblique, and sometimes more. The various kinds types available are what make up the family.

One difference between free fonts and paid fonts are how extensive the family is. Many free fonts don’t even have a bold version of the font – what you see is what you get. Often paid versions of fonts include a complete family, not just the normal version of the font.

To be fair, another key difference between free and paid fonts is often quality. Head on over to Typography.com to get a small sampling of high-end font families. Often these can be purchased in limited families to save money. So if you see one that you just have to have for your business cards, check to see if a less inclusive version is available and viable for your design.

Here are a few examples of more complete families:

instantShift - Georgia font family

instantShift - Book Antiqua font family

instantShift - Calibri font family

instantShift - Caslon font family

Serif

One of the two most general categories in which fonts may fall are serif fonts. These fonts are anything that has extra details – sometimes referred to as flags or tags – on the letters. In the graphics below, a few of the flags and tags have been circled to demonstrate where these features of the fonts are on the letters:

instantShift - Times New Roman font
The most well-known serif font -Times New Roman.

instantShift - Angleterre font
Notice how both Times and the Angleterre fonts have the "flags" on their letters (Font Source).

These details improve readability within large blocks of text, such as in a book or with product descriptions that take up multiple lines. The flags and tags help the letters blend into each other and draws the eye of the reader from one letter to the next.

For example, notice how the flags and tags are on the left side of the letters, generally speaking. This is to help the reader’s eyes go from the end of one letter to the next letter more easily. The effect is similar to that of handwritten or cursive writing, but is easier on the eye to distinguish between the letters.

Just because serif fonts are best for large text blocks, though, does not mean that they cannot also be used elsewhere. The great aspect of serif fonts is that they are fairly versatile and can work well in titles and headings too. So, if your plan is to use the same font but maybe a different style within the family for your headings and body text, choose a serif font to keep readability high throughout your design.

Sans Serif

The other of the two general categories of fonts are sans serif fonts, which simply do not have the flags and tags between the letters (sans = without; therefore, sans serif is "without serifs"). Some fonts fall between the categories of serif and sans serif, but generally if you can see the extra details of the flags and tags, the font will be classified as a serif font. In the below graphics, we show you two different sans serif fonts and where to look to see why each is considered sans serif:

instantShift - Arial font
The most well-known sans serif font – Arial – does not contain flags or tags.

instantShift - Geo Sans font
Both of these sans serif fonts are clean and simple in their design (Font Source).

The fonts above are two common sans serif fonts that are in contrast to each other. Arial is a strong, bold font that is easy to read from a distance and Geo Sans Light is a light, simple font that gives designs a clean look.

In written works and web typography, sans serif fonts are generally used for titles and headings. Just as with serif fonts, however, context is king. The design or the length of text may often determine whether or not a serif or sans serif is better. Generally speaking, you are safe to use a sans serif if the text is between 1-3 lines long. More than that and a serif font will be easier for readers to follow.

As a comparison, see how the Times New Roman and Arial perform next to each other:

instantShift - Times New Roman and Arial font comparison

Red lines are used to show that the line height is identical for these two fonts, but the letters are spaced differently and have different individual heights. The Arial font takes up more space for the same amount of words and characters, even though the line heights are different.

Serif fonts will generally take up less space and be easier to read in large blocks. For this reason, serif fonts are used in books for paragraph text, while section headers and titles will have a sans serif font in use.

Decorative Fonts

Another common category of fonts is that of decorative fonts. This broad range of font families includes quite a few very creative typefaces, such as scripts, handwritten, and graffiti. Generally fonts can be grouped into the decorative category if they are not designed for the purpose of being an easy-to-read serif or sans serif font.

You typically use decorative fonts for titles or headlines in which you want to create a certain impression. Gory, scary, floral, youthful, western, are just a brief list of looks that can be derived from using decorative fonts.

This decorative font falls in the script sub-category (Font Source).

instantShift - Decorative Font - Zombiefied

This decorative font could be defined as a graffiti font style (Font Source).

instantShift - Decorative Font - Circus

Decorative fonts can be quite stylized to give designs a very unique look (Font Source).

Script Decorative Fonts

Script fonts are decorative fonts designed to look like they were handwritten, but generally should be easy to read, or at least easier to read than, say, calligraphic or graffiti. Font families within the script category have a carefree look to them but because of their higher degree of readability, they are often an excellent choice for titles or headlines.

The styles of script fonts vary wildly from simple, clean fonts to complex designs that defy an easy definition.

instantShift - Script Decorative Font - Ecolier
Ecolier is a simple script font designed to have an easy-to-read face (Font Source).

instantShift - Script Decorative Font - Aleia
The Aleia font is more complex, but definitely still a script/handwritten font (Font Source).

Calligraphic Decorative Fonts

If you are looking for extreme font designs that look like old English or calligraphy, this family is what you want. The capital letters are generally the most complex and include sweeping shapes and curls. The lower-case letters are typically cursive-like and connect with smooth lines.

These fonts are generally not designed to be readable so much as stylistic in nature. Depending upon your purpose for the overall use of the font, you must balance the ability of your readers to understand what you are trying to say with the emotional impression the calligraphic fonts create.

instantShift - Calligraphic Decorative Font - Baroque Script
Baroque Script is a very clean calligraphic font that is between a script and calligraphic family (Font Source).

instantShift - Calligraphic Decorative Font - Featherography
Featherography is an intense calligraphic font (Font Source).

instantShift - Calligraphic Decorative Font - Mutlu Ornamental
On the fancy side of font design is Mutlu Ornamental (Font Source).

instantShift - Calligraphic Decorative Font - Anabel
Anabel has lot of extras that make the font fun and still easy to read (Font Source).

Graffiti Decorative Fonts

Also in the decorative font families are the graffiti designs. These are built to look like someone spray painted the letters and can range from simple to intense in their display. As always, context is critical. If you need your title lettering to be bold and exciting but still somewhat readable, graffiti fonts can be a good fit. But not all the letters are easy to read, as these examples below demonstrate:

instantShift - Graffiti Decorative Font - Amsterdam
Amsterdam is a clean graffiti font (Font Source).

instantShift - Graffiti Decorative Font - Maelstrom
On the opposite end of the graffiti spectrum is Maelstrom – an intense, dramatic font that is hardly decipherable (Font Source).

Dingbats/Webdings Fonts

If you are looking for specific symbol sets or just some embellishments to add to a design, dingbats and webding fonts are an ideal solution. Because fonts can be scaled to extremely large sizes, these symbols come in very handy when designing, in comparison to using low resolution icons that become pixelated when scaled, for example.

Dingbats and webding fonts are not designed to display characters. They are a set of symbols that are usually themed for something like Christmas, animals, office symbols, and the like. The types and styles of dingbat and webding fonts are far beyond what this article could discuss. Pretty much every imagineable symbol set is available. Here is a very, very small selection just to give you an idea of what is available:

instantShift - Dingbats/Webdings Font - Seeing Stars
(Font Source)

instantShift - Dingbats/Webdings Font - Florals
(Font Source)

instantShift - Dingbats/Webdings Font - Talkies
(Font Source)

instantShift - Dingbats/Webdings Font - Monterocity
(Font Source)

Web Fonts

Another important category of fonts are web fonts. These are fonts that have been optimized for use on websites. If you own the rights to a font, you can optimize them on your own on sites like FontJazz.com, and then you can use the font on your website. But many fonts have been designed specifically for the purpose of being used on the web, which gives you plenty of options, especially if you do not want to mess with trying to write a non-web compatible font into your CSS code.

These fonts are usually optimized for web use by making a specific format available, hosting on a fast server, and reducing the size so the user can download it quickly. For this reason, if you want to give your website a facelift, web fonts are a great way to go.

One of the best sources of web fonts can be found an Google.com/webfonts where a huge selection of many different, optimized web fonts are available for free. A few from each category includes:

instantShift - Web Font Font - Average
Average is a serif web font (Font Source).

instantShift - Web Font Font - Karla
Karla is a sans serif web font (Font Source).

instantShift - Web Font Font - Shadows into Light Two
If you want a nice script font, Shadows into Light Two is nice (Font Source).

instantShift - Web Font Font - Ruge Boogie
Even handwritten web fonts are available with fonts like Ruge Boogie (Font Source).

While you can find that perfect font to make your design complete without knowing much about typography, a bit of knowledge can go a long way into saving you some time. You can narrow your search by category: serif vs. sans serif vs. decorative, etc. Each category then has its own styles to further fine tune your search. If you work with fonts quite often, you may even want to sign up with one of the popular font sites, such as DaFont.com or MyFonts.com or any other favorite font provider.

You can also search for fonts that other designers have endorsed by searching for posts on graphic design blogs that provide roundups of best fonts within a certain category or style. For instance, ILoveTypography is a great site that provides lots of information on typography and provides a monthly roundup of the best fonts available. TypographyServed provides a showcase of new fonts from professional designers. If you are really interested in learning about the history of typography, then Typefoundry is the website for you.

Hopefully the information above has given you enough basics for fonts and uses for each that you feel more confident in your font use, no matter the media. The extra resources should be able to take you to even further heights in your knowledge of typography if you so desire.

Like it? Share it.

7 Comments

  1. nice dude

  2. Thanks a lot, Its really ful of knowledge.

  3. Nice Tutorial. I learnt alot from this. Thumb Up!

  4. Thanks a lot for this tutorial ! It helps me a lot! I’m grateful!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>