IXD101 ( 30249 ) - Interaction Design Fundamentals. 2022-23

This week we looked at typography for screen.


Anatomy of a Typeface

The anatomy of a typeface dissects the individual parts of each letters form, and how it can be altered to create new and interesting fonts. Designers use this structure as it is made up of components that ensure a successful outcome in terms of legibility and aesthetics.

“The reader should be able to read the message of a text easily and comfortably. This depends to a not inconsiderable extent on the size of the type, the length of the lines and the leading (line-height).” Josef Mueller–Brockmann

Untitled

x-Height

The Serifs

Glyph


Heads and Bodies

Exercise 01: Fit for Purpose

I created two samples (as seen below) by choosing a suitable typeface for each section. There is not a huge difference between each design, the only difference being a change of font in the body text.

iPad mini 5 - 1.png

2.png

Exercise 02: Mobile View

Taking the same text as above, we created layouts that were suitable for mobile view. I created three versions with the minimal difference of including colour and a suitable image.

iPhone 14 - 1.png

iPhone 14 - 3.png

iPhone 14 - 2.png


John Baskerville