Design for Screen - Typeface

fig. 1

I needed to decide on the typeface that worked the best visually and also as representing the concept of the app. I began the process by listing lots of examples (fig.1) of serif typefaces (left) and then sans serif typefaces (right). I was then able to select the ones which visually stood out to be the best and most suitable. 

fig. 2

fig. 3

After selecting the 3 typefaces from each of the lists I circled areas in which I was not that keen on and could be improved. this would allow me to help make my decision and also edit the final typeface if I was to choose it. Figure 2 shows the typefaces (left to right) Univers LT std, DIN Alternate Bold and Lucida Grande. It was Univers that stood out to me to be the most appropriate typeface to use in terms of sans serif because it was the most neutral in terms or slanted letters or emphasis on terminals etc. this means that the focus can be on the way in which I present it as a logo or the colours that I pair it with. I then selected the three serif typefaces (fig. 3) that I thought to work the best, Baskerville, Century and Didot. Initially, I thought that Baskerville could be a good option as a logo typeface or a display type because it is associated with sophistication and newspapers/magazines, but I didn't like the bracketed serifs as much as the slab ones in the Didot typeface. 
The final choices were Univers and Didot, as shown in figure 4. 

fig. 4

Kerning
The 'r' and 't' appear too close together (fig.5) in comparison to the other letters in this typeface. The solution to this problem was to change the kerning between these two letters, increasing the space between them (fig.6) to ensure they no longer nearly touched. This looks much more natural and is something that I would need to look out for if I am to use this typeface. 

fig. 5

fig. 6

Font pairing

Univers

UX research on typography for screen

Size and line length
30-40 characters per line 
The iOS guides show that the typeface Apple uses for app design is 'John Appleseed' at 20pt for display text and then 19pt for body text. This is something that I will need to take into consideration when designing the app interface, ensuring that readability is designed to be the clearest it can as my app is heavily focused on reading and the ease of it. 

Colour
The higher the contrast, the better and black on white is the most readable combination. 
Another source says that a slightly grey background lowers the contrast a little and improves the readability very slightly. This is something that I should take into consideration when designing the final visuals for the app. 
Research has shown that pure black text can be difficult for dyslexic readers and can cause more eye fatigue over long periods of time. It is suggested that a very dark grey or real black is more suitable to use. The hex codes for these colours are: #0D0D0D, #0F0F0F, #141414.

Sans vs. Serif
In classic print typography, serifs are used to improve readability and reading speed by gently guiding the eye in a horizontal direction. The problem with the serifs on a small phone screen is that they show up so small that they can actually make the reading process harder. 

Justification

The worry I had was that the serif typeface would be difficult to read on the screen at a small scale. To test this out I looked at the Vogue app as this brand has a similar typeface to the one I have chosen to use. The image (figure. 7) shows the vogue app screens and how it is legible. The company have paired the serif typeface with a sans serif typeface with a thin line width, this improves the legibility and also visually it works positively. 

fig. 7

fig. 8

(left to right)

1. 

Didot 

Univers

Avenir 

2. 

Didot

Din 

Avenir

3. 

Didot 

Univers

ITC Garamond

fig. 9

Research into typefaces used in magazines (fig. 9) revealed that they often use a combination of 3 different typefaces. I have found that a serif typeface as the display (logo), a sans serif typeface for the subtitles and then a serif typeface for the body will work well. Figure 8 shows the experiments of typeface combinations, using the ones that I had initially narrowed down. 

fig. 10

Figure 10 shows the final typeface combination for the app, it was voted to work the best and also testing it out to the scale of an iPhone screen showed it to be the most legible combination.