Mini Brief 5 – Typographic Information Graphic

Initial Research:

After reading through Choosing fonts for the digital environment by Wendy Corbett I created the mind map below which is a summarised overview of some of the information I may include within my infographic that I will be creating. This includes the earlier history of font, the anatomy of font, use of font and how font has evolved and changed to move with our world.

Moodboard Sources: Dog Hierarchy, SF Display, Ren, Dead of Night, Don’t knock twice, Movie Fonts, Typography annotation, Print VS Digital, Hierarchy, Compatible, Font Feelings, Sans-serif

Using the blog above I noted some of the most important attributes of a font when it is used within a product/project:

  • Shape
    • Aesthetically pleasing
    • Using objects to form letters/words
    • Readability
  • Size
    • Hierarchy (pushing forward or back, determines what is read first)
  • Style
    • Feeling/genre
  • Communication
    • Does it fit a genre?
    • Connote feelings/moods
  • Classification
    • Serif
    • Non-serif
    • Script
    • Decorative
  • Colour
    • Brightness
    • Meaning behind colour?
      • Mood/Feel
    • Contrast
    • Hierarchy (brighter colour will push it forward, lighter colour will push it back)

Below are a few Infographics I found that I thought were interesting. I chose the first one ‘Timeline of 10 Famous Fonts‘ due to a concept I was thinking of which included looking at posters and seeing how the Titles fonts fit with the genre. I liked the second infographic ‘ What’s your Type(Face)‘ due to the creative way they annotated the anatomy of the font and their use of multiple layouts, using these different layouts throughout their infographic creates both an aesthetically pleasing and interesting final piece. I also chose to look at the ‘A Brief History of Type‘ Infographic as I enjoyed the simpler approach that they took when creating this, it achieved an aesthetically pleasing look and kept a consistent theme, though simple it still provides information and visuals to aid this information.


Typography Infographic Concepts:

Concept 1 Sources: Arrival, Sinister, Empire Logo

Concept 2 Sources: Sinister, Empire Logo, Dracula

Concept 3 Sources: Hand holding a phone, Tweet (I edited down), Digital VS Print, Hierarchy (My Image)

Concept 4 Sources: Circus Spiral, Circus Poster Inspo, Circus Vector, Diamond Shape


Concept 1 – Movie Poster Fonts:

  • Use House style of an existing Cinema company for example I used Empire in this concept. Using the House style all the way through will ensure a smart and aesthetically pleasing look.
  • Write a brief history of typography and font using the Grey and pink boxes marked ‘Date’.
  • Annotate different parts of typography, could do this using text from movie posters (on top of different shapes, in this case, the patterned circles).
  • Show difference between genre titles and techniques (Arrival is neater and has light beams in (very futuristic), Sinister has an older looking script with drag marks through (more ominous and old)).
  • Could also add parts about hierarchy as well as the need for digital and physical copies of posters and therefore fonts and titles.

Concept 2 – Movie Poster Fonts:

  • Use a house style that fits the genre chosen rather than a cinemas theme, I have chosen Horror as an example in my thumbnail for this concept so this may include classic/messy style fonts and darker colours such as black and red. Using the House style all the way through will ensure a smart and aesthetically pleasing look.
  • Write a brief history of typography and font using the Grey and Red boxes marked ‘Date’.
  • Annotate different parts of typography, could do this using text from movie posters instead (on top of different shapes, in this case, the patterned circles).
  • If I was using this red and black horror theme, I would need to add a black outline around any red text that appears on a grey background to allow it to stand out more.
  • I could also add a part about hierarchy as well as the need for digital and physical copies of posters and therefore fonts and titles which are compatible for both digital and physical print capabilities.
  • This particular concept would have a specific theme around showing the difference between movie titles and techniques used within these titles, for example, Dracula is bolder and easy to read whereas Sinister is more fitting to the name as it comes across as a more ominous style due to the drag marks through the text and simplicity.

