Due to the huge opportunities, sometimes, the online medium is more competitive than the “material reality” and, here, existing is equivalent to being professional. Freelance web designers but also specialized companies noticed this fact very quickly, doing their best to have an interesting and eye-catching online presence at the same time.

Nowadays, portfolios, the best proofs that reveal the skills and the potential of someone, are very important and these may make the difference between a successful web services provider and a non-profitable one. A part of the overall success is actually represented by the attention paid to all the details; nothing should be neglected because all the clients are just a click distance away from another competitor.

Each letter has a small influence in judging the final aspect of a design and it is better for it to speak about you and not worsen the project. In fact, each designer knows very well that the small elements make the big difference. As are action to this true statement, the design world started to study the atoms of a project which are, of course, the types. Things evolved and here a new science was born, typography, the art and the techniques of arranging types. The typo lovers have gone further with their passion and they have complete studies about the impact of a font over a project and how to make better designs by choosing the best font solutions. Anyway, even if it apparently seems to be easy to neglect, things are not quite like that and this article comes to help you familiarize with what typography supposes and how to improve your projects.

First of all, on the Internet there are a lot of resources about typography, some of them for the experienced ones while other for amateurs, it is a matter of time and using Google to find the proper website. You can find some of those resource at the end of the post.

Before delving too deeper into the basics of typography, it is better to clarify some notions, which by the way, some of them aren’t fully understood by the specialists, so please read it carefully.

01. Typography is not like math

I started loving typography by studying the posters or other graphical products based on huge letters (did you notice that it is cool to insert huge typefaces into website layouts?). Along the time, I evolved and the Internet became my best teacher. Soon, I was totally confused by the many classifications of the fonts, how these are called, all these transforming my passion into complete hell. Please don’t make the same mistakes as I did: never compare typography with an exact science. Yes, there are a lot of classifications, a lot of opinions, and many specialists with various theories but a single final result: improving the quality of the projects. On the other hand, don’t worry, there is still a science and not a sum of confusions and misunderstanding.

02. Font and typeface isn’t the same thing!

Typeface is the design of the letters, the way of how these are represented in projects.

The font is the digital file containing the typeface. It is very easy to associate it with the software that “tells” to the computer how to display the letters.

03. The distinction between sans and serif fonts

The serif fonts are characterized by the small decorations at the end of the strokes while the sans fonts are missing these (sans in the French language means without, now I believe it is more easily to remember the difference). Serif fonts are more used in long passages because these are more readable than sans serif.

Basic Components of a Typeface

In order to have better results and to be able to explain the particularities of each typeface more clearly, specialists have divided the letters in other small components. Here are the basic components of a typeface, enjoy these and let me know if you agree with my scheme of dividing the letters.

1. Baseline

   If you are little bit familiar with math you will quickly understand the baseline, it is the 0x direction of a rectangular system. More specifically, it is the imaginary line where the letters are sitting. Please see the image to get a better idea about.

   

2. Meanline and x-height

   Meanline is the imaginary line determined by the top extremities of the lowercase letters as “a”, “c”,”e”. It is a very important auxiliary line but more used to describe the height of a lowercase font is the x-height. Developers are more familiarized with this proportion.

3. Cap height

   As the name itself sounds, cap height is also an imaginary line determined by the upper extremities of the capital letters.

4. Counter

   Counter is the enclosed space within a letter. Be careful, it may be or not fully enclosed.

5. Bowl

   The bowl is the curve which delimitates the negative space of a letter; the image speaks better than everything.

6. Ascender

   This is the name of the upward vertical part of a lowercase letter which is higher than the x-height.

7. Cross stroke

   This term describes the horizontal line of some lowercase letters as “f” and “t”.

8. Tittle

   This is the specialized term which describes nothing more than the dot above “i” or “j”.

9. Stem

   The stem is the vertical or diagonal stroke, it is the same concept both in capital and lowercase.

10. Descender

    The descender is the lower part of the lowercase letters that extends below baseline.

    

11. Leg (tail)

    The lower angled part of a letter is called leg (as you may see in “K”, “Q”, “R”) but another synonym used is tail.

