Typography in Web Design: Part 1 An introduction to typefaces
Typography (noun): the design of the writing in a piece of printing or on a computer screen.
Have you watched Family Fortunes? For those who haven’t, it is a British TV game show. Two teams – made up of family members – battle it out for prizes. Before the show, 100 members of the British public are asked open-ended questions such as “name things you are likely to find at the beach.” For the two teams, the aim of the game is to try and guess the most popular answers given.
We thought we would play that game. The survey question is: name the most important elements of web design. We reckon a majority of guesses would be along the pictorial. Think images, photos, colour palette, layout and animation. We’d put money on it that typography wouldn’t even feature on the board!
Typography is such an integral component of web design. It serves multiple purposes. There is the practical one; it needs to convey a message clearly. It is also a key player within branding. It can say a lot about your brand’s personality and what your business stands for.
In this blog series, we want to give you the lowdown on typography within web design. We will be discussing how to: choose a typeface for your business; style text for the web; create visual hierarchy; and make your website readable.
To kick the series off, we will first give you an overview of all the different types of typeface out there. We will delve into their origin stories, characteristics and discuss what sort of businesses they do well to represent. So without further ado, let’s cut to the text!
The Basics
First things first, let's clear up a bit of terminology. These terms are interchangeably used across the internet but here is what they both mean:
A typeface is a set of characters and symbols (alphabet, numerals, punctuation and special characters) that share a common design. For example, Arial is a typeface.
A font is a particular set of characters and symbols within a typeface. For example, Arial Bold 14pt is a font.
Types of Typeface
A majority of typefaces can be categorised into one of four main groups: serif, sans serif, script and display. Let’s have a closer look at each one!
Serif Typefaces
What is a serif typeface?
Serif typefaces are the ones which have little decorative lines at the ends of letters. These ornamental flourishes are known as serifs, hence the name. Of all the categories, serif typefaces have been around the longest. Let’s give you a very rudimentary, whistle-stop tour of their history!
The history of the serif
Before computers, printing presses, paper and quill even existed, words were carved into rock. The earliest carvings of the Latin alphabet (essentially the same as the English alphabet but missing 3 characters) date back to Roman antiquity. These carvings had serifs.
Why? The calligrapher Edward Caitch, dedicated a lot of time and research into how the design of these letters came to be. His ideas are contested but it is thought that he has the most developed theory on the matter.
Caitch’s understanding is that before the Roman engravers took hammer and chisel to stone, they would in fact, map out the design with a flat brush called a spatula. The spatula would flare at the end of brushstrokes, leaving a decorative flourish. The engravers would faithfully carve out these markings. Thus, the serif was born and was the result of the brush and not the chisel.
What comes after rock? Paper! Or rather, papyrus, parchment and then paper! From the 6th century onwards, writers of the Western world turned their hands to feather quills and ink.The serif continued to make its presence known. Why? One unverified theory is that the serif is a result of the quill’s flexibility. When the writer applies more pressure, the quill’s tips separate and create a broader stroke. Therefore, more pressure was being applied at the beginning and ends of letters, leaving the serif mark. Again, not a definitive reason, but one that makes sense.
Before we move on to the next writing medium, let’s first touch on two notable calligraphy styles containing serifs. Skipping forward to the 8th century, it is Charlemagne’s reign. He commissioned a new standardised lettering style that was to be rolled out across the entire Holy Roman Empire. Enter the Carolingian miniscule. Uniform, easier to read and introducing spaces in between words, its purpose was to promote literacy for all classes. It became widely adopted across Europe.
Writing in the Carolingian miniscule was time-consuming. Literacy levels had improved and the demand for books had significantly grown. Some of the world’s oldest universities were being founded; Bologna, Oxford and Cambridge needed their libraries stocking! A more ornate calligraphy style emerged from Germany in the 12th century, that was a lot faster to write in. It was called Blackletter – also known as Gothic – and quickly grew in popularity.
Fast forward to the year 1436…the dawn of the printing press! Inventor Johannes Gutenberg had a vision of producing written works at scale. Gutenberg was German, thus in the early years of printing and moveable type, blackletter inspired typefaces were the printing standard, emulating the handwriting style of the time.
Over the next two centuries, the Italian Renaissance was in full swing. It was a cultural movement that sought to revive classical art, literature and philosophy. Key players in the movement were the Humanists. They felt that the handwritten blackletter scripts were too difficult to read. They wanted a handwriting style that wasmore user-friendly. They mistook the Carolingian manuscripts for original Roman ones and used them as inspiration for their own humanistic script.
Back to printing! Pioneers of the printing world felt that blackletter typefaces took up too much space on the page. Venetian printer Nicholas Jenson wanted to create “simpler letterforms… resulting in shorter books with faster setup times.” In 1470, he combined elements of both the Blackletter and Italian Humanist lettering styles to formulate the first Roman typeface.
Here in England, William Caslon is attributed with creating the first serif typeface in 1734. His Old Style typeface had “more contrast between strokes in each letterform” making them “more distinguishable from one another at a glance, improving readability.” It enjoyed instant popularity and was even the typeface of choice for the Declaration of Independence.
Monopolising on space and improving readability, both Jenson and Caslon’s typefaces formed the basis for many of the serif typefaces we know today. Fast forward through the years, like many other artforms, the serif typeface went through various phases: Old Style, Transitional, Neoclassical and Didone, Slab, Clarendon and Glyphic. You can read more about the nuances of each style here in this very informative piece by Allan Haley, Director of Words & Letters at Monotype Imaging.
However, to finish off the serif typeface’s journey throughout history, we end with its segue into the digital age! With the early computers, screen resolutions were only 72 dots per inch (dpi). As a result, serif typefaces wouldn’t render very clearly. Instead they looked pixelated and blurry, proving very difficult to read. However, technology has come a long way since. We now have HD, UHD, 4K and 8K screens. These advancements have massively enhanced the legibility of serif fonts on modern devices.
Characteristics of a serif typeface
Now, the purpose of that “brief” history lesson was to show you that serif typefaces have been around a while! Having been around for such a long time, the use of a serif typeface suggests a wealth of history and experience. They bring with them connotations of professionalism, tradition and authority. These characteristics tend to be associated with the fields of law, finance and journalism and so businesses operating in these areas would do well to use a serif typeface within their branding. A good example is The New York Times.
For multiple reasons, a lot of our recorded history mainly focuses on the wealthy and paints a picture of a decadent past. Therefore, serif fonts work well for luxury brands such as Rolex or Dior. Brands that have stood the test of time, transcending every twist and turn in the market, could also boast a serif typeface to symbolise their longevity. If a brand wants to evoke feelings that are synonymous with a specific time period, it is highly likely that the typography of that time reflects those themes through the design, making it a great choice for the modern day brand.
Examples of serif typefaces:
Baskerville
Garamond
Times New Roman
Sans-serif Typefaces
What is a sans serif typeface?
The preposition “sans” means without. Therefore, a sans serif typeface does not have the little decorative lines or serifs.
History of sans serif typefaces
Sans serif typefaces have actually been around a bit longer than one might expect. Their tale begins in the early 1800s. The French general and emperor, Napoleon Bonaparte, led a war campaign to Egypt. Being a fellow of Science – and to disguise his motive for war – he brought a horde of scientists with him on his trip. Although the campaign was a disaster, they returned with comprehensive documentation on Ancient Egypt, unlike anything anyone had seen before.
A wave of Egyptomania – which is “the enthusiasm for everything related to ancient Egypt” – hit Europe. It influenced jewellery, furniture and architectural design. Typography was no exception.
Created in 1816, William Caslon the IV’s typeface “Two Lines English Egyptian” also known as “Caslon Egyptian,” is widely documented as the first sans serif typeface. Some sources say that the geometric qualities and monumental size of ancient Egyptian architecture and hieroglyphics, inspired the new blocky lettering style. However, others say it was purely a marketing ploy. The typeface designs had nothing to do with ancient Egypt at all. Typographers would just add the word “Egyptian” to the typeface name, jumping on the craze and reaping the benefits.
The sans serif typeface did not gain traction immediately. It took 12 years for another printing foundry to release one. Vincent Figgins created the “sans serif” typeface, coining the term. In his book, “Letter Perfect: The Art of Modernist Typography,” David Rylan writes that Figgin’s typeface was “a cruder but much larger version” of Caslon Egyptian and that was enough to make the sans serif “popular as a display type.”
During the Victorian era, sans serif typefaces were popular choices for signage and advertising due to their bold, eye-catching qualities and legibility at a distance. However, it wasn’t until the turn of the century that sans serif typefaces really took off!
The dawn of modernity - let’s set the scene! In the years leading up to it, the industrial revolution had seen rapid advancements in technology and science, prompting many to move away from religion. The previous century had been dominated by Romanticism; a movement celebrating imagination, emotion, the ornate and the individual. This was followed by Nationalism, which has been recognised as a catalyst for war. Europe was recovering from the First World War, Russian Revolution and many repressive political structures.
Modernism was a cultural movement that rejected all that had come before. As this V&A article says, “at the core of Modernism lay the idea that the world had to be fundamentally rethought” and “a belief that the human condition could be healed by new approaches to art and design.” Composers began creating music without a key (atonalism) and architects started to design buildings with sleek, linear forms. Typography also transformed.
In his own words, "two men stand out as the most powerful influences on 20th-century typography: Stanley Morison…and Jan Tschichold." Jan Tschichold was a forerunner of modernist typography and wrote all of his ideas in a manifesto entitled "The New Typography” in 1928, which quickly became a go-to reference for professionals in the field.
In the book, he puts forth the case for the sole use of the sans serif typeface. “The new typography is oriented towards purpose” and “the purpose of any piece of typography is communication […]. The communication must appear in the briefest, simplest, most urgent form.”
In his eyes, sans serif typefaces, devoid of any unnecessary ornamentation (serifs), fulfilled this criteria. They were simple, functional, easy to read and less cluttered. However, later in life, he did a u-turn on his ideas. He penned an essay explaining why, which you can read here.
One of the underlying design principles of the modernist movement, as described by the Tate was an “emphasis on materials, techniques and processes.” A buzzword phrase of the time was a “truth to material.” There was the “belief that the form of a work of art should be inseparably related to the material in which it is made.”
Paul Renner – a German typeface designer and contemporary of Tschichold – states his case as to why the sans serif typeface was the appropriate output for a “mechanised era.” He writes, “the impression of our printing types is not thrown onto the paper from left to right like handwriting, rather it descends with an impression from above. The script of the future will have to be an honest expression of all these technical processes.” It was another argument that contributed to the sans serif’s popularity.
At last, we enter the digital age! As we mentioned above, the screen resolutions of early computers were only 72 dots per inch (dpi). Serifs would appear blurry, making reading difficult. Thus, from early on the sans serif typeface reigned supreme in the digital landscape.
Characteristics and uses of a sans serif typeface
Sans serif fonts tend to be associated with simplicity, minimalism and modernity. Understandably, with their history, sans serif typefaces tend to be used by the brands who are making waves and shaping the future landscape of their field. Think tech giants such as Apple and Google or sports titans such as Nike and Adidas, or those who put a traditional model on its head such as Netflix.
Sans serif typefaces are chameleons and can take on the characteristics of other typefaces. For example, if you pair a sans serif typeface with a serif typeface, it can start to look a bit more traditional and classy. Pair it with an ornate script and it instantly looks more formal and feminine.
Examples of sans serif typefaces:
Helvetica Neue
Open Sans
Tahoma
Script Typefaces
What is a script typeface?
Script typefaces draw inspiration from calligraphy and handwriting styles. They tend to be cursive (the letters are joined up) and look like they have been written with a pen, brush or marker.
History of script typefaces
In the early days of the printing press – and for a significant time therein – the idea was to keep your character set (letters, numbers etc) as small and as simple as possible. Recreating handwriting in print is counterintuitive to that philosophy.
“Written letters always vary, and sometimes they slope and join.” When they join, each character links to another in a unique way. You would need several versions of each character to achieve an authentic look. Whereas “type is marked by uniformity and each letter is independent of the others.”
These challenges did not deter the Parisian writing master Pierre Moreau. He was the first to attempt the creation of a moveable typeface that emulated handwriting as early as 1643. However, it wasn’t until much later that script typefaces truly gained momentum.
In the latter part of the 19th century, a few popular cultural and artistic movements sparked a renewed interest in calligraphy. Romanticism “emphasised the individual” and promoted “creative spirit” over the “strict adherence to formal rules and traditional procedures.” Headed up by William Morris, the Arts and Crafts movement took aversion to “the impersonal, mechanised direction of society.” Plus, a Gothic Revival sought inspiration from a medieval past and favoured “individuality of the craftsperson or artisan.” Calligraphy, being a highly expressive, individual artform, done by hand, ticked all three movements boxes!
The Victorian era also ushered in a new trend amongst European aristocracy. They went mad for monograms! Using them as a symbol of status, they applied them liberally to household goods, from table linens to stationary.
Whether this trend was intentional, to distinguish themselves from the burgeoning middle classes, we are unsure. Either way, the craze caught on throughout society. Even the lower classes would use block letter stamps to monogram items. Fun fact! These days, people like to collect Pokémon cards. For the Victorians, it was all about monograms – they were serious about catching them all!
Basically, there was an appetite for all that was personalised. Within the world of typography, you can not get more personalised than calligraphy. Printing technology advanced greatly during the industrial revolution and one particular invention, would facilitate a major breakthrough for script typefaces.
Lithography is a chemical process. Using greasy ink or a crayon, a typographer would write their design on a stone or metal plate. Water then gets applied. Water and oil do not mix, so the greasy parts repel the water. An oil-based ink then gets applied and only adheres to the greasy areas, whilst being repelled by the wet non-image areas. Paper then gets pressed to the stone, transferring the inked design, creating a print.
With lithography, the letterforms were not subject to any mechanical limitations, only the skill of the typographer’s hand. Tools such as a pen, brush, crayon or chalk, were used to create the designs. The script was literally created by hand and thus could be replicated authentically in print form.
The next significant milestone within script typeface history was the invention of photo-composition or phototypesetting. The first photocomposing machine was created in 1894, however the technology did not become commercially available until the 1950s.
Calligraphers would draw the letterforms by hand and photograph them. They would then project light through the negative film onto light-sensitive paper. As a result, a high-resolution image of the character was created on the paper. Through a process called contact printing or projection printing, the image is then transferred onto a light-sensitive printing plate. This plate is then used in a printing press to reproduce the image on paper, en masse!
The photo-composition process was a much quicker and way more cost-effective method than lithography, eliminating significant labour and material costs. In this article by Peter Bain, he explains that it wasn’t long before it “fully displaced a 500 year-old tradition of metal type, only to be superseded itself shortly thereafter.”
Fast forward to the computing age! Again, the transition into digital was not a smooth one for script typefaces. Early font formats like TrueType and PostScript had restrictions on the number of glyphs they could include. This limited the availability of ligatures and contextual alternates.
Ligatures are when two or more letters are combined into a single glyph. They “prevent text from being spaced too far apart or close together.” Contextual alternates are different versions of a letter that get used for different positions within a word. Letters like "a," "r" and “g” have notable alternates.
Both ligatures and contextual alternates are essential for creating natural-looking script typefaces. Designers often had to manually adjust the text to simulate natural handwriting, which was tedious and impractical for longer texts.
OpenType is a font format that was developed by Adobe and Microsoft in the mid-1990s.
It could support much wider character sets, including ligatures and contextual alternates. By accommodating these features, script typefaces could mimic the nuances of handwriting in a more authentic way.
Characteristics and uses of a script typeface
Script typefaces are not the greatest in terms of legibility. They are often reserved for shorter bursts of text or headline moments within web design, to create impact and make a statement. Emulating handwriting, script typefaces give that personal touch.
Handwriting in the past was limited to a quill. Typefaces based on the penmanship executed with a quill, are collectively known as formal script typefaces. Fun fact! A vast majority of formal scripts are based on the work of three 17th and 18th century calligraphers all named George: George Bickham, – Snell and – Shelley.
Elegant and highly decorative, formal script typefaces are often associated with brands providing a luxury, tailored service. Think champagne, hoteliers and wedding suppliers.
In the 20th century, there were a lot more options out there when it came to writing instruments. You had pencils, felt-tips, broad-edged –, steel –, ruling – and ball point pens. You even had spray cans and the emergence of the graffiti scene! Written quickly, with abandon and not necessarily joined up (cursive), these typefaces are collectively referred to as casual script typefaces.
Casual script typefaces became popular in advertising in Europe and North America in the 1970s. Some have a particular aesthetic which is synonymous with that time. Giving off a loose, retro vibe, they evoke a sense of nostalgia and cool, which is great for certain fashion brands.
However, casual scripts encompass a wide variety of modern handwriting styles. They are great for conveying a friendly, approachable and often playful tone, making them suitable for various brands that want to connect with their audience on a personal level. A great example is the Hello Fresh logo. Its handwritten typeface gives off a homely, approachable vibe, making potential customers feel like they are capable of creating these dishes too!
Examples of script typefaces:
Alex Brush
Pacifico
Lobster
Display Typefaces
What is a display typeface?
Display typefaces are also known as decorative typefaces. There is no distinct overriding characteristic other than them being jam-packed with personality and attention grabbing! They can be highly decorative versions of serif, sans serif or script typefaces and can take inspiration from a rigid stencil through to over the top calligraphy.
History of a display typeface
Advertising, as we know it, began to evolve after the creation of the printing press. It gathered momentum in the 17th and 18th centuries. Newspapers would contain advertisements, but they “were generally small and text-heavy.” However, at the end of the 18th century, a new printmaking process was invented that would open up a whole new world of advertising opportunities.
Lithography facilitated larger prints and also made printing in colour possible. Business owners could use larger, bolder and more condensed typefaces on their posters. These posters would grab the attention of passers by on the other side of the road, or stand out from a sea of competitors all doing the same.
The first group of display typefaces to hit the scene were the slab serifs. Like the sans serif, they were a product of the Egyptomania craze. Blocky and geometric in nature, with the addition of serifs, they too either took their inspiration from ancient Egyptian design or were given Egyptian names as a marketing gimmick.
Many categories of display typeface followed. In response to the rapidly expanding trade and commerce scene in Europe and the increased demand for advertising, type founder Robert Thorne designed a set of “improved printing types” specifically for jobs requiring “short lines of large text.” These printing types were known as fat faces. As they say in the name, they are very bold or swollen versions of serif typefaces.
During the gilded age in America, the demand for broadsides was high, but metal type – the actual pieces of metal that create the print – was heavy, expensive and prone to damage at larger sizes. Darius Wells created the wood type which could produce larger letters, en masse, for far cheaper. The wood type aesthetic is synonymous with western movies.
Art Nouveau was a reactive movement to modernism. Modernism was driven by technology, mass production and utility, whereas the art nouveau movement celebrated craftsmanship and decoration. Art nouveau typefaces are very ornamental and emulate calligraphy to give them that handmade feel. These typefaces were very popular up until the First World War. Afterwards, their whimsical nature was deemed inappropriate in the wake of such destruction.
The next notable design phase was Art Deco. Like Art Nouveau, the art deco movement celebrated decoration and explored similar themes of nature and exoticism. However, it combined them with the sharp geometries and luxurious, new materials associated with modernism. Art deco typefaces tend to be “streamlined,” have a “geometric design,” and “very thick strokes.”
There have been many more phases of display typefaces since. Some have reflected aspects of culture of a given time period such as the psychedelic and groovy fonts of the 60s and 70s. As consumer markets got more and more competitive, corporate identity typefaces were created to distinguish brands. There have also been novelty fonts that are associated with particular seasons, holidays, event-themes or genres.
Characteristics and uses of a display typeface
Display typefaces are not the best in terms of legibility. They were purposefully built to be large and stand out from the crowd. In order to do so, many have a high contrast and lots of intricate, unique details. Printed in a smaller size, these qualities are not so useful. The font can appear blurred, indistinct and illegible. Also, a bit like cloves or fennel, when these typefaces are used too much they become overwhelming!
Display typefaces tend to be reserved for larger and shorter snippets of text such as logos, headers, billboards, posters or book covers. Hence, the name “display typefaces.” They cannot be your brand’s sole typeface; they need to be paired with a sans serif or serif font for the majority of your written communications.
Differing greatly in personality, decorative or display fonts can be used by a multitude of businesses. An obvious example is within marketing and branding for books and films. For instance, the horror genre is rife with display fonts made up of scratches, dripping gunge and blood! Another example is the food and beverage industry. Bubblegum brand Hubba Bubba, uses a display font with a balloon-like quality, which somewhat resembles blown bubblegum!
Examples of decorative typefaces:
Abril Fatface
Mountains of Christmas
Silkscreen
Conclusion
There you go, a brief introduction to typefaces. If you didn’t already, you now know the difference between a typeface and a font. We have discussed the 4 main typefaces – serif, sans serif, script and display – what they are and what story they tell.
Stay tuned for part 2 of our “Typography in Website Design” series. Beyond aesthetics, we will be discussing some practical things to consider when choosing a typeface for your business’s website.
In the series
