Typography for Screen

I paired typefaces for these excerpts from Frankenstein and Do Androids Dream of Electric Sheep? For the excerpt from Frankenstein, I chose to use Marcellus for the headings, as Frankenstein is a classic book, and Marcellus conveys a professional tone, with sharp and precise edges, and square shaped letters, with equal width and height. For the body text I used Baskerville, as it is reminiscent of book print, and pairs well with Marcellus die to its classical, elegant appearance.

For the Philip K. Dick excerpt, I used Numans for the headings, as it is a rounded and uniform typeface, which conveys the science fiction themes in the novel. I used noto sans for the body text, as it is a versatile and sleek typeface, which can also fit with futuristic themes due to its uniformity and smooth appearance.

I chose a neutral, brown colour palette for the Shelley excerpt, as it is reminiscent of the leather covering of old books, and the stained colour of weathered paper. For the second, I chose the main body to be a light green, as these colours are prevalent in science fiction films such as the Matrix, I chose a bold red background for the heading to draw attention to this, as it is a contrasting colour.

I converted the Frankenstein text into a phone screen layout, using a monochromatic image of Frankenstein’s monster. I decided to use a gritty and realistic interpretation of the monster, as the typefaces I used play into the original book’s prestige as a classic, and also the deeper psychologically frightening aspects of the book. I used a monochromatic blue colour palette, alluding to the sadness of the monster in the story, and also applied a blue tint to the image to fit seamlessly with the text background.

For this desktop layout of the text on John Baskerville, I used the Baskerville typeface for main headings in bold. This is because Baskerville is quite a stylised typeface with an elegant appearance, so works well to draw the eye to important parts of the text, while also conveying the importance of John Baskerville as a typeface designer.

For the subheading and block quote, I used the sans-serif typeface, Urbanist, in italic to draw more attention to it. It contrasts with the sophisticated nature of Baskerville, adding a feeling of sleekness, helping the block quote to stand out on the screen. I also positioned the block quote in the centre, while everything else on the screen is left aligned, emphasising its importance.

The body text is in roboto serif, as it is an unobtrusive typeface, and the addition of serifs allows it to pair better with Baskerville, and makes it easier to read a long piece of text in.

I designed this smart watch layout of a music player. The most background is in black, so that the watch does not look obtrusive to wear on the arm by emitting too much light, and the most important buttons are yellow, as the bright colour looks more prominent against the black background. The image and slider are also aligned, with the time on the slider in red, with a drop shadow, making it appear to come out from the slider, and the red allows it to be easily seen, as the user will be able to interact with it.