Concept 3 – Digital Evolution of Font

  • The House Style for this concept appears clean and modern, the text would also have a clean and modern style. Using Social Media fonts, themes and house styles can further portray a modern and digital look as it is taking on looks that are already modern and clean. Using the House style all the way through will ensure a smart and aesthetically pleasing look.
  • Looking at the house style I could replace any Blue with Grey and any White with Green to add a more futuristic look, however, I preferred the blue and white look as I think it looks cleaner and more modern rather than futuristic, as I am not looking at the future of font but rather past to now.
  • I could expand the phone so that it is larger and fills the entire width of the screen/page, this would allow me to fit all of the history information I need to in a timeline without squishing it, I could use the date of the posts to write the date of history that is being written about on that ‘post’, this would create an interesting look that could be engaging. Using the post template idea, I could also have the first few posts which would be from early on in the history of font and typography as being unsaturated (no colour in the logo/post/verification tick) and then as it gets closer and closer to the present I could increase the saturation until it is fully saturated to show that time has progressed.
  • I could also add an annotated typography section similar to the ones featured in my concept 1 and 2 to show the different terms used when referring to typography and fonts.
  • Using clean shapes like the pattern circles would create a cleaner and more modern look compared to the paint smudges used on the cinema concepts (concepts 1/2).
  • I can also compare the hierarchy used in magazines and hierarchy that is used in digital pieces. This could include text within imagery or text on a page (what is read first, what is read second and so on).

Concept 4 (Concept 3 developed)

  • Similar to concept 3 this concept will also feature mainly blues, this will add a more futurisitc, teshnology and digital look which will help to establish the theme of this infographic, as we will not be using imagery within these infographics, creating a theme using colour anf font will be even more important.
  • Using shapes such as hexagons will further help to show the digital theme, as geometric designs have often been linked to digital themes.
  • Having a blue colour scheme without any other jarring colours will help to create a more aesthetically pleasing infographic that is hopefully eye-catching.

Concept 5 – History of Print in Marketing:

  • A possible House Style for concept 4 could incorporate the older style seen in Circus posters, this style could change and morph as you travel down the infographic and get closer to the present day history of font and become more modern looking. This house style could either stay bold with strong colours or could have a slight film over the top to create a duller and older look. Using the House style all the way through will ensure a smart and aesthetically pleasing look.
  • Using fun shapes and arrows to map out the history of the font (like a funhouse) could create an interesting-looking infographic that may be eye-catching and bold.
  • I could use letters from different eras of fonts to create the annotated font section with different terms.
  • I could also write about the sizing of letters (hierarchy), as it has stayed quite similar throughout the history of font, there tend to be three different sizes of text, this includes a header, subheader and body copy.

Developing a chosen concept: Concept 4

As this infographic is focusing on Typography I won’t be using any imagery, I developed my favourite idea from the concepts above further to ensure that I use typography to create a feeling and tone within my infographics that effectively conveys the message.

Font:

In this infographic a font such as Verdana may be good to use, this specific font is a sans-serif typeface and was created primarily for viewing on computer monitors. This font is also good for writing small font sizes however, it is suitable for use on low-resolution output devices, such as laser printers so may not be best when used on an infographic. It can also appear as cramped if a lot of text needs to be written in one space so may not be the best font to use when attempting to create an infographic that will contain a fair amount of text. (Source)

Sans-serif fonts are better than serif fonts when being used on digital work as serif fonts are usually only used for long paragraphs, using a bold text would also improve legibility and people find it easier to read text at a glance when it is bold. Helvetica, Arial, Verdana and Open Sans are good options to consider when creating a digital design. (Source)

Social Media Fonts: Using a font that is used on social media could help link my poster typographically to the digital history or at least to digitally specifically as it would be easier to recognise as being a part of the digital movement of font, across different devices Twitter uses Helvetica Neue (Mac), Arial (Windows), Segoe UI (Windows) and Roboto (Android) (Source). Facebook uses Tahoma (PC), Lucida Grande (Mac), Helvetica Neue (IOS) and Roboto (Android) (Source).

A font that particularly stands out to me is Gotham this font is a Sans-serif font which was originally commissioned by GQ magazine, the editor wanted a font that was both ‘sans-serif’ and had a ‘geometric structure’, they wanted to create a ‘masculine, new and fresh’ look for the magazine (Source). The Gotham font was first released in 2000 and was designed by Tobias Frere-Jones with Jesse Ragan.

Another font that stands out to me is Futura, I prefer this font over Gotham due to the lack of tails on letters such as ‘u’, this creates a much cleaner and sleeker look which I believe shows a more futuristic and digital aspect of the font. Futura is considered to be the foregather of geometric sans-serif fonts, using a font like this that has impacted many other fonts and continues to be used could show how fonts have adapted and changed to fit digital needs to the point where some of them were used for years on end (Source). Using Adobe Fonts Futura PT I was able to get the samples of the variations of the Futura font which I have placed below, using these I can find a suitable title font that will work with the Future font and compliment it.

