The elements of web design are generally the same, but the way in which those elements are used is what makes them stand apart. Take a look at the various types of web design based on industry and discover new ways to implement some of their strategies into your own website.
During our monthly editions of Typography Tuesdays, we discuss the importance of typography and its impact on the design elements of your brand.
Sans serif fonts have helped usher in new ideas and design philosophies. Although they do not have the historic ties like serif fonts they are just as important in regards to where we are today in written communication. Sans serif fonts brought simplicity to the world of typography, with simple yet bold, eye-catching letterforms. So simple, in fact, that they were the only typefaces that could be used on early computer monitors. Although most sans serifs work best for display and headlines, there have been many developed over time that works well in large blocks of copy. Let’s take a look at the various types of sans serif fonts!
These are the early san serifs. Designed in the late 19th century and early 20th, most of the first san serifs only had capitals. These typefaces became the early building blocks for other type designers.
Characterization: Grotesque fonts have a moderate stroke contrast and proportions, usually with closed strokes on the c and s, non-cursive italics, and two-story lowercase g‘s. They were based off slab serif font families, just with the serifs removed.
Uses: Grotesque fonts are probably the second-best sans serif to be used at a small point size and for large amounts of body copy. Like most sans serifs, it also works well as a headline font.
Neo-grotesque fonts were a direct evolution of Grotesque san serifs that happened in the 1950s. They are much more refined than the Grotesque, losing some of the more awkward curves of the letterforms. In search of more legibility among sans serif fonts, designers tried to simplify the letterforms from early sans serif fonts. This group contains many of the most recognizable sans serif typefaces.
Characterization: They have limited stroke contrast with horizontal terminals. Neo-grotesque is a modernized grotesque style. They contain small apertures and the round shapes are circular.
Uses: They’re best used as headlines or as a display font. Can be used for body copy, but should be used sparingly.
Humanist sans serifs can’t be dated to an exact time or design movement. The first popular use of Humanist sans serifs can with the development of the London Underground transit system. The Johnston typeface was commissioned in 1916 to be used in the London Underground and was the first widely seen typeface with Humanist sans serif qualities.
Characterization: Humanist sans serifs share similarities to the calligraphic style font in the Humanist serifs. Their strokes have a higher contrast than other sans serifs. They contain larger apertures and cursive shapes for a, g, e, and sometimes f.
Uses: Probably the best sans serifs for small-sized text and large amounts of body copy. Like most sans serifs, they also work well for headings.
The first Geometric sans was released in the 1920s and the construction was based on the circle. Geometric sans serifs have a strong association with the Bauhaus design movement and the Bauhaus art school. Many of the early Geometric sans serif type designers were from Bauhaus.
Characterization: Geometric letterforms are created from geometric shapes. They are very structured with consistent strokes, simple and consistent letter shapes, and a large x-height. The o’s are optically circular and the lowercase a is very simplified.
Uses: Ideal use is for heading and small blocks of copy. Due to their rigid structure, they do not work well for large amounts of copy.
All in all, sans serif fonts are minimalistic yet striking, making them ideal for an eye-catching headline. It is best not to overuse sans serif fonts, as they can overwhelm the eye. As explained above, Humanist and Grotesque fonts are great for large amounts of copy, but try using the others as headlines first (while using serif fonts for body copy) until you get comfortable playing around with them in other forms.