A brief overview of Typography and (sans)serif Typefaces
Ever since the first books were written and published centuries ago, the primary goal of typography was readability. It does not matter how pretty a page layout is or how unique a font selection is, if the typography makes the information on the page harder to read, the page has failed in its main duty : to transfer information to the reader in an efficient manner.
Typography encompasses the reality of effective web design and achieves success in creating web page identity and the enhancement of visual appearance. Typography is much more than the “art of text”, it’s the evolution of creativity within simple to intricate web designs. Just as a good architecture needs great foundation, similarly a good blog is a result of unique content supported by the use of eye-catching typography. Typography leaves you with the option of bringing together simple creativity with unique and effective communication in order to get your blog or sites main focus across.
What is Typography?
Typography is the design and use of typefaces as a means of communication. It is the art and technique of type design, modifying type glyphs, and arranging type. Typography has its roots in handwritten letterforms. It encompasses everything from calligraphy through digital type and type on Web pages. It also includes type designers who create new letterforms as well as designers and calligraphers who use the letters as part of their designs. The fundamentals of typography has been applied in various domains of design, culture and history. From its usage in covers to exhibit the calibre of a book to attracting great attention using movie titles, it has transformed the way we write and give depth to our designs.
Typography has long been a vital part of promotional material and advertising. Designers often use typography to set a theme and mood in an advertisement; for example using bold, large text to convey a particular message to the reader. Type is often used to draw attention to a particular advertisement, combined with efficient use of color, shapes and images. Today, typography in advertising often reflects a company’s brand. Fonts used in advertisements convey different messages to the reader; classical fonts are for a strong personality, while more modern fonts are for a cleaner, neutral look. Bold fonts are used for making statements and attracting attention.
Apart from being a key to branding and identity, typography is also utilized in websites to reflect the beauty of designs and to stand out among a plethora of other websites. An efficient use of the right typographic elements results in an exceptional display of typographic skills and enamors a great degree of visual appeal.
What is this article about?
There are many great articles on Typography on the web and this might seem a little bit redundant so I have tried myself to keep it short and precise without cluttering this article with a lot of unnecessary information. However, if you are interested in learning more about Typography, its usage and application, there are many awesome design blogs dedicated to Typography. Don’t forget to visit them here.
This article is mainly about the basics of typography and the classification of Serif and Sans Serif typefaces, so it must be quite easy for you comprehend. In my next article, I shall briefly discuss the elements of typography and showcase some great examples of typographic art in various areas of design.
Let us first delve into the basics of Typography. Developing your own skills in typography will take enormous amount of time and it is most definitely not very easy to understand and also be able to apply it accurately in your designs. Getting your typography right not only requires you to apply acute typography skills, but also a great degree of attention to detail. It is not just about choosing fonts or setting the right size for your type, its also about embracing the beauty of typographic influence in your designs and the ‘WOW’ factor that you should implant into your typography that makes your design stand out!
Elements of Typography
There are many websites and articles which teach you the basics of typography and I 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. There integrate together to from 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.
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 and these are not used much on the web pages as the ones mentioned above. 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. The elements you should be aware of are:
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.
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.
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.
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.
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.
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.
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.
38) Franchise (via @ZephyrNor)
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 :)
Sources and further resources:
An argument has been raging for decades within the scientific and typographic communities on what seems a very insignificant issue: Do serifs contribute to the legibility of typefaces, and by definition, are sans serif typefaces less legible? To date, no one has managed to provide a conclusive answer to this issue. Read more…..
The first half of 20th century is the end of the Modern era, the moment when revived typefaces were flooding the typography mainstream. But it was also the time when a completely different font design was booming, called Sans Serif. Read More….
In this article, I have showcased some really good quotes and a few memorable ones too. I must admit, some of them are not exactly quotes related to design but they are executed with great creativity that I almost fell in love with them and I had no choice but to feature them here.
Get your printable calendar templates from PsPrint.com