Using a font for the title that is different to the rest of the infographic would allow me to have a more decorative and attractive font that could interest a potential reader and encourage them to read the infographic, however, I would also want this font to still link or be slightly similar to the other font that I will be using, this could mean using a font that has a similar shape, uses a similar X-height. Considering the font Futura (as this is my favourite so far) I looked at a few different fonts that could be used as titles for my infographic, as I was looking for a title font I wanted a title font that was a bit more spaced out so that it could take up more room at the top without being too tall, I chose these fonts as they seemed interesting and also shared a similar aesthetic as the Futura font. The fonts below were found using Word, I had four variations of the title in each font, 1 variation was the title in lower case with upper case first letters, the second variation was a bold version of the first variation, the third variation was the title in full caps (this is because I believe it can make a title more eye-catching and sometimes also easier to read when it is in full caps), the fourth variations was the title in full caps and also bold.

The Eras Bold ITC font would not be a good font to use unless it is being used on a large piece of work such as an infographic or poster, however, due to its lack of legibility as a smaller font, I probably would steer away from using it as there could be issues if anything needed to be resized or formated. The HGMaruGothicMPRO font would match well with the Futura font whilst still being a little different and more suitable as a title font due to its wider layout whilst still being quite compact.

Style:

House Style: When you think of digital and future I think of colours such as blues, bluey greens and white, often in films these are the colours used to represent futuristic designs, an example of this would be holograms which are usually a blue colour an example of this is on the right taken from Iron Man 2.

Because of this, I will be sticking to a blue and white theme, I will use a range of blues (light and dark) to highlight any important and key parts of the infographic and also to properly incorporate hierarchy and organise information in order of how it should be read (a title may be a darker blue than the text below if it is on a light background, or a lighter blue than the text below if the background is lighter). Below is a colour palette that I will be using, having a darker background will add an almost glowing futuristic, clean and modern look to my infographic helping it to link with the idea of digital font which has moved away from the physical font.

Colour Pallette
Abstract futuristic digital technology and science background (Source)

Shapes that are used in digital/futuristic designs are often geometric designs such as hexagons in a honeycomb sort of pattern, using these shapes to present information on my infographic could create an interesting infographic that is aesthetically pleasing to look at.

To help these shapes blend in on the infographic I could also incorporate them into the overall design by using a slightly lighter or darker shade than the background colour and draw more of the geometric shapes into the background in an interlocking format to create a pattern. Doing this will allow the overall design to look more free-flowing, and using a similar colour to the background that stands out but isn’t too jarring can help it appear more aesthetically pleasing.

Hexagon Background

Using the shape tool I created the hexagon pattern using a slightly lighter shade than the background, the background was #0F1428 and the outline of the hexagons was #1F2042. By only having an outline of the hexagon it allows it to blend into the background, this creates a more subtle look to the infographic whilst still keeping it interesting rather than having a blank background. When considering how I will lay out my hexagons which will present my information, I decided to use the lighter colours of my palette and use a strong fully opaque outline whilst making the centre slightly transparent, this means that the background will be able to be seen through the shapes and you may also still be able to see some of the background hexagons behind the text shapes allowing the background and foreground to work together and create an aesthetically pleasing and eye-catching infographic. I could also experiment with adding an outer glow to the shapes on top that will display the text to try and bring them forward more.

Focusing on one or two aspects of typography rather than all of the different topics allows me to explore them more thoroughly, it also allows me to layout my infographic without condensing information down too much or making the fonts too small or squished, this would make it easier to read. The areas that I will be focusing on will be the history of fonts (from print to digital) and potentially also the anatomy of typography – below I have written up a possible timeline I could use within my infographic:

  • 1440: Johannes Guttenberg – invents the printing press (using blackletter typeface)

  • 1450: Fonts are cast in lead

  • 1827: Wood type is invented – created with a special drill

  • 1884: Linotypeface is created – allows automated casting

  • 1950: Phototypesetting – projects light through a film negative of a character, projection magnifies/reduces the size of character onto film, then connected on a spool in a light-tight canister

  • 1957: Helvetica is created by Max Miedinger

  • 1968: First digital typeface designed by Rudolf Hell

  • 1974: Outline fonts are developed for digital typefaces (smaller file sizes and less computer memory usage)

  • 1980s (late): TrueType fonts are created – single file used for both computer display and output devices (printers)

  • 1997: Open Type fonts invented – cross-platform use on mac and PC

  • 1998: Web fonts – release of internet explorer, arent widely adopted

  • 2009: Web Open Font Format (WOFF) – developed and added to the W3C

  • 2011: Major browsers adopt support for WOFF

  • 2016: Open Type adopts variable fonts – single font file that can change shape, width and slant based on where in an interface it is used

