Sunday, July 11, 2010

Elements of Typography and Fonts

There are many websites and articles which teach you the basics of typography and we recommend you to go through them if you are planning to get most out of your skills and knowledge.

Like any other concept, typography is made up of several elements. These integrate together to form a complete abstraction of the entire notion of typography in design.

These are the elements that comprise the concept of Typography:

1) The difference between a Typeface and a Font:

Typefaces are a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold belong to the Typeface Helvetica). Fonts, on the other hand are weights or stylse within that family (such as Helvetica Bold).

2) Typeface Classifications:

Typefaces come in different designs. Some of these differences are subtle, while others stand out. On a broader sense, typefaces are usually classified into two categories : Serif and Sans serif.

These two categories are not at all enough to support the deluge of typefaces that have been designed by many type designers.

The following image gives a overview of the most basic classification of typefaces.

different type of typefaces

Hence, from a type designer’s perpective, typefaces can be classified into 6 categories. These are sometimes called “font families“.

These are large groupings of typefaces based on generic classifications. They are: Serif, Sans-serif, Monospaced, Script, Display, Black letter and Dingbat.

There are other type of fonts too but these are not used as often on web pages. You can take a look at them over at Font Squirrel.

3) Typeface Anatomy:

It is not a necessity for every designer to know and understand the perfect anatomy of a Typeface but it is definitely advantageous to be informed.

Each typeface is made up of different elements that distinguish it from other typefaces. Web designers don’t generally need to know the specifics of typeface anatomy but the elements you should be aware of are:

anatomy of a typeface

If you are interested in knowing more about the anatomy of a Typeface, you can refer this excellent glossary from fontshop.

Serifs and Sans-Serifs

Typefaces can be divided into two main categories: Serif and Sans serif.

Serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. The printing industry refers to typeface without serifs as sans serif (from French sans, meaning without), or as grotesque (or, in German, grotesk).

Great variety exists among both serif and sans serif typefaces. Both groups contain faces designed for setting large amounts of body text, and others intended primarily as decorative.

The presence or absence of serif forms is only one of the many factors to consider when choosing a typeface.

In traditional printing, serif fonts are used for body text because they are considered easier to read than sans-serif fonts and thus are the primary choice for lengthy text printed in books, newspapers and magazines.

Sans-serif fonts are more often used in headlines, headings, and shorter pieces of text and subject matter requiring a more casual feel than the formal look of serifed types.

While in print, serif fonts are considered more readable, sans-serif is considered more legible on computer screens. Most web pages employ sans-serif type for this reason.

types of serif typefaces

Typefaces with serifs are often considered easier to read in long passages than those without. However, studies on this matter are ambiguous, suggesting that most of this effect is due to the greater familiarity of serif typefaces.

As a general rule, printed works such as newspapers and books almost always use serif typefaces, at least for the text body.

Web sites do not have to specify a font and can simply respect the browser settings of the user. But of those web sites that do specify a font, most use modern sans serif fonts, because it is commonly believed that, in contrast to the case for printed material, sans serif fonts are easier than serif fonts to read on the low-resolution computer screen(produces less aliasing effects)

Serif fonts can be broadly classified into one of four subgroups:


Old style, as its name suggests is the oldest style of serif typefaces known to modern man. It dates back to as early as 1465. Old Style is characterized by a diagonal stress, subtle differences between thick and thin lines, and excellent readability.

Old style typefaces are reminiscent of the humanist calligraphy from which their forms were derived. The letters are very open, wide, and round with pointed serifs and a pleasing contrast between heavy and light strokes.

Examples of old style typefaces include Garamond, Goudy Old Style, and Palatino.


Modern serif typefaces which are quite contrary to their name are not as modern as you think. They first emerged in the late 18th century and are characterized by extreme contrast between thick and thin lines.

Modern typefaces have a vertical stress, long and fine serifs, with minimal brackets. Serifs tend to be very thin and vertical lines are very heavy. Most modern fonts are less readable than transitional or old style serif typefaces.

Common examples include Bodoni, Didot, and Computer Modern.


Transitional serif typefaces first appeared in the mid-18th century. They are among the most common, including such widespread typefaces as Times New Roman and Baskerville.

They are in between modern and old style, hence the name “transitional.” Differences between thick and thin lines are more pronounced than they are in old style, but they are still less dramatic than they are in modern serif fonts.


Slab serif or Egyptian typefaces usually have little contrast between thick and thin lines. Serifs tend to be as thick as the vertical lines themselves and usually have no brackets.

Slab serif fonts have a bold, rectangular appearance and sometimes have fixed widths, meaning that all characters occupy the same amount of horizontal space (as in a typewriter).

They are sometimes described as sans-serif fonts with serifs because the underlying character shapes are often similar to sans-serif typefaces as they have less variation between thin and thick shapes on the character.

The origins of the first usage of Slab Serifs were in vintage advertisements dating back to the 17th century.

Examples of slab serif typefaces include Clarendon, Rockwell and Courier.

Sans serif fonts can be broadly classified into one of four subgroups:

Before the term “sans-serif” became standard in English typography, a number of other terms had been used. One of these outmoded terms for sans serif was gothic, which is still used in East Asian typography and sometimes seen in font names like Century Gothic.

Sans-serif fonts are sometimes, especially in older documents, used as a device for emphasis, due to their typically blacker type color and a distinct visual appeal.

sans  serif typeface


Grotesque is Latin for “hollow” or “without”. These were the early sans-serif designs. A few examples are Akzidenz Grotesk, and Franklin Gothic.


These are the most commonly used sans-serif fonts. Transitional Sans Serifs have been adopted by many corporate brands in their logos. They are relatively straight in appearance and have less line width variation than Humanist sans-serif typefaces. Examples include modern designs such as MS Sans Serif, Helvetica, Univers and Arial.


These are the most ‘calligraphic’ of the sans-serif typefaces, with some variation in line width and more legibility than other sans-serif fonts. A few examples include Calibri, Lucida Grande, Segoe UI, Myriad, Frutiger, Tahoma and Verdana.


As their name suggests, Geometric sans-serif typefaces are based on geometric shapes. Geometric sans-serif fonts have a very modern look and feel. Of these four categories, geometric fonts tend to be the least useful for body text. A few examples are Futura, ITC Avant Garde, and Century Gothic.

geometric sans serif typeface

Some great fonts to revamp your inventory:

It is essential for Designers to have a good understanding of typography and its selection, as the importance of typography in design cannot be neglected.

The right usage of typography can convert your normal design into brilliant and attractive works of art. Effective typography aims at achieving a lot of visual elements, look and feel of your designs.

We are always in the search for great fonts to beautify our typography designs. The choice of a unique and beautiful typeface which manages to fulfil the above mentioned aspects can be quite cumbersome sometimes.

Using the right typefaces not only gives a logo/brand a distinct feel but also supports the corporate identity and enriches the visual appearance. However, usually there are simply too many options in front of you, which is why you need time to find the one you are most comfortable with.

Although the choice usually depends on clients’ requirements, it is necessary to have some great ones to kick-start your work.

Thus, to give this article a great finish, I have selected a few of my favourite (sans)serif typefaces that I could find online. These are free to use so go ahead and download them.

Note : ‘Free’ means free to use and distribute but the complete ownership of the fonts remain solely with the designer. So make sure you read the license agreements carefully before using them and distributing them as they are subject to change.

1) Museo Sans

2) Bebas

3) Anivers

4) Diavlo

5) Calluna

6) Museo

7) Delicious

8 ) Otari

9) Fertigo Pro

10) Fontin

11) Fontin Sans

12) Museo Slab

13) Tallys

14) Nadia Serif

15) Steinem

16) Qlassik

17) Engel

18) Chunk Five

19) Basic

20) Apple Garamond

21) St. Marie

22) Deibi

23) Zag Typeface

24) Dekar

25) Existence

26) CODE

27) OVAL

28) Steiner

29) Philosopher

30) Advent Pro

31) Fonce Sans

32) Apparatus SIL

33) League Gothic

34) Sorts Mill Goudy

35) Raleway

36) Prociono

37) Goudy Bookletter

38) Franchise (via @ZephyrNor)

39) Flaminia

40) Junction

41) Nilland

42) Vegur

43) Bodonitown

44) Aller Sans

45) Hattori Hanzo

46) Surface

47) Tristan

48) Sansation

49) Cantarell

50) Merge

51) Camisado (via Greg Eckler)

Those were the best I could find. If you have links to some cool ones, let us know in the comment section. It’s always awesome to have great and free fonts

No comments:

Post a Comment