IXD102

IxD 102: Project 01 Type Specimen Screen (1)

noun.

The style and appearance of printed matter. The art or procedure of arranging type or processing data and printing from it. 

Before I began researching specifically into type specimen, I wanted to make sure I fully understood what typography was. I had a basic knowledge to it; that I knew what it looked like. By carrying out this research, I hope to become more confident in typography which will help me when designing my own type specimen.

Typography is the arranging of letters and text with the result of creating a copy that is legible, clear and visually pleasing to the reader. Although it can sometimes appear simple, involves multiple components including font style, appearance and structure. The aim of this is to make the reader feel a certain type of emotion and convey a specific message. 

 

“It is what brings the text to life”

 

A Quick History…

While typography is still very prominent in today’s society, it can be dated right back to the 11th century which included the innovation of movable type. It was considered a specialist craft before the emergence of the digital age, most commonly associated with books, magazines and public works. 

The first example recorded of typography being used was in the Gutenberg Bible, which was the earliest major book to be printed using movable metal type in Europe. It resulted in the kick start of a typography revolution and marked the start of the age of printed books in the west, being given the name the ‘Gutenberg Revolution’. The specific text used within the bible was Textura which can still be found in major desktop applications today. 

There was a creative explosion following the creation of the internet within the art of typography. This was a result of we designers suddenly having an abundance of font and type options, creating visual diversity. 

The example of the ‘Textura’ typeface highlights how if a type is executed well it can become timeless. 

 

So, why is it important?

Typography is a vital component when it comes to user interface design. Good typography will establish a strong visual hierarchy, graphic balance and set the overall tone of the product. It should be used to guide and inform the users while also optimising readability and accessibility which helps to ensure a successful user experience. The three main reasons for typography are:

  1. Builds brand recognition

If the typography designed is good, it will enhance the products personality as the users will subconsciously start to associate the typeface with the brand. To ensure a strong user following, a unique and consistent typography will help to build trust with the users and help the brand grow.

  1. Influences decision making

Typography will have a profound effect on how users digest and perceive the information that the text is conveying. Using much more eye-catching type will be much more persuasive than weaker fonts that don’t reinforce the message of the text.

  1. Holds attention of the reader

The difference between someone staying on your website or leaving can come simply down to if there is good typography. It is important that it looks visually stimulating and memorable.

While typography can seem an unimportant component or is ‘just text’ to the untrained eye, these three reasons highlight how type unconsciously can persuade the reader towards or away from a product or website.

 

The 7 elements of typography…

  1. Fonts & Typefaces

A typeface is a design style which is made up of characters varying in size and weight. A font is a graphical representation of the text character. While both can get confused and often thought to be the same thing, a typeface is a family of related fonts. The three basic kinds of typeface are serif, sans-serif and decorative. A designer should use no more than three fonts and keep decorative fonts to a minimum to ensure an uncluttered and streamlined interface.

2) Contrast

This is used to emphasise the most important ideas or messages that you want the reader to see. Contrast can be achieved with varying typefaces, colours, styles and sizes which are used to break up the page and create impact.

3) Consistency

To avoid a confusing and messy interface, consistency is vital. If conveying information is the aim, keeping to the same font style will help the readers understand what is it they are reading. Consistency is also important within hierarchy which plays around with font style and size, but there should still be one consistent font for each part.

4) White Space 

This is the space which surrounds the text or graphics, which is also known as ‘negative space’. Something that is overlooked and tends to go unnoticed by the user, it is essential in making the interface uncluttered and makes sure the text is readable.  It can even be used to draw the users attention to text and if used effectively creates an aesthetically pleasing interface. 

5) Alignment

Alignment is the process of unifying and composing text, graphics or images to make sure that there is equal space, size and distances between each element. A way that designers use to achieve this is by creating margins which ensure that the logo, header and body of text are all in line with each other. 

6) Colour

This is considered the most exciting element of typography as it allows designers to create really creative and bring their interface to the next level. It can also be quite hard to execute well as by nailing your font colour can make it stand out and portray the correct message, but if the designer gets it wrong it can lead to a messy interface where the text and site background colours clash. Value, hue and saturation are the three key components of colour and these must be balanced to make the text eye-catching and legible.

7) Hierarchy