Using both (Chapman, The Evolution of Typefaces) and (Flavin, 2018) infographics I decided that there was too much information so I will cut down the information included as well as bullet point the information to ensure the reader can clearly see the most important parts that reflect the history of digital evolution.

  • 1440: J. Gettenbery invents printing press

  • 1450: led type
    1827: wood type
    1884: Linotype
    1950: Phototypesetting

  • 1957: M. Miedinger creates Helvetica

  • 1968: R. Hell creates 1st digital typeface

  • 1980: TrueType fonts created

  • 1997: Cross platform fonts invented

  • 1998: Web fonts (not widely adopted)

  • 2009: Web Open Font Format developed and added to W3C

  • 2011: Browsers adopts WOFF

  • 2016: Open Type adopts variable font – can change design dependant on the place in the interface

Using (Velarde, 2019) infographic on the anatomy of type I created my own diagram that features a few of the terminologies. Within this design, I used 4 different font including Futura, Calibra, Gaduji and Georgia. I used these different fonts to best highlight some of the terminologies I used, for example, I wanted to include the loop and link that is often found in certain ‘g’s but Futura does not have that design for theirs, I also wanted to show a serif so I chose to show this on the ‘l’ and I also wanted to show the use of a terminal on a ‘t’. As I wanted to space the termonologies evenly over the word ‘Digital’ after looking at many fonts I decided to use Georgia for the ‘l’ and Gaduji for the ‘t’ as it fitted in with the other fonts the best due to its similar x-height and stroke weight. I also chose to use a capital A to show what a ‘stroke’ is, again I chose to change the ‘A’ to capital and space out the analyses of terminology rather than having too many on one letter, this will make it easier to read as well as present the information in a clearer manner. The rest of the font is futura, this enables the font to blend in and fit in with the history of digital font.

Final Image:

Team Feedback:

After showing my learning team my final poster above I recieved this feedback:

  • General feedback
    • Very aesthetically pleasing
    • Like the neon colours/overall colour scheme (works really well with the idea of ‘digital’)
    • Love the contrast between the light and dark shades with the glow.
    • I like how the text is dissected in a modern style that gives the impression it is manufactured and constructed in a sort of way, typical of things in today’s digital age.
    • The colour scheme of blues and whites also help to convey the digital, modern atmosphere going on.
    • Flowing hexagons helps to guide the viewer’s eyes’
  • Point of improvement:
    • Make the dates of each hexagon it bit bolder to make it easier to see?
    • The size of the text at the bottom where the labels of the word are might need to be a little bigger as they are quite small for people with sight problems?
    • Differentiate the first hexagon
    • List all fonts and sizes
    • Fix typos

After receiving all of this feedback I made a few changes to the poster:

  • ‘Digital Evolution of font’
    • Size: 48 pt
    • Font: HGMaruGothicMPRO
  • 2nd hexagon date:
    • Size: 15 pt
    • Font: Futura PT Medium
    • Stroke: 0.5
  • 2nd Hexagon information:
    • Size: 15 pt
    • Font: Futura PT Book
  • Hexagons 1, 3, 4, 5, 6, 7, 8, 9, 10 date
    • Size: 18 pt
    • Font: Futura PT Medium
    • Stroke: 0.5
  • Hexagons 1, 3, 4, 5, 6, 7, 8, 9, 10 information:
    • Size: 16 pt
    • Font: Futura PT Book

Bibliography:

Chapman, Cameron, 2020. The Evolution of Typefaces. [image]. Available at: https://www.toptal.com/designers/ui/typeface-history#:~:text=The%20first%20digital%20typeface%E2%80%94Digi,time%20as%20reducing%20file%20sizes. [Accessed 24 February 2021]

Flavin, B., 2018. What’s Your Typeface?. [image] Available at: <https://www.webfx.com/blog/web-design/10-infographics-that-will-teach-you-about-typography/> [Accessed 24 February 2021].

Velarde, O., 2019. A Visual Guide to the Anatomy of Typography. [image] Available at: <https://visme.co/blog/type-anatomy/> [Accessed 24 February 2021].

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: