Creating Type for Screen

Having learnt the foundations of typography: typefaces, colour and grid systems, we began to create typography that would be presented on a screen. Given the extract from Frankenstein, I utilised AdobeFonts to select a serif, Gothic typeface which reflected the horror genre the book belongs to create a more appropriate paragraph text (above). I used a bolder font for the books title and author credit which are aligned ragged right and in also in a large font to define them from the larger paragraph of text. This visual hierarchy makes it more straightforward for a user to navigate the information. I was able to align the larger text paragraph in a tidy, justified alignment that I adjusted in font size and text box size to minimise white rivers (negative space created by justified). After this initial organising, I brought the text to Figma where I created wireframes on a iPhone 13 frame. On Figma, I was able to change the background colour to black which would allow the white text to stand out on a user’s mobile screen. I also included an engaging image of Frankenstein’s monster which reflected the content of the text. Using grid structures I was able to align my text and titles. This exercise was very useful as I explored what colours and text sizes were appropriate for the narrow, long phone screen.

Designing for Desktop

In class, we all began to design layouts for a desktop webpage on Figma. Using grids, columns and rows, I was able to align paragraphs from the Baskerville text shown above to create webpage. I used flush left alignment for the the titles and larger paragraphs of text as this would make it easier for a user to read. I utilised font size and weight to differentiate titles from the general text and create a visual hierarchy and included a block quote paragraph that was centred. I also experimented with combining multiple typefaces from AdobeFonts to explore how to appropriately match fonts to create a seamless page of text.