Guttenberg & Moveable Type
The Guttenberg Press
The Gutenberg Press was an invention created by German inventor and goldsmith, Johannes Gutenberg in the 14th century. His invention allowed the printing of thousands of pages per day as over 3000 pages were being printed each working day, this greatly reduced the cost of printing as it no longer needed to be done by hand which was extremely time consuming. Along with the invention of the Gutenberg Press, he created a device called the hand mould which allowed him to utilise metal engraved typography and place them together to create blocks of aligned text. These inventions combined sparked the Printing Revolution becoming a massive success throughout Europe in the 16th century and was the beginning of digital printers as we know them today.
With these inventions, Gutenberg created the first book ever printed. The Gutenberg Bible. Religion was a massive part in society back then, most people went to church every week to have the bible read to them by their pastor. The Gutenberg Bible changed the way people thought as it allowed the spread of knowledge through reading, people began to notice that they were being lied to about their religion by their pastors as they became more educated on their religion through reading the Gutenberg Bible.[13]
The History Of Typefaces
Famous Typefaces
Futura
Futura is a geometric sans-serif typefaces created by Paul Renner and developed by the Bauer Type Foundary. Paul Renner began his initial sketches for Futura in 1924 and the development of the typeface went right through to 1927 when it was officially released as a typeface. Originally designed for the New Frankfurt housing project in Germany, Futura has become one of the most widely adopted typefaces today. Heavily inspired by the Bauhaus design movement, sharing the same ideas of modernism and simplicity, Futura is renowned for its geometric feel, circular appearance and its tall ascender line, Futura was considered as the typeface of today and tomorrow. Futura is often recognised for its appearance in brand identity with companies like IKEA, Nike and Supreme utilising the typeface in the company logos and across their brand guidelines.[7]
Palatino
Palatino is an old style serif typeface that was designed by Hermann Zapf and released by the Stemple Foundry in 1949 as its own individual typeface. Originally used for the purpose of advertising and display printing, Palatino was heavily influenced by humanist typography from the Italian Renaissance. Although the typeface was initially intended to be displayed at larger sizes, its wide structure made it more legible when it was printed at smaller size, this allowed for the type to be extremely readable regardless of what size it was displayed at. Initially released by the Stemple Foundry, the typefaces license was transferred over to Linotype who then licensed a digital copy of the typeface to companies like Adobe and Apple to be featured on their products as a system typeface.[8]
Times New Roman
Times New Roman is possibly one of the most well-known typefaces in the world, this is usually the first typography we see when we start typing words in Microsoft Word and is commonly pre-installed on most devices and applications like Adobe, Microsoft and Apple to name a few. The typeface was originally commissioned by The Times newspaper in London, Times New Roman is a serif typeface that was specifically designed for printing newspapers as it was highly legible at smaller display sizes. Newspapers put a lot of text and information into each paper so they needed something that would allow them to reduce the size of type but still maintain its legibility.[9]
Gill Sans
Designed by British artist Eric Gill in 1926, Gill Sans is a humanistic sans-serif typeface released by Monotype in 1928. Initially based off the typeface created by Eric Johnston and used in the London Underground railway systems, Underground Alphabet, Eric Gill set out to create a typeface that emulated both modernism and classical typography and aimed to compete with the new wave of geometric sans-serif typefaces that recently surfaced at the time like Futura. Gills Sans is one of the most widely used typefaces to date, renowned for being the featured typeface on almost all Penguin Books in addition to being the typeface used in the BBC logo and pre-installed on almost every Microsoft and Apple system and/or application. Gills Sans single handedly help define the humanistic sans-serif type classification.[10]
Helvetica
Originally named Neue Hass Grotesk, Helvetica is a Neo-grotesque sans-serif typefaces was created in 1957 by Max Miedinger and Eduard Hoffmann, and released by the Hass Type Foundry. Three years after Neue Has Grotesk was released, the typeface was licensed by Linotype and renamed it to what we all know as Helvetica. Helvetica is a Neo-grotesque sans-serif typeface created by Max Miedinger and Eduard Hoffmann, the typeface was influence by the boost in interest of previous Neo-grotesque typefaces from the late 18th century and aims to be a clear, neutral typeface that has no meaning. Helvetica is still widely used within the design industry in modern design from printing mediums like branding and logo design to digital mediums like websites and applications, the typeface is known for its high x-height, low stroke contrast and tight letter spacing.[11]
Baskerville
Baskerville is a transitional serif typeface created in the mid 17th century by John Baskerville, a British designer from Birmingham, England. Although Baskerville is available in digital form on most systems today, the typeface was originally used in the days of press printing where typefaces were cast into metal and then printed with ink. The typeface was heavily influenced by its old style serif ancestors but aimed to be sharper and more circular in shape, Baskerville is known for its high stroke contrast, sharp serifs and round appearance.[12]
Understanding Typography
Anatomy of Typography
Typography is something we all see on a day-to-day basis, whether that be on our smart phones or reading a newspaper or magazine, we see typography everywhere. Without typography our social media applications would just be images and colour on a screen and our newspapers would just be blank pages.
Typefaces are a collection of letterforms that share the same characteristics and style across each individual letter, these are usually a collection of uppercase letters, lowercase letters, numbers and symbols.
Typefaces are typically selected based on their visual appearance, style and legibility as each typeface holds its own individual characteristics they all portray a different message. For example, using an old style serif typeface for something like a modern tech start-up wouldn’t be the best choice where as using a sans-serif like Futura would be a better fit for the role.
Typefaces are clothes for words.
Although all typefaces are different in their own way they all share the same basic principles of typography like how tall should the capital letter be or will it be a serif or sans-serif typeface.While different typefaces have different stroke contrast and weight, they all have a stem, a baseline, a cap-height, an x-height and they all have different ascenders and descenders, these are the basic properties of any typeface.[6]
Baseline
The baseline is a line in which each individual letter sits, some letterforms will often extend beyond the bounds of the baseline to achieve visual balance within the letter.[6]
Cap Height
The cap height measured from the baseline to the top of the capital letter, its common for certain curved letterforms like an ‘s’ to extend beyond the cap height to achieve visual balance. Each typeface is different and has its own individual cap height as a part of their style and characteristics.[6]
X-Height
A typefaces x-height indicates the smallest value of each letter form and is measured by the height of the lowercase ‘x’ to the baseline. Each typeface has its own individual x-height depending on their style but typefaces with a larger x-height often improve legibility due to there being more visible white space around the letter.[6]
Ascender
The ascender is often measured from the baseline to the top of the stem on a lowercase ‘d’ or ‘f’, depending on the typeface it can either extend beyond the cap height or sit just in-line or below it. Futura is an example of its ascender line extending beyond the height of the capital letter.[6]
Descender
The descender is often measured from the top of the x-height to the bottom of the stem on a lowercase ‘p’ or ‘y’. Its common for typefaces to extend beyond the ascender line especially with the amount of typefaces and fonts we have access to today. As some letterforms extend beyond these bounds you would need to increase the line height to avoid an overlapping from the ascender on the next line.[6]
Stroke
The stroke of a letterform is typically referred to as the contrast between thick and thin lines throughout a typeface, for example Futura has a low stroke width contrast through the typeface where as something like an old style serif typeface would have a higher stroke contrast meaning that the width of the lines vary throughout the typeface.[3]
Stem
The stem is usually referred to as the vertical line going up or down the letterform, for example on the letter ‘t’ or ‘p’. Some typefaces have different stress on the vertical axis, either oblique or semi-oblique, we typically connect letter forms with oblique stress as more old style typefaces where as letterforms with a vertical stress axis are usually thought of a modern typefaces like Futura for example.[1]
Letter Spacing & Kerning
Letter spacing is commonly referred to as the space between each letterform in a typeface usually over larger copies of text like body text in websites and mobile applications or the small print body copy in newspapers and magazines. It is common practice for designers and typographers to keep letter spacing tight to allow for better readability and legibility of the text they are working with, unless of course it is for a visual effect.
Similar to letter spacing, kerning is the adjustment of the space between each letterform in a typeface. While we refer to letter spacing as targeting the space between every letter, kerning is primarily used to correct spacing of an individual letter. If letter spacing is like a broom then kerning would be referred to as the toothbrush as it will correct the final details within a piece of type. Designers often use kerning to achieve optical balance within the typeface as some letterforms like the ‘M’ and the ‘O’ will have different spaces on either side. A good way to spot kerning issues is to turn the type upside down to draw more attention to the negative space between each letter as opposed to being distracted by the word or letter itself.[2]
Line Height & Leading
Line height otherwise known as leading is the vertical spacing between each line of texts baseline, in the early days of printing lead strips were inserted below each line of text to increase the amount of space between them and improving readability and it introduced more white space in between each line. It is common practice for designers and typographers to increase the leading of type to allow more breathing room, especially on larger copies of text, a good starting point for achieving good leading values is to set your line height to 120% of the font size being used, this will give you a good starting point to achieving good leading throughout your typography.[2]
Line Length
Line length is often referred to as the length of each line of body text, this is usually measured by how many characters are in each line of body copy. The ideal line length for body text is between 40 and 60 characters, anything above or below this will make it harder for the viewer to read and make the type less legible and engaging.[6]
Text Alignment
Text alignment is another important factor when it comes to typography, this refers to the alignment of text either left, right or centred. A block of text will be a lot easier to read when it is left aligned as the viewer will have a vertical starting point for each line of text where as is the text is right aligned the starting position will change for each line but it will have the same vertical ending point, this will cause the viewers eye to jump from line to line and result in a negative reading experience. We have been taught from a young age that we read from left to right so changing this will disrupt what we have learned and practiced our whole lives.
Type Classifications
Serif
Some of the oldest forms of serif typefaces can be seen dating back to the 15th century when old style serif typefaces were first introduced, one of the most famous examples of old style typefaces is Garamond which is still used today in a digital format.
Following the introduction of serif typefaces, traditional serifs began making an appearance in the 1700’s. This style of serif typefaces were usually more vertically aligned and had a higher stroke contrast than the earlier old style serif typefaces.
In the 18th century, modern serif typefaces were introduced as another category of typography. Some of the most popular modern serif typefaces, like Didot and Bodoni, are still widely used in modern uses of typography and accessible on most digital systems and products like the Apple iMac or MacBook for example.
Slab serif typefaces were the final development of serif typography, this form of typography primarily used for the purposes of advertising due to its large, bold characteristics and its low stroke contrast. One of the most recognisable slab serif typefaces is Rockwell which is still in use today.[4]
Sans-Serif
Sans-serif typefaces began to make an appearance in the 20th century, unlike serif typefaces, sans-serifs were more geometric in shape and didn’t feature a tail on the end of each letterform.
One of the earliest forms of sans-serif typefaces were grotesque, commonly known as gothic typefaces, these were dubbed grotesque as they refused the idea of elegancy that the serif typefaces portrayed. One of the most famous examples of a grotesque sans-serif typeface is Franklin Gothic.
In the late 19th century, gothic typefaces began to evolve in to what we now know as Neo-Grotesque typefaces which were originally designed to enhance the legibility of the letterforms. One of the most commonly used Neo-Grotesque typefaces still used today is Arial, almost everyone who has access to a computer in their lifetime has definitely seen this typeface as it is often the first typeface used when a word processor, like Microsoft Word, is opened.
Following Neo-Grotesque’s idea of enhancing legibility these sans-serif typefaces began to be influence by geometric shapes, simplicity and modernism and birthed the creation of Geometric Sans-Serif and Humanistic typefaces.
Geometric Sans-Serif typefaces aimed to appear more modern and geometric renowned for its use of circles, especially in the ‘o’, one of the most popular Geometric San-Serif typefaces used today is Futura. Although their geometric characteristic can lack legibility at smaller display sizes they are still widely used today. Futura is one of the most widely used typefaces in logo design and branding today, this typeface can be seen in a number of well-known brands like Nike, Supreme and Louis Vuitton.
Humanistic San-Serif typefaces aimed to incorporate a more natural feel being influenced by early forms of typography like calligraphy and handwriting typefaces. These typefaces usually had a varied stroke width to emulate a more human-like feel to the typeface. Gill Sans is one of the most popular Humanistic San-Serif typefaces used today and can be seen in a number of famous brand logos like BBC.[4]
Script
Some of the earliest forms of script typefaces can be seen dating back to the 1400’s when Black Letter typefaces were first introduced, initially influenced by calligraphy and handwriting these typefaces were typically written by hand.[4] Black Lettering was one of the first printed type styles in history and were heavily influenced by monks and old scribe writing throughout history.[3] We still see the use of Black Letter typography today and is often associated with tattoos in modern society. Tattoo shops love to use Black Letter typography as well as tattoo artists using it in their designs and artwork. Script typefaces can also included calligraphy, casual script and handwriting typefaces. A personal favourite of mine is the typeface Asem Kandis.
Monospace
Monospace typefaces were born from the invention of the typewriter and are called monospaced as the are non-proportional and all the letters take up the same width as one another.[4] An example of a famous monospaced typeface is Courier which features a wide ‘i’ character to allow it to be the same width as the rest of the letterforms, the letter ‘W’ will have a much wider appearance that the letter ‘I’ so the designer increased the width of the ‘I’ and decreased the width of the larger characters like ‘W’ and ‘M’ so they’re all the same width.[2] Monospaced typefaces are not overly appealing to the eye and they often have poor legibility but they can serve a good purpose in design depending on what you are trying to portray. An example of this would be if you are an author or a programmer a monospaced typeface my support the idea that you write novels or are efficient in programming and coding languages.
Display
First introduced in the 19th century when the industrial revolution hit, display typefaces had to be bigger and bolder than ever in order to compete for attention as more people were flooding to the cities for work. With many companies advertising their products to the masses typefaces had to stand out and make an impact, this is something regular serif and sans-serif typefaces couldn’t do. Display typefaces vary in characteristics and style and are often used for titles and headings in today society, in the 19th century display typefaces were specifically designed for advertising on posters and billboards as there was a rise in demand for consumer goods.[1] Broadway is a famous display typeface that is often still used today.
Difference Between Fonts & Typefaces
People often get confused about the different meanings of a font and a typeface. A font is described as a set of letterforms that are all the same point size and the same weight or style, for example Futura Medium 16pt would be a font within the Futura typeface. These can be either bold, thin or in italics but it is usually referred to as a single set within a font family.[1] A typeface is described as a font family containing all weights and sizes of a font, this would include Futura Medium, Futura Bold, Futura Medium Italic and Futura Medium Condensed.[1]
In the early days of printing a font was sold to printers as a set of metal characters and symbols that were all the same size and weight. These usually contained more vowel letters than constant letters as they were more frequently used, for example the letter ‘E’ or ‘O’ is usually used more throughout typography than the letter ‘Q’ or ‘Z’. If a printer wanted a whole typeface or font family he or she would have to purchase them as individual sets of fonts to create the typeface’s collection.[2]
Typography Today
Web Typography
With the rise of technology and the introduction of the internet web typography is becoming widely adopted by everyone with a computer or handheld device today.
Whenever we open up our favourite social media applications like Facebook or Instagram we see typography, these are typefaces that are encoded into the application to present the content in a certain way.
Web fonts are more accessible than ever, allowing users to insert any style of typeface into their own creations either through design software like Adobe Illustrator and Affinity Designer or creating a website from HTML and CSS. There are literally thousands of different typefaces on the internet today, these can be found on website like Google Fonts, Adobe Fonts and Font Squirrel and allow the user to download or embed any typeface they choose to use in their own projects.
Web typography is most commonly used in web design either to suit the style of the brand and the need to express information in a clear manner. We often see web fonts included in HTML or CSS code which is retrieved from a server and them implemented into the websites mainframe, an example of this is through the use of a <link> tag in a HTML document the code will look something like this…
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
This retrieves the typeface, the specific weight and variation you have selected for your website and can be swapped with another typeface at the click of a button if you decided to use a better typeface.
Rather than limiting ourselves to a certain number of typefaces, web fonts make it more accessible for everyone to display their own personality and individuality, whether that be by using a serif typeface to portray seriousness and elegance or using a hand-written typeface to display something more design orientated.
References & Sources
- David Dabner, Sandra Stewart, Eric Zempol, Abbie Vickress. (2017). Graphic Design School. (6th Edition). Thames & Hudson Ltd.
- Drew de Soto. (2014). Know Your Onions: Graphic Design. Laurence King Publishing.
- Sarah Hyndman. (2016). Why Fonts Matter. Penguin Random House.
- Toptal Design Blog. 2021. Understanding the Nuances of Typeface Classification | Toptal. Available at: https://www.toptal.com/designers/typography/typeface-classification.
- 99designs. 2021. Typography design 101: a guide to rules and terms – 99designs. Available at: https://99designs.co.uk/blog/tips/typography-design/.
- Material Design. 2021. Material Design. Available at: https://material.io/design/typography/understanding-typography.html#readability.
- Wikipedia. 2021. Futura (typeface) – Wikipedia. Available at: https://en.wikipedia.org/wiki/Futura_(typeface).
- Wikipedia. 2021. Palatino – Wikipedia. Available at: https://en.wikipedia.org/wiki/Palatino.
- Wikipedia. 2021. Times New Roman – Wikipedia. Available at: https://en.wikipedia.org/wiki/Times_New_Roman.
- Wikipedia. 2021. Gill Sans – Wikipedia. Available at: https://en.wikipedia.org/wiki/Gill_Sans.
- Wikipedia. 2021. Helvetica – Wikipedia. Available at: https://en.wikipedia.org/wiki/Helvetica.
- Wikipedia. 2021. Baskerville – Wikipedia. Available at: https://en.wikipedia.org/wiki/Baskerville.
- Wikipedia. 2021. Printing press – Wikipedia. Available at: https://en.wikipedia.org/wiki/Printing_press.