Project 01 – Type Specimen for Screen

Benn CoxIXD102

Type Specimen for Screen

Research

To begin my IXD102 project Type Specimen Screen I needed to look into what a type specimen as I haven’t heard the term being used before. If I’m going to create a type specimen I need to know the foundation of what they’re used for.

What Type Specimens Are

Type specimens are a catalog of typefaces dating back to the 15th century[9] just after the innovation of moveable metal printing, they were originally used by printers to allow them to showcase different typefaces and how certain typefaces will be printed on different sizes and/or weights of paper. This also allowed printers to spot any kerning issues or problems with legibility.[10] Type specimens are starting to become more digital with design moving more towards the use of technology such as smartphones, wearable tech and tablets. People are starting to use technology more than print, an example of this is purchasing a book on Kindle or iBooks is more accessible and cheaper than ordering a physical copy of the book. with web fonts becoming more popular within the design industry, modern type specimens showcase certain fonts and how they will be displayed on screen.[8] A common type specimen seen today is one web font websites like Google Fonts, they will often display every letter and symbol in that typeface in addition to any extra symbols or special characters. Another famous example of it being used in modern type specimens is through the use of a pangram which is a short phrase that consists of every letter within the alphabet. This will often be displayed as The quick brown fox jumps over a lazy dog on websites like Google Fonts.[11]

The quick brown fox jumps over a lazy dog.

About The Project

After we were given the brief for our IXD102 Project 01, I needed to decide on a typeface to use for my type specimen design. We were given the option to choose from one of the following typefaces:

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

After thinking about the project and how I could approach it, I noticed that some of the options where some famous typefaces used in logo design like BBC, Halifax and Louis Vuitton. This gave me the idea to look into what other logos where created using these typefaces and see if I could create something in a similar style.

About Futura

Published in 1927 by Paul Renner, Futura is a sans-serif typeface influenced by geometric shapes like circles, squares and triangles. Paul Renner was heavily inspired by the Bauhaus design period between 1919 and 1933, sharing the same morals of simplicity, modernism, optimism and industrialisation.[1] Renner believed that modern typefaces should represent modern models so he designed Futura to appear efficient and forward with low contrast strokes and a bold upfront appearance. Futura was initial developed for the New Frankfurt housing project in Frankfurt, Germany and was described as the typeface of its time.[2] Futura’s design features a tall ascender that rises above the cap line and a low x-height to increase sustainability and legibility at smaller display sizes.[3] Due to its geometric characteristics and bold display a lot of big name brands have used it in their logo design or marketing over the years, IKEA, Nike, Domino’s Pizza, Supreme, HP and Louis Vuitton[4], to name a few. In addition to being one of the most widely used typefaces in the world, Futura was also the typeface chosen for the plaque in the Apollo 11 mission to the moon in 1969. As of 1969, Futura is the most used typeface in the universe.[2]

Type Specimen Content