12. Crossbar

    A crossbar is the stroke which assures the connection between two lines in a capital letter.

These terms are the most important but you must be aware that there are others which describe the letters in a more detailed manner. Because this article is only a small introduction into the giant domain called typography, I don’t mention the entire lingo here.

Classification of Fonts

Once the internal anatomy of a letter has been established, our universe is expanding and the next frontier (Star Track influence) is the font. There are a lot of fonts and to be more practical, typographers catalogued them into diverse families; nothing is irreplaceable or unchangeable and all the classifications aren’t strictly done. This classification is very useful for designers because it makes it easier to find the proper font.

01. Old Style

Old Style types of font: Garamond, Sabon, Isolde, Caslon, Plantin

Description: Old Style dates back from the second part of the 15th century and has the excellent readability as one important strong point. The letters and the serifs are nicely rounded and the contrast between thick and thin strokes is low. The fonts from this category are suffering the big influence of the Romans: try to look at the old roman writings and it is almost similar to the features of the letters described here. Don’t worry if someone replaces the “Old Style” name with Garalde; some consider them as describing the same category of fonts while others see Garalde as a font included in this category. One of the most important contributors to the development of the Old Style fonts was the printer Claude Garamond and it shouldn’t a surprise why so many fonts remind of him.

02. Modern

Modern types of font: Bodoni, Didot, Neva, Radar, Century

Description: Modern fonts are born because of the great influence of the metal engraving techniques in the 18th and 19th century. These fonts are characterized by a clear contrast between strokes, the serifs aren’t rounded but are joined vertically. The letters are giving the impression of a calm, stable design. The extreme size (both bigger and smaller) may not be very readable so pay attention of the way of using Modern fonts. The main developers of these fonts were the Didot family and the famous printer Giambattista Bodoni.

03. Transitional

Transitional types of fonts: Times New Roman, Baskerville

Description: Transitional fonts are the middle solution between Old Style and Modern categories, having common elements with both of them. The specificity of these fonts is the thin inner strokes while the main strokes are thick. Capt height has the same length as the ascenders.

04. Slab Serif

Slab Serif types of fonts: Rockwell, Memphis, Woodtypes

Description: It borrows some elements from the Transitional type but here there are also some clear differences. First, the serifs are stronger, more pronounced and squarer; these are perpendicular on rectangular ends. Slab Serifs fonts impresses by a more geometrical aspect neglecting the calligraphic one this is a reason of it being used more in printing (posters, flyers and so on).Another positive feature of the Slab Serif fonts is the capability of easily attracting the reader’s attention. Some people use the term “Egyptian” as equivalent of the Slab Serif family while other specialists divide this category into five branches: Egyptienne, Clarendone, Italienne, Latin and Tuscan.

05. Sans Serif

Sans Serif types of fonts: Helvetica, Arial, Gill Sans, Futura

Description: Sans Serif fonts were created in 19th century (1816) but weren’t considered as being pretty nice. The next century brings a total modification and Sans Serif becomes very usual (“less is more” movement). The main characteristic of this font is the lack of the serifs and this is a huge advantage because the letter are very readable both in small or big size. Sans Serif isn’t recommended for large areas of texts. Typically, there is a low contrast between vertical and horizontal strokes.

06. Handwritten

Handwritten types of fonts: V Hand, Write Hand, Rage Italic

Description: These fonts imitate the natural hand writing and their usage is strictly related to specific situations, by far it is not recommended to use them very often. Another important characteristic of handwritten fonts is the link between letters which are always connected by a small stroke (in fact similar to the way we are writing).It dates from 1550 and once the digital era begun the number of handwritten fonts is merely dropping. The main deficiency is the almost impossibility of using them in a large text but they may be used in headlines giving a romantic influence. Another problem is the readability, which isn’t a strong point.

07. Gothic Scripts (Black Letter, Old English)

Gothic Script types of fonts: Linotext, Gaudi Text, Cloister Black

Description: Gothic Script, Black Letter or Old English are synonyms and describe, very plastically and not fully professionally speaking, the more complicated handwritten fonts. These fonts are quite similar to these used for the writing of manuscripts during the Middle Age. Due to the complicated shapes, using capital letters might be an unforgettable error.