This is a vital principle of typography. By establishing a hierarchy, the designer aims to create a clear difference between the text that should be noticed and read first and the rest of the text. In today’s society where the attention span has decreased significantly, designers are now creating typefaces that let the user consume the information quickly. Hierarchy can be created using size, colour, contrast and alignment. 

After completing this research, I am much more in tune with how complicated typography can become. But if all these elements are executed well, the end result will be a typeface that the user can understand and work with easily which will help me in my future projects.

 

 

Font Specific Research

Specimen books are the printed brochures or catalogs of type foundries and printers, offered to advertise the range and quality of type available.

 

Before creating my type specimen I decided to dive into each of the six fonts we could choose from. My aim was to see if there was any interesting facts about the fonts that I could incorporate into my own type specimen. Also, I needed to find a small amount of information that I could include on my specimen, like a brief history of where the font came from. The six font options I had to choose from were:

  • Futura
  • Gills Sans
  • Helvetica
  • Palatino
  • Times New Roman
  • Baskerville

 

Futura:

Futura is a very popular geometric style font which was designed in 1927 by Paul Renner but is still considered a very modern font. Due to its ‘futuristic’ style, it often conveys progress. It is widely used and can be seen in cars to shops and even to the moon. The Futura font was used on the plaque that was left on the moon in 1969. In the early 20th century, artists formed associations and came together for a number of movements which defended new ideals that broke purely aesthetic ground. This was called the Avante-Garde and the Futura font represented this. It was often marketed as ‘the font of our time’. It was based off the geometric Bauhaus design which was popular from 1919 to 1933, which resulted in clean, simple shapes. The font was commissioned as a typeface by the Bauer Type foundry for the New Frankfurt Project, which was an affordable housing project.

 

Gill Sans:

Gill Sans was designed by English artist and type designer Eric Gill and was issued by Monotype in 1928 to 1930. The roots of the font can be traced back to the typeface that Gill’s teacher, Edward Johnston, designed for the London Underground Railway Signage in 1918. Gill was successful in many other disciplines including wood engraving, sculpture and calligraphy. After its successful release, the London and North Eastern Railway (LNER) chose it for all its publicity materials including posters and timetables. As it gained popularity brands like British Railway and Penguin Books adopted it as their font.

 

Helvetica:

Helvetica is possibly one of the most widely used typeface worldwide since the 1950s. It can be found in logos, signage, posters and even clothing. It has received mixed reviews, some hatred and some fandom, which can be linked back to its neutral and impassive style. It can be found in the ‘Grotesque’ sans serif typeface. While its very popular, it is actually not original as it is based off the 1896 type called Akzidenz-Grotesk. It name was given in 1960 to make it easier to sell abroad after originally being named Neue Haas Grotesk. Helvetica means ‘Swiss’ in Latin which pays homage to its country of origin. It’s a very boring font, but it is meant to be, ‘why do I see Helvetica everywhere…but don’t notice it?’.

 

Palatino:

Palatino is an old-style typeface created by Hermann Zapf, which was released in 1949. It got its name from the 16th century Italian master of calligraphy Giambattista Palatino. To improve legibility, the font was designed with larger proportions. Its intended purpose was to be used for trade or ‘jobbing’ use like headings, advertisements and display printing. The font was created with a sold, wide structure and wide apertures that could appear on poor quality paper. The Palatino family consists of Aldus, Michelangelo, Sistina and Kompakt.

 

Times New Roman:

Times New Roman is an updated version of Times Old Roman. This update came after Stanley Morison, who was an influential British typographer, printing executive and historian, had written an article criticising The Times for being badly printed and typographically behind other brands. Morison supervised the new font while Victor Lardent drew it using the older typeface, Plantin, as the basis for the new design. The main change from the Old to New was that it would be larger but not take up any more space, slightly heavier and highly legible. It was first used in 1932 and then was offered for commercial use the following year. It is the ideal font for typographic hierarchy so then is commonly used in books, annual reports, brochures and newspapers.

 

Baskerville:

Baskerville was designed in 1757 and is what is considered a traditional typeface. It was based of a design which was first shown by John Baskerville of Birmingham in 1724. The font itself represents the deliberate move designers made away from old style typefaces from the previous decades. While the font has an elegant and distinctive look, it is designed successfully as it doesn’t distract the reader. Baskerville’s idea of perfection’s simplicity and subtly. The only flair added was the swash on the Q and in some of the uppercase letters in the Italic version. The main characteristics of the font are that there is high contrast between thick and thin strokes, sharpening serifs and a shift in the axis of the round letters to make them appear more vertical.

 

As I was researching each font, I highlighted facts I felt I could incorporate into my type specimen. After finding out about each individual font, I have decided that the font I am going to use is Futura. I feel it has the most interesting concepts within the information about it, like the plaque on the moon and the multiple companies who use it. I carried out further research into Futura to familiarise myself with it as much as possible.

 

 

Futura explored further…

Category: sans serif

Classification: geometric sans serif

 

 

History…

The appearance of Futura presents efficiency and forwardness. Renner wasn’t specifically associated with the Bauhaus, but he did share a lot of its idioms. At the time when Renner was designing the typeface, he broke away from the general method of creating a new font as a revival of a previous deign. He believed that any modern typeface had to express modern models. Breaking the mould again, he rejected the previous approach of most sans serif designs which were based on sign painting, condensed lettering and 19th century serif typefaces. Instead, Renner favoured geometric forms including near-perfect circles, triangles and squares to build his design with low contrast, near-even weighted strokes. Futura was extensively marketed by the media group Bauer under the German slogan ‘die Schrift unserer Zeit’ which translates to ‘the typeface of today and tomorrow’ in English. 

 

 

Usage…

Futura remains an important typeface family even today. It is being used on a daily basis for print and digital purposes as both headline and body font. Some of the most notable usage in advertisement and logos are IKEA, Volkswagen and Crayola. It was also the iconic typeface used by American artist Barbara Kruger. The white text set on a red background was Futura Bold Oblique. Anatoli Muzanov made a Cyrillic variant of Futura Medium for the 1980 Moscow Summer Olympics. 

 

 

Why is it so popular?

It is a versatile, high quality font, almost as popular as the world renowned Helvetica. Futura looks like efficiency itself due to its even weight and contrast and distinctively tall lowercase letters that rise above the capitals. It is clean, standardised, legible and stylish with any overt ‘style’, ideal for advertising and branding.

 

The Apollo 11 Mission…

Apollo 11 was the first manned mission to land on the Moon. The first steps were taken by Neil Armstrong and Buzz Aldrin on July 20, 1969. They  placed an American Flag and plaques at the landing site. Futura was the chosen font for the Lunar plaques. They were stainless steel commemorative plaques attached to the ladders used during the descent stage, which were left on the Moon. They were designed by Jack Kinzler, who was the head of technical services at NASA. The Apollo 11 inscription was; ‘Here men from the planet Earth first set foot upon the Moon July 1969 AD. We came in peace for all mankind’.

 

 

Development & Sketching

To give myself a starting point, I created a mood board of visual inspiration I could incorporate into my designs. This mainly included how Futura is linked to the Apollo 11 mission as I felt it was my strongest idea. 

Following my research into my chosen typeface of Futura, I picked key points that stood out to me as possible design opportunities. I jotted down very quick sketches for each and decided to focus my design on how the Futura font was used in the Apollo 11 commemorative plaques. I felt this was the best choice as I could come up with several possible designs to chose from. My next step was to generate more specific ideas within this which included the date, map of the moon and the American flag. I took a page for each idea and created more small sketches of thoughts.

Before moving onto the digital side of this project, I took my top ideas and drew them up larger to see how the design looked within the space. I found that some of them didn’t work as well when the space was increased so I won’t be digitising them. The larger size also let me see where would be the best place to put the title and text.

 

Project 01 Sketchbook

 

Moving on my laptop, I began building these designs on Figma. Firstly, I kept them in black and white and them moved onto adding colour. I created a range of different variations of each design to see what one worked the best. I found when doing this that some of them suited having very little to no colour while some designs were improved when I added colour.

 

   

 

I found this process really helpful in the development of my specimen screens. I found which designs worked and which didn’t. I feel I have they all stay in line with my chosen path of the Apollo 11 mission to the moon. While a lot of my screens are quite illustrative, my hope was that this would visually show the connection between the font and the moon.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>