Building A Vocabulary – Typography
Willi Kunz
Willi Kunz is one of the most influential names when it comes to typography, originally born in Switzerland, Kunz played a major role in the new wave of typography in design and was among the first designers and typesetters to introduce typography as a graphic element as opposed to just descriptive content. Kunz began his career in Switzerland as an apprentice designer before graduating and relocating to New York in 1970 where he initially worked as a graphic designer. He then started teaching at the Basel School of Design as a design lecturer and gradually became inspired by Wolfgang Weingart and his students research into typography.[1]
I have included some of Willi Kunz’ work below to illustrate his design style and his methods and approaches to designing with typography.
Wolfgang Weingart
Wolfgang Weingart was an influential graphic designer and typographer, born in 1941 in a small town near the Swiss border of Germany. Weingart was one of the pioneers of Swiss typography and the new wave movement in the 1900’s, he is often considered the god-farther of Swiss typography and the new wave design movement. Weingart was well-known for his work with typography and began studying applied graphic arts where he first discovered his interest for typography through typesetting, linocut and woodblock printing. After graduating his graphic arts courses he went on to become an apprentice typesetter working with metal plate printing.[2]
I have included some of Wolfgang Weingart’s work below to illustrate his typographic work and his approach to working with typography in design.
Jan Tschichold
Born in 1902, Jan Tschichold is a renowned German graphic designer known for his work as a calligrapher, typographer and book designer throughout the 1900’s. After his visit to the Bauhaus school, Tschichold became heavily influenced by the same idioms and principles that the Bauhaus represented and implemented the modernist design principles that the Bauhaus followed. He is one of the most influential people in typography and graphic design and played a major role in the development and expansion of visual and graphics arts in the 20th century. With his love and interest for typography he went on to design his own typeface, Sabon and is internationally recognised for his work in developing the brand identity of the Penguin Books that we all know and love.[3]
I have included some of Jan Tschichold’s work below to illustrate his work with typography and his approach to designing with type.
The Letter
Type Classification & Type Families
There are many different styles of typography that can help describe what the words are saying, these can range from serif and sans-serif typefaces to monospaced, display and calligraphy typefaces. Each typeface has its own characteristics and personality to help visualise the words on the screen or page. Going further into each typeface there are usually a variety of different styles and weights within a certain typeface, these are what we call typeface families. These will usually consist of varying weights like Regular, Thin, Bold and Extra Bold as well as other variations to the typeface like Italics for example.
Type classifications originated in the 19th century when printers and typesetters needed to explore typography to suit the need of a growing environment, with the birth of the industrial revolution having an impact on mass production and advertisement typefaces were created to fit the purpose of what they were being used for. As companies were advertising to more and more people throughout this period the need for bigger and bolder fonts sky-rocketed as the traditional serif typefaces and calligraphy influenced typefaces did not work in advertising. This led to the creation of larger typefaces like slab serifs which worked a lot better due to their larger and bolder characteristics. This is still carried through to modern design, an example of this is with the birth of technology and the rise of smartphones and handheld devices, it has never been easier for people to connect to the internet and start browsing the web. this created the need for new typefaces that would suit the purpose of being displayed on screen.[4]
Task – 1 Letter, 9 Ways
During our workshop we were tasked with creating nine different designs using just a single letterform, for my task I decided to use the letter ‘B’ as it is the first initial of my name. I wanted to explore the different shapes that could be achieved by using just the natural form of the letter. The typeface I chose for this was Monserrat as it is one of my favourite typefaces.
I have included an image of the work below to give you an idea of what I was trying to achieve with this task.
Task – 2 Letters
For this task we were asked to combine two letters in nine different variations reflecting on the work of Willi Kunz and Wolfgang Weingart. I wanted to explore the letters ‘i’ and ‘j’ as I thought it would be creative using the dot of these letterforms and add them to the stem of another letter form. This is something that is often seen in the works of Wolfgang Weingart and Willi Kunz.
I have included an image of the work below to illustrate my design approach to this task and my exploration of typography and its structure.
The Word
Kerning
Kerning refers to the adjustment of space between each individual letter in a word, letters within words will often need to be optically adjusted to allow for a better reading experience and ensure that the word is read correctly. Kerning is extremely important when it comes to typography, the human eye will read the white space around the letter rather than the letter itself. Bad kerning can result in displaying the words incorrectly and can make it harder for the viewer to read the text.
Tracking
Tracking also refers to the spacing between the letters within a word but where kerning is adjusting the space between individual letters, tracking adjusts the space between all the letters within the word and spacing them equally as a collective. Tracking is often used as a design method within typography to give a certain element its own characteristics. An example of this is in the Material Design system where the utilise tracking within the button text to allow more space between each letterform and separate it from other typographic elements within the design system, they have also utilised capital letters to enhance the separation between typographical elements.
The Paragraph
Measure & Alignment
Once the letterforms are put together to make up individual words, words can then be put together to create paragraphs and bodies of text in which we can read as a collective.
Alignment is extremely important when it comes to typography, especially with paragraphs and bodies of text. In western civilisations we have typically been programmed from an early age to read from left to right, this is why the majority of body copy is left aligned to help our eyes naturally flow with the content. If you had a body of content that was either centre aligned or right aligned people would find it difficult to read as their eyes have to jump to a different starting point on each new line, this ultimately makes it more difficult for the viewer to read. This varies from culture to culture as some countries and other far-east cultures are programmed to read from right to left. Justification is also an option when it comes to paragraph alignment, this mean that the words will have varying space between them to allow for each line to span the width of tis container. This is commonly used in print mediums like newspapers where you will see the space between each word varies but the paragraph is aligned on either side.
It is common practice within design to limit the length of a paragraph to around 60-80 characters per line to enhance the readability of the content, if a paragraph is displayed on a 1920 x 1080 screen resolution and the text is spanning the full width of the display the viewers eye may find it difficult to keep up with the content and the length of each line would be too long. Capping the size of each line with a paragraph can drastically help with reading experiences so the viewer is able to follow the text from line to line.
Leading
Paragraph leading is extremely important when it comes to paragraphs and bodies of text, some typefaces will need more leading and an increased line height to help them become more readable. An example of this is with typefaces that have more ornate characteristics and decorative elements will often need more leading as their decorative features will often overlap onto the next line of text making it extremely difficult for the viewer to read, on the other hand, a typeface that has more modern and simple features like sans-serif typefaces may benefit from tighter leading making it easier for the viewer to read.
The Page
Task – Creating Visual Hierarchy with Typography
In our workshop we were tasked with creating visual hierarchy through the use of typography, we were asked to created a basic poster displaying details to Ant Middleton’s new tour and drawing attention to the key elements through different sizes and weights of typography.
To gain a good understanding of how hierarchy is achieved I wanted to base my type scale on the golden ratio by starting with a base size of 16px and dividing it by 0.618 to achieve my next typographic scale value, doing this allowed me to achieve hierarchy throughout my content by placing more emphasis on certain elements through size.
I have included an image of my design below to illustrate how I achieved visual hierarchy with the content that was provided.
The Grid
Grids are one of the most popular tools that designers use in modern design, one of the most common grids that we see today in print is on newspapers, newspapers will often create a three column layout per page to allow them to organise the content. Another way grids are used is in web design where developers will often work with grids to help them position and layout content correctly, one of the most popular CSS frameworks, Bootstrap, uses a 12-column grid system in its framework to help designers create varying layouts and help them position content that is align and has vertical rhythm.
There are a vast number of different grid systems that are used throughout the design industry in both print and digital mediums, the most common forms of grids are column layouts that are often seen in things like newspapers and website. these can range from a single column grid layout to multi-column grid layouts depending on the content and how intricate the design layout is. One popular grid system that is used by numerous designers and companies such as Microsoft and Apple is the 8-pixel grid system which consists of 8-pixel squares to create a consistent and uniform layout of the content on the page. Another form of grid layouts is modular grid systems where the page or art-board is divided into equal segments relative to the size of the page, the golden canon grid is a popular grid based off a modular grid design and is extremely responsive when it comes to designing page layouts.[4]
References & Sources
- Willi Kunz : History of Graphic Design . 2021. Willi Kunz : History of Graphic Design. Available at: http://willikunz.com/reviews/history-of-graphic-design.
- Wikipedia. 2021. Wolfgang Weingart – Wikipedia. Available at: https://en.wikipedia.org/wiki/Wolfgang_Weingart.
- Wikipedia. 2021. Jan Tschichold – Wikipedia. Available at: https://en.wikipedia.org/wiki/Jan_Tschichold.
- Lupton, E., 2010. Thinking with Type, 2nd revised and expanded edition. Princeton Architectural Press.