08. Decorative (novelty)

Decorative types of fonts: Jokerman, Stencil, Rosewood

Description: These fonts can’t be used very much in projects due to the low readability but they are good to have them in headings or titles. Decorative fonts are very numerous and it is hard to establish some common elements. Simply put, when a font isn’t catalogued as being part of the previous categories, then it is decorative.

09. Dingbats (ornamental fonts)

Description: These fonts are very easy to recognize because of the unique style. Using these is impossible to transmit a message but it is handy to represent a mood or feeling. The images speak for themselves.

How to Use Fonts and Letters in a Smart Manner

The size of the letters varies, some are very big, some smaller, according to the projects where they are used. A good web designer shouldn’t know the history of how the letters were measured but it’s a must to know how to measure them. Now it is time to understand why x-height is pretty important.

Unfortunately, a universal entity as the fundamental measure of a letter hasn’t been established yet and the various systems developed present advantages and disadvantages. I shouldn’t mention, it was logical, when we are referring to measuring a letter, it means that we are about to find out its length and height.

There are two categories of systems: the absolute and the relative. The absolute system relies on fixed values as millimeters, centimeters, inches and points. These are pretty simple to understand but most intriguing are the relative units of measurement: x-height, em, en and hyphen.

X-height refers to the size of the “x” letter and it is different, depending on the type of the font used. It is good to keep in mind that a font with an “x-height” bigger, it is easier to read than a font with a smaller unit.

Em is another very important relative unit and it is equal with the horizontal length of the upper case “M” letter. It is used for keeping a nice workflow of the paragraphs and words. En is nothing more than a half of the Em and the hyphen is equal with the third part of the em.

Apparently, typography must be related to the types and nothing more, but it is wrong idea. You should consider a word as a collection of letters and a paragraph as an amount of words which following the same train of thoughts is a bigger collection of letters. In this way, the design of a text is the privilege of the typography.

The distinction between a professional typographer and an amateur is that the first one pays attention to both letters and the white space between them while the last still neglects it. A letter is rarely used by itself; in the huge majority of the cases, it is part of a word so it is essential to have a nice arrangement between them. These considerations are the base of a new term, bounding box which is defined as the area surrounding a character, more precisely the surface equal of the length x height of the letter.

You should know that there are still fonts which have the same space for “m” or “w” but also “i” and along a text these discrepancies may have a negative impact on the overall perception of the reader. These fonts continue the tradition and they are called the monospaced fonts. Nowadays, most fonts take care of the differences between letters- the proportional spaced fonts.

Some experienced web designers “feel” that sometimes the space between letters or even words need to be modified even if the fonts are created by very good specialists. The term “kerning” describes the space adjustment between various characters while the term “tracking” refers to the adjustments between entire words.

You might have seen sometimes very long line length of texts, very tiring for the eye, the attention of the reader hardly remaining at full capacity. Be careful when you are building paragraphs, their length should be appropriate, not too long but also not too short. It isn’t a strict rule but the norm recommended by the specialists is about ten words per line or 60 characters, but it depends on each project, fonts used and its height etc.

Once again, the field of typography is enormous, but across the time anyone may become a smart user of fonts and types, a detailed study and a lot of patience being required. A non-conventional and lacking any scientifically value sign that you are passionate about typography is when you see a billboard, a website or even a newspaper and you won’t read it, just studying the fonts, the alignment and after finishing these you start reading these. I am ashamed by my excessive attention but I must mention that a few months ago, I entered in a restaurant in the city and it took me ten minutes to enjoy the menu and while the waiter came to order I told him, without paying attention because I was very disappointed that the font used isn’t a very good choice. Definitely, I was very rude but it was clear, I am very passionate about typography. My last advice: pay attention to your passions!

More Resources

Here, I have proposed some resources I use frequently and I am very content with the quality of the posts.

• Typographica.org
• Typography: SmashingMagazine
• Typography: A List Apart
• Typography: Web Typography
• 16 Best Typography Blogs
• Guide of Web Typography Tutorials, Tips and Best Practices
• Why Typography is the Soul of Web Design?

Image Credits

• English alphabet background