Week 02: Typography

In this week’s lecture we discussed the importance of typography.

We were first shown the raw text and data about the Apollo missions which should be used in our projects.

“web is 95% typography”.

Nielsen Norman- people read digitally differently than physically. You scan for info on a webpage. Therefore using different sizes for headings and introductions allows the user to easily scan your content. Web friendly content- uses headings, sub headings, lists, reducing unnecessary words, and using block quotes.

It is better to consider the users enjoyment of your content, making digesting lots of information fun and immersive.

Designing for Reading- Focus on body copy, choosing a comfortable body type size. and legible typeface, the typeface should not be over the top, it allows the headings an other parts of the content to stand out.

  • made us focus on how we should display our text
  • displaying our text the correct way
  • focus on the topic we will choose for our prototype

What I did this week

After this week’s lecture it was apparent that the typography used in this project needed to be further understood and researched. Last week I made a moodboard on the typefaces I thought were in theme with the project.

In this moodboard I used the typefaces:

  • Futura
  • Kinetic
  • Roca
  • Gomme Sans

In our lectures it was made clear that, specifically for the body copy at least, the typeface must be legible and not over the top. Therefore I decided to test this on the typefaces I have chosen. I set up a Figma document and wrote out a sample passage of the content I will use in my project.

 

 

 

 

 

 

I chose the typeface Kinetic as the winner as I felt for the body copy it was easily read while also having some subtle details that I enjoyed,

 

 

 

 

 

 

I liked the small details on the the terminals and ears, especially on the letters n,h,p and a. I think it makes the font look almost futuristic which reminds me of the space race era. Everyone was so excited about what the future would look like with the advancements in technology at the time.

Next was to decide which typeface I should use for my headings. For this I took in account what the lecture said about how the user should be able to scan a piece of text easily. For this to happen there should be a solid type hierarchy so the user can easily distinguish what is a heading, intro and the body copy. I thought this would be a good way to decide on the type that best suited being a heading and works best with my chosen body type.

 

 

 

 

 

 

The typeface I chose for my headings and subheadings is Gomme Sans. I think it fits with the body copy the best and has the same theme of futuristic type. Roca has a retro feel which is realistic for the 60’s and 70’s when the space program happened. However, I wanted to evoke the feeling of how people in that time viewed the future and space.

Next was setting up the Typographic scale of for my website.

 

 

 

 

 

 

 

This is the text size and spacing that I will use in my project. Headings 1 and 2  are Gomme Sans Regular and Heading 3 is Gomme Sans Bold. The body copy and button text is Kinetic Regular.

Leave a Reply

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