This article by Dario Calonaci, author of Practical Responsive Typography teaches you about typography: it's fascinating mysteries, sensual shapes, and everything else you wanted to know about it; this article is about to reveal everything on the subject for you!Every letter, every curve, and every shape in the written form conveys feelings; so it's important to learn everything about it if you want to be a better designer.

You also need to know how readable your text is, therefore you have to set it up following some natural constraints our eyes and minds have built in, how white space influences your message, how every form should be taken into consideration in the writing of a textand this article will tell you exactly that!

Plus a little more!

You will also learn how to approach all of the above in today number one medium, the World Wide Web. Since 95 percent of the Web is made of typography, according toOliver Reichenstein, it's only logical that if you want to approach the Web you surely need to understand it better.

Through this article, you'll learn all the basics of typography and will be introduced to it core features, such as:

• Anatomy
• Line Height
• Families
• Kerning

(For more resources related to this topic, see here.)

Note that typography, the art of drawing with words, is really ancient, as much as 3200 years prior to the mythological appearance of Christ and the very first book on this matter is the splendid Manuale Tipograficofrom Giambattista Bodoni, which he self-published in 1818. Taking into consideration all the old data, and the new knowledge, everything started from back then and every rule that has been born in print is still valid today, even for the different medium that the Web is.

Typefaces classification

The most commonly used type classification is based on the technical style and as such it's the one we are going to analyze and use. They are as follows:

Serifs

Serifs are referred to as such because of the small details that extend from the ending shapes of the characters; the origin of the word itself is obscure, various explanations have been given but none has been accepted as resolute.

Their origin can be traced back to the Latin alphabetsof Roman times, probably because of the flares of the brush marks in corners, which were later chiseled in stone by the carvers.

They generally give better readability in print than on a screen, probably because of the better definition and evolution of the former in hundreds of years, while the latter technology is, on an evolutionary path, a newborn.

With the latest technologies and the high definition monitors that can rival the print definition, multiple scientific studies have been found inconclusive, showing that there is no discernible difference in readability between sans and serifs on the screen and as of today they are both used on the Web.

Within this general definition, there are multiples sub-families, as Old Style or Humanist.

Old Style or Humanist

The oldest ones, dating as far back as the mid 1400s are recognized for the diagonal guide on which the characters are built on; these are clearly visible for example on the e and o of Adobe Jenson.

Transitional Serifs

They are neither antique nor modern and they date back to the 1700s and are generally numerous.

They tend to abandon some of the diagonal stress, but not all of them, especially keeping the o. Georgia and Baskerville are some well-known examples.

Modern Serifs

Modern Serifs tend to rely on the contrast between thick and thin strokes, abandon diagonal for vertical stress, and on more straight serifs. They appeared in the late 1700s.

Bodoni and Didot are certainly the most famous typefaces in this family.

Slab Serifs

Slab Serifs have little to no contrast between strokes, thick serifs, and sometimes appear with fixed widths, the underlying base resembles one of the sansmore.

American Typewriter is the most famous typefaces in this familyas shown in the following image:

Sans Serifs

They are named sodue to the loss of the decorative serifs, in French "sans" stands for "without". Sans Serif isa more recent invention, since it was born in the late 18th century.

They are divided into the following four sub-families:

Grotesque Sans

It is the earliest of the bunch; its appearance is similar to the serif with contrasted strokesbut without serifsand with angled terminals

Franklin Gothic is one of the most famous typefaces in this family.

Neo-Grotesque Sans

It is plain looking with little to no contrast, small apertures, and horizontal terminals. They are one of the most common font styles ranging from Arial and Helvetica to Universe.

Humanist font

They have a friendly tone due to the calligraphic stylewith a mixture of different widths characters and, most of the times, contrasted strokes.

Gill Sans being the flag-carrier.

Geometric font

Based on the geometric and rigorous shapes, they are more modern and are used less for body copy. They have a general simplicity but readability of their charactersis difficult.

Futura is certainly the most famous geometric font.

Script typefaces

They are usually classified into two sub-familiesbased upon the handwriting, with cursive aspect and connected letterforms. They are as follows:

• Formal script
• Casual script
• Monospaced typefaces
• Display typefaces

Formal script

They are reminiscent of the handwritten letterforms common in the 17th and 18th centuries, sometimes they are also based on handwritings offamous people.

They are commonly used for elevated and highly elegant designs and are certainly unusable for long body copy.

Kunstler Script is a relatively recent formal script.

Casual script

This is less precise and tends to resemble a more modern and fast handwriting. They are as recent as the mid-twentieth century.

Mistral is certainly the most famous casual script.

Monospaced typefaces

Almost all the aforementioned families are proportional in their style, (each character takes up space that is proportional to its width). This sub-family addresses each character width as the same, with narrower ones, such as i,just gain white space around them, sometimesresulting in weird appearances. Hence,Due to their nature and their spacing, they aren’t advised as copy typefaces, since their mono spacing can bring unwanted visual imbalance to the text.

Courier is certainly the most known monospaced typeface.

Display typefaces

They are the broadest category and are aimed at small copy to draw attention and rarely follow rules, spreading from every one of the above families and expressing every mood.

Recently even Blackletters (the very first fonts designed with the very first, physical printing machines) are being named under this category.

For example, Danube and Val are just two of the multitude thatare out there:

Expressing different moods

In conjunction with the division of typography families, it's also really importantfor every project, both in print and web, to know what they express and why.

It takes years of experience to understand those characteristics and the methodto use them correctly; here we are just addressing a very basic distinction to help you start with.

Remember that in typography and type design, every curve conveys a different mood, so just be patient while studying and designing.

Serifs vs Sans

Serifs, through their decorations, their widths, and in and out of their every sub-family convey old and antique/traditional serious feelings, even when more modern ones are used; they certainly convey a more formal appearance.

On the other hand, sans serifare aimed at a more modern and up-to-date world, conveying technological advancement, rationality, usually but not always,and less of a human feeling. They're more mechanical and colder than a serif, unless the author voluntarily designed them to be more friendly than the standard ones..

Scripts vs scripts

As said, they are of two types, and as the name suggests, the division is straightforward.

Vladimir is elegant, refined, upper class looking, and expressesfeelings such as respect. Arizonia on the other hand is not completely informal but is still a schizophrenic mess of strokes and a conclusionless expression of feeling; I'm not sure whether I feel amused or offended for its exaggerated confidentiality.

Displaytypefaces

Since theyare different in aspect from each other and the fact that there is no general rule that surrounds and defines the Display family, they can express the whole range of emotions.They can go from apathy to depression, from a complete childish involvement and joy to some suited, scary seriousness business feeling (the latter definition is usually expression of some monospaced typefaces).

Like every other typeface, more specifically here, every change in weight and style brings in a new sentiment to the table: use it in bold and your content will be strong, fierce; change it to a lighter italic and it will look like its moving, ready to exit from the page.

As such, they take years to master and we advice not to use them on your first web work, unless you are completely sure of what you are doing.

Every font communicates differently, on a conscious as well as on a subconscious level; even within the same typeface,it all comes down to what we are accustomed to.

In the case of font color, what a script does and feel in the European culture can drastically change if the same is used for advertising in the Asian market.

Always do your research first.

Combining typefaces

Combining typefaces is a vital aspect of your projects but it's a tool that is hard to master.

Generally,it is said that you should use no more than two fonts in your design. It is a good rule; but let me explain it—or better—enlarge it.

While working with text for an informational text block, similar tothe one you are reading now, stick to it. You will express enough contrast and interest while stayingbalanced and the reader willnot get distracted. They will follow the flow and understand the hierarchy of what they are reading.

However, as a designer, while typesetting you're not always working on a pure text block: you could be working with words on a packaging or on the web.

However, if you know enough about typography and your eyes are well trained (usually after years of visual research and of designing with attention) you can break the rules. You get energy only when mixing contrasting fonts, so why not add a third one to bring in a better balance between the two?

As a rule, you can combine fonts when:

• They are not in the same classification. You mix fonts to add contrast and energy and to inject interest and readability in your document and this is why the clash between serif and sans has been proven timeless.Working with two serifs/sans together instead works only with extensive trial and error and you should choose two fonts that carry enough differences.
• You can usually combine different subfamilies, for example a slab serif with a modern one or a geometric sans with a grotesque.
• If your scope is readability, find the same structure.A similar height and similar width works easily when choosing two classifications; but if your scope is aesthetic for small portions of text, you can try completely different structures, such as a slab serif with a geometric sans. You willsee that sometimes it does the job!
• Go extreme!This requires more experience to balance it out, but if you're working with display or script typefaces, it's almost impossible to find something similar without being boring or unreadable. Try to mix them with more simplistic typefaces if the starting point has a lot of decorations; you won't regret the trial!

Typography properties

Now that you know the families, you need to know the general rules that will make your text and their usage flow like a springtime breeze.

Kerning

Is the adjusting of space between two characters to achieve a visually balanced word trough anda visually equal distribution of white space.

The word originates from the Latin wordcardo meaning Hinge.When letters were made of metal on wooden blocks, parts of them were built to hang off the base, thus giving space for the next character to sit closer.

Tracking

It is also as called letter-spacingand it is concerned with the entire word—not single characters or the whole text block—to change the density and texture in a text and to affect its readability.

The word originates from the metal tracks where the wooden blocks with the characters were moved horizontally.

Tracking request careful settings: too much white space and the words won't appear as single coherent blocks anymore –reduce the white space between the letters drastically and the letters themselves won't be readable.

As a rule, you want your lines of text to be made of 50 to 75 characters, including dots and spaces, to achieve better readability. Some will ask you to stop your typing as soon as approximately 39 characters are reached, but I tend to differ.

Ligatures

According to kerning, especially on serifs, two or three character can clash together. Ligatures are born to avoid this; they are stylistic characters that combine two or three letters into one letter:

• Standard ligatures are naturally and functionally the most common ones and are made between fi, fl, and other letters when placed next to an f. They should be used, as they tend to make the script more legible.
• Discretionary ligatures are not functional, they just serve a decorative purpose. They are commonly found and designed between Th and st;as mentioned above, you should use them at your discretion.

Leading

Leading is the space between the baselines of your text, while line-height adds to the notions and also to the height of ascenders and descenders.The name came to be because in the ancient times, stripes of lead were used to add white space between two lines of text.

There are many rules in typesetting (none of which came out as a perfect winner) and everything changes according to the typeface you're using.

Mechanical print tends to add 2 points to the current measure being used, while a basic rule for digital is to scale the line-spacing as much as 120 percent of your x-height, which is called single spacing.

As a rule of thumb, scale in between 120 and 180 percent and youare good to go (of course with the latter being used for typefaces with a major x-height). Just remember, the descenders should never touch the next line ascenders, otherwise the eye will perceive the text as crumpled and you will have difficulties to understand where one line ends and the other start.

Summary

The preceding text covers the basics of typography, which you should study and know in order to make the text in your assignment flow better.

Now, you have a greater understanding of typography: what it is; what it's made of; what are its characteristics; what the brain search for and process in a text; the lengths it will go to understand it; and the alignments, spacing, and other issues that revolve around this beautiful subject.

The most important rule to remember is that text is used to express something. It may be an informative reading, may be the expression of a feeling, such as a poem, or it can be something to make you feel something specifically.

Every text has a feeling, every text has an inner tone of voice that can be expressed visually through typography. Usually it’s the text itself that dictates its feeling – and help you decide which and how to express it.

All the preceding rules, properties, and knowledgeare means for you to express it and there's a large range of properties on the Web for you to use them. There is almost as much variety available in print with properties for leading, kerning, tracking, and typographical hierarchy all built in your browsers.

Resources for Article:

Further resources on this subject:

• Exploring Themes [article]
• A look into responsive design frameworks [article]
• Joomla! Template System [article]