Introduction
I Have been fascinated by design for many years now. Although I am a developer by profession, I find myself doing design tasks at a regular basis. Of course this is also due to the fact that I find it fun to design interfaces or other aspects that had relation to what I was programming. This led to much more than just a simple interest. In the past I have worked on designs for websites, logo’s, application interfaces, icons, banners, brochures and without a doubt more that I can’t even remember.
Most of my blog readers are also developers and I would like to share some of my knowledge I have learned in the past years. So although this post might be about design basics, it is written with my audience in mind.
Typefaces
Typefaces or frequently called font’s are one of the most basic elements you will find in most designs. Choosing the right typeface for the right task is not as easy as it might seem. If you are new to the world of design you might think different typefaces are just there for making text look pretty. However there is a whole lot to learn on just this subject. Typefaces are not just made to make text look nice but each typeface has specific characteristics that make them usable for different tasks. For this reason I would like to take the time to explain a bit more about the basics of typefaces.
Styles
The root of all typefaces are it’s style. By determining the style of a typeface you can categorize them and each style has it’s positive and negative qualities. I Will sum up the most important categories of typefaces. (Although there are many more and some might even overlap) Using these categories is the first step into finding the right typeface for your designs.
Serif
Serif typefaces are letters with small stubs on the ends of the characters. These small stubs are called serifs. A Serif can come in different shapes or size, they usually are there to improve readability or just to make the character look nice. Serif typefaces are mostly used in printed text like newspapers or books. A Good example of a serif typeface is the famous Times New Roman. Serif typefaces can be defined into two main sub categories: Old style and modern. Modern have a bigger transition of thin and thick strokes than old style typefaces. An other important sub category of serif is slab serif. These fonts have almost no to none transition from thick to thin strokes and are most likely to be used in headlines.
Serifs at the ends of characters
Serif typefaces are usually designed to be good readable typefaces. The serifs help identify the characters and guide the eye when reading the text. This makes serif typefaces ideal for large sections of text. (Slab serifs are an exception to this rule and should normally only be used for small portion of text like headlines) Their good readability is also the reason why most books and newspapers are printed with a serif typeface.
For serifs to display properly they need a high resolution. This is not a problem in the world of printing, but for a long time was a problem with computers. The low resolution created large limitations for usage of serifs, now a day’s with modern computers the resolution is high enough for good rendering of serif fonts. But they do have a stigma around them caused by the Times New Roman typeface. It was so commonly misused due to the fact that it was the default font for text processing software that using them can give an unprofessional look to designs. But don’t be afraid of this. You will find there are many different serif typefaces, just avoid Times New Roman if you are not writing a novel.
Times New Roman is an example of a popular serif typeface
Most people associate serif typefaces with printed material like books or newspapers. You can use association this when creating your designs, for example when creating a logo for a rss application using a serif typeface can create a strong link to printed newspapers.
Sans serif
Sans is the French word for without, thus sans serif literally means without serif. These “modern” typefaces removed the serifs and created a whole new look. An other distinct feature of sans serif typefaces is that they often have little to non thick to thin transition, this let to believe that sans serif typefaces are evolved from slab serif typefaces.
Sans serif typefaces were great for early computer displays, because they don’t have serifs and are easier to display on lower resolution displays. With modern resolutions this issue is for debate but still sans serif typefaces are the most common used typeface in computer applications and websites. Arial is an example of a popular sans serif typeface.
Because sans serif typefaces are often slabbed they tent to have a bold strong look, this makes them good for usage for important parts of text like headlines, titles etc. Sans serif typefaces have less readability than serif typefaces, this makes them less suited for large text. But in the world of computers some sans serif fonts were designed for their readability on lower resolution displays. Therefor the default typefaces like Arial might not be the best choose for a headline, and might be used for larger text like blogs or news articles.
Arial is an example of a popular sans serif typeface
Sans serif typefaces have a clean modern look to them and most are slabbed making them look strong and great for headlines or logo’s.
Script
Script typefaces are meant to look like handwriting. These typefaces come in all shapes and sizes and different a lot from each other.
Dancing Script is an example of a script typeface
Script typefaces do not have a good readability and are not suited for large portions of text. Because they look like handwriting they offer a very large range of emotions. This makes them great if you want to give a part of text a personal feel. Script typefaces are well suited for quotes, slogans or product logo’s that are associated with food for a hand made feel.
Ornamental
Decorative typefaces are called ornamental typefaces and are just made to look good. They often have very poor readability and have a very limited use. They do tent to express a lot of emotion and can be used for logo’s or advertisements. Be very careful using ornamental fonts, wrong chooses or over use can make your design look amateuristic.
Monoton is an example of an ornamental typeface
An other term for ornamental typefaces is display typefaces. I Don’t use that term to avoid confusion with typefaces that are optimized for computer displays.
Other
There are many more categories and subcategories of typefaces, I will not go into detail on all of them. But I do want to mention two other categories.
Monospaced is category of typefaces that have equal sized and spaces characters, you might know these typefaces from source code editors. Courier is an example of a popular monospaced typeface. Because old typewriters usually used monospaced letters people also have a strong association with the typefaces and old mechanical typewriters.
Courier New is an example of a popular monospaced typeface
Symbol typefaces are made out of glyphs. Operating systems usually come with a set of symbol typefaces for inserting icons.
Webdings is an example of a popular symbol typeface
Display or print typefaces
The art of printing words go’s back hundreds of years, the printing press was invented in 1450 by Johannes Gutenberg. Home computers with displays were just becoming available in the late 70’s. The technology of that time did not allow for high resolution displays, on the other hand the printing technology was very much evolved and allowed very high quality printing of text far superior to the digital counterpart.
To make words readable on computer displays new typefaces had to be created. The first computer typefaces were no more than just a few pixels, later on when the display resolution increased so did the number of typefaces created for computer monitors.
Modern printed documents are usually printed with a minimum of 300 DPI. DPI stands for dots per inch. Even a typical modern consumer printer can reach resolutions of 600 DPI. Computer display resolutions are measured in PPI (pixels per inch). Although computers in the 80’s did not have an exact specification so they were often marked as 96 or 72 PPI, this was roughly true in most cases. If you compare those numbers you can see what a big difference in resolution these two platforms have. And so font’s needed to be created specially for the purpose of displaying on computer monitors.
Now a day’s the modern computer displays have a much higher PPI value, especially smart phones and tablets have raised the bar. For example the Samsung Galaxy SIII has a resolution of 306 PPI! But those are state of the art technology displays and most modern computer displays are still running a much lower resolution. For this reason (and a few others) typefaces are still optimized for printing or computer displays.
Roboto is a typeface that is specially designed for user interfaces and high resolution screens
So if you decide to use a typeface consider what the purpose is. If you are designing a logo where the font is usually large you might get away with using a typeface designed for printing. If you are creating a website or application where the typeface is displayed in the range of 12pt, it’s advised to use typefaces that are optimized for computer displays.
Conclusion
This concludes this post on the basics of typefaces. If you like to continue learning more about typefaces I recommend you take a closer look at all the products around you. Look at the typefaces used and in what context. There are also a great number of royalty free typefaces available on the internet, you can experiment with them and try if you can identify the category of each font.
This post features some fonts from the Google Web Font project:
http://www.google.com/fonts/