I wanted to start by generating content about Futura for my type specimen, after conducting research in Futura and the history behind the typeface I began to pick out key information and think about what extra content should be included in a type specimen. Type specimens were originally created and used by printers to display how certain typefaces and fonts will look on various sizes and weights of paper, looking at this from a more modern and digital direction, a type specimen for screen should be there to display how a certain typeface or font will look on devices and screen resolutions. After thinking about what a digital type specimen should aim to do I began to write out the content I will be using throughout my type specimen design, I have included this content below.

  • Futura
  • Paul Renner
  • 1927
  • Sans-Serif
  • Geometric
  • Bauhaus
  • Modernism
  • Optimism
  • Industrialisation
  • Simplicity
  • Typeface Styles
  • The Pharrell Williams of typefaces.
  • Futura was the typeface used on the plaque in the Apollo 11 mission to the moon in 1969.
  • AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
  • 1234567890
  • !@£$%^&*()-_=+{}[];:”‘|\~`,./<>?§±
  • Created in 1927 by Paul Renner, Futura is a geometric sans-serif typeface that is based off basic shapes like squares, triangles and circles. The typeface was heavily inspired by the Bauhaus design movement and aimed to demonstrate simplicity, modernism and optimism for the future.

Design Inspiration

Colour Palette Inspiration

After conducting further research into Futura I noticed that the creator, Paul Renner, shared the same idioms from the Bauhaus movement. I wanted to look into some design from the Bauhaus period to see if there were any colours that were popular throughout that design period, I also wanted to take into consideration the style of design and how the content was placed to give me an idea on how I could place the content for my typeface. When gathering my research on the Bauhaus movement, I noticed that a lot of designs shared the same red, yellow and blue colour scheme along with black and a white or light beige, cream colour. This inspired me to include this into my type specimen but include a modern twist by using a grid system to replicate modular design approach. I have included some of my favourite Bauhaus design inspiration below to give you an insight into how to got this colour inspiration.

Layout Inspiration

I wanted to create something that replicated modernism and simplicity as this was something Futura and the Bauhaus movement represented. After conducting my research into design layouts in multiple design mediums like type specimen poster, web layouts and magazine design I came across a modular style of design where content in limited to sections within a grid. I thought this style of design would represent simplicity and work well with the layout of my type specimen design. I decided to look into one of my favourite product designers and a good friend of mine, Nathan Bolger, as I know he uses a lot of modular design techniques throughout his work. I have included some of Nathan’s work below in addition to some of my favourite layout inspiration below.

By Nathan Bolger
By Nathan Bolger

Golden Canon Grid & Modular Design

The Golden Canon Grid

The golden canon grid system is something I came across while scrolling through Pinterest. This grid system is fully responsive and adaptable across all screen resolutions, consisting of horizontal, vertical and diagonal lines, then using the intersections within the layout to create extra cells within the grid.[5][7]

Golden Canon Grid

The Golden Canon grid was developed for multiple screen resolutions like desktop, tablet and mobile devices. The grid system draws inspiration from the canons of page construction and page layout principles which have been around since the printing of the Gutenberg Bible in 1454,[6] this was a much simplified version compared to the one modern one that is used today. You can download a free copy of the Golden Canon Grid below.

Canons of Page Construction

Download the Golden Canon Grid here: https://www.behance.net/gallery/54045377/Golden-Canon-Grid-(Freebie)

The Process

Initial Sketches & Idea Generation

Although I was conducting my research on Futura for my type specimen I wanted to explore different layout ideas without limiting myself to one typeface, this allowed me to explore different layouts that would and would not work for the typeface I had chosen. I then started sketching out some ideas that I had in mind for my type specimen, I wanted to experiment with different ideas and layouts for my design and the content I will be including. I have included some quick brainstorm ideas below to illustrate my ideas.

Sketch 01
Sketch 02
Sketch 03
Sketch 04
Sketch 05
Sketch 06
Sketch 07
Sketch 08

Final Sketches

I decided to expand on the idea of using negative space typography to create different shapes, I thought this idea touched on the idea of minimalism and simplicity that Futura and the Bauhaus supported. I started by creating 3 different layout idea with the content I had created and the negative space typography being the display piece. I wanted to create something using the golden canon grid system I had researched about to create a modular style layout to my content to further portray the idea of geometry. I have included these sketches below to illustrate my ideas.

Final Sketch 01
Final Sketch 02
Final Sketch 03

Final Designs

Once I had my idea generated and refined I moved on to creating digital versions of each idea, initially I wanted to use a grid layout to organise my content but as I went through the design process I noticed that the content was creating a grid for itself. I decided to follow the horizontal and vertical lines throughout the design to give me ideas on where to place my content and how it could be displayed in a creative manner. I chose to go with ‘Final Design 01 – Mockup’ as my final design choice as I thought it suited the need of a type specimen and was heavily relatable to the typeface Futura and what it was trying to achieve. As Futura was designed in light of modernism and simplicity I wanted to replicate that further through my design. I have included my 3 final design mockups below to illustrate how these type specimens would be displayed on screen.

Final 3 Type Specimen Designs
Final Design 01 – Mockup
Final Design 02 – Mockup
Final Design 03 – Mockup

Review & Feedback

Personally, I liked my initial typeface designs and felt that they displayed the typeface in a creative way as well as having a relationship to the history of the typeface and the inspirations behind Futura. After designing my typeface specimen I decided to get some feedback from my lecturer, Kyle. Upon review of my designs a common theme occurred with my typeface specimen being too busy with design elements, he felt like my designs could have a bit more breathing room between elements. With this feedback I decided to go back a revisit my design choices to see what alterations could be made to simplify the design further. I have included the design revisions below with an explanation of what changes I made to each design and why I made those changes.

Final Design 01 – Revision

With my third design variation, I decided to try and simplify the design as much as possible. With this design I decided to take out the blobs of colour I originally had in this design to allow for more white space within the image, I then moved up the character sets to align with the top of the creators name and the short paragraph of text about the typeface. Personally, I thought this took away from my original idea of creating geometric shapes to highlight the typeface’s geometric characteristics as well as minimising the inspiration taken from the Bauhaus design movement. In my opinion, the design is a lot cleaner but the idea lacks connection to the typeface and what it stands for.

Final Design Mockup 01 – Revised
Final Design 02 – Revision

With my second design, I decided to re-arrange some of the text that was originally in the design. Instead of having the information about Futura going along the horizontal line of the ‘F’ I wanted this to follow the vertical line to fill this space more and match with the text was is placed in the letter ‘U’. In my opinion, I feel like these subtle changes make the design look a lot more uniform and still plays on my original idea of using the negative space within the typography to create geometric shapes to emphasise the typeface’s characteristics as well as still maintaining the connection between Futura and the Bauhaus design movement.

Final Design Mockup 02 – Revised

 

Final Design Revisions

After taking some time away from my type specimen project I wanted to go back and revisit my design before I decide to submit my work for assessment, when I revisited my design I chose to go through all the feedback I received in order to give me an idea on how I could improve my final design. The feedback from my lecturer was that I should include the colour red to fit in with the colour palette I had chosen for my project but his personal thoughts was that my design was too busy, personally I disagree with my design being too busy as I think the design represents the geometric characteristics of the Futura typeface really well, I decided to get some feedback from my other class mates to see what they thought and the feedback was great, a common comment was the colour palette and how it represents the Bauhaus movement in which the Futura typeface shares very similar ideas to. This feedback was great for me as this was my intention when I first started the project, I wanted to display the similarities between Futura and The Bauhaus design movement throughout the early 1900’s.

Based on the feedback I decided to revisit one of my initial designs and refine it as my final submission, I chose this design because I personally think it displays the characteristics of the Futura typeface through the use of geometric shapes created through the negative space within the word ‘FUTURA’ in addition to displaying some basic information about the typeface and some of the letterforms and glyphs within the typeface.

I have included my final design submission below.

 

Final Type Specimen Design

References & Sources

  1. Wikipedia. 2021. Futura (typeface) – Wikipedia. Available at: https://en.wikipedia.org/wiki/Futura_(typeface).
  2. TypeRoom. 2021. Futura: the story of a font ahead of its time | TypeRoom. Available at: https://www.typeroom.eu/futura-the-story-of-a-font-ahead-of-its-time.
  3. Eye on Design. 2021. Happy 90th Birthday to Futura, the Modernist Typeface That is Literally Everywhere – Eye on Design. Available at: https://eyeondesign.aiga.org/happy-90th-birthday-to-futura-the-modernist-typeface-that-is-literally-everywhere/.
  4. HipFonts. 2021. 15 Companies That Use Futura in Their Logo | HipFonts. Available at: https://hipfonts.com/futura-typeface/.
  5. Theme-UI. 2021. Golden Canon Grid Freebie – Theme-UI. Available at: https://themeui.net/golden-canon-grid-freebie/.
  6. archive.bridgesmathart.org. 2021. No page title. Available at: https://archive.bridgesmathart.org/2012/bridges2012-417.pdf.
  7. Wikipedia. 2021. Canons of page construction – Wikipedia. Available at: https://en.wikipedia.org/wiki/Canons_of_page_construction.
  8. Pinterest. 2021. 120 Type Specimens ideas | specimen, type, typography. Available at: https://www.pinterest.co.uk/TheElishaDorsey/type-specimens/.
  9. Julia Pike ATLS 3030, Fundamentals of Digital Design, Spring 2015. 2021. Julia Pike ATLS 3030, Fundamentals of Digital Design, Spring 2015. Available at: https://creative.colorado.edu/~jupi6624/fodd/projects.html.
  10. Designer Daily: graphic and web design blog. 2021. 8 Inspiring Type Specimens. Available at: https://www.designer-daily.com/8-inspiring-type-specimens-1392.
  11. Examples of Pangrams. 2021. Examples of Pangrams. Available at: https://examples.yourdictionary.com/reference/examples/examples-of-pangrams.html.

Leave a Reply

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