Looking back over the details from of typography is key when transferring onto the digital screen. A typeface is made up of a combination of different elements, some of which include serif, stroke, letter spacing and the height of the letters including ascenders and descenders. Two phrases that were new to me were the x-height, which is the distance between the baseline and the mean line of all the lowercase letters, and an aperture, which is an area partially enclosed by the letter/symbol. This all builds up the anatomy of a typeface.
Typefaces go through different stages throughout time and development. These are humanist, transitional and geometric. This process leads to the more modern fonts we know today, but many of the earlier fonts are still in use. A humanist typeface is often called an old-style or Venetian, is inspired by traditional Latin letterforms. They are characterised by having a low contrast between the thick and thin strokes and loose letter spacing, which was vital for being legible in small text sizes. Very common serif typefaces are transitional font styles, which include Baskerville and Times New Roman. These fonts stand upright with suitable contrast between the thick and thin strokes and the serifs are wider than before and bracketed. Geometric typography is built using geometric shapes like circles and squares, resulting in sans-serif typefaces. Many modern brands use this typography due to its minimalism, simplicity and cleanliness, like Product Sans.
Serif: the decorative stroke at the base of a letters stem, which is sometimes called the ‘feet’ of letters.
Sans-Serif: a typeface which doesn’t have the extending feature of a serif at the end of the stroke, sans translates to without.
Slab-Serif: can be called a mechanistic, square serif, antique or Egyptian typeface is characterised by the thick, block-like serifs which form a large and varied genre.
Glyph: is an elemental symbol within an agreed set of symbols, with the intention to represent a readable character.
It is key that the reader is able to comfortably read the information on screen. The features of the typeface is vital for this, like the size, length and height, but designers also can use heads and bodies to help divide up the text. Put simply, it is a way of dividing up large areas of text, and adding a subtitle to each one. This in turn helps the reader understand, without having to comb through endless text. The choice of type and colour in the headers can also help the reader understand the type of information below. For example, an old-fashioned typeface, could indicate that it’s a historical piece of text.
TASK…
Using this knowledge, I designed a piece of text from Mary Shelley’s Frankenstein, giving it a heading and body of text. The key was to find a font that would suit the context of the genre, but also is still legible. My font choice was made while taking into consideration the genre of Shelley’s book, so I leaned towards the Gothic styles and old, handwritten styles. I played around with the font choice for the body of text, as my first choice wasn’t as legible as I had hoped.
Letterforms are not the only key point of typography, other details are important as if they aren’t used in the correct context, it can lead to confusion. Punctuation is one of these, as when changing the typeface digitally, designers need to be aware for prime marks, which are the default when apostrophes are in the sentence. To change this, they must delete and replace it with an apostrophe in the correct font. A similar occurrence happens with quotation marks, when a double prime is placed at the ends of the quote. This is important to change as prime marks are used for units of measurement, not literature. Other small details designers have to look out for is the alignment of the hanging quotations, ligatures and the size differences for some numerals. Similar to the prime marks, hyphens have subtle differences, but can be used in the wrong context, like how an en dash is longer than an em dash, which is used to separate information.
Brand guidelines are vital in terms of communication with the users. They are a key tool to ensure brand consistency. Without them, brands could develop and distort over time which could send mixed messages to the customers, resulting in a decline in brand value and reputation. The guidelines would include:
- Information about the brand’s history, mission, values and vision
- Guidelines on logo usage including colour palette, minimum and maximum sizes, spacing, contexts and where it should/shouldn’t appear
- Colour palette, both RGB and CMYK codes
- Font and text sizes
- Tone of voice and grammar rules
- Design elements and types of imagery, icons and photography to be used
- Business care and letterheads
By having this, the brand can bring in any designer, any time and they can use the guidelines to create consistent designs. No matter the size of the brand, or industry it is in, every one should have one, even Ulster University does, which we looked at in detail.
Similar to a lot of aspects in today’s design world, designers have multiple tools at their disposal and Material Design and Apple Developer are two that help with making sure that on the digital screen, everything is in proportion and clear. Material offers a wide range from colour to the type scale, and Developer gives designers the tools and resources they need to design apps that will work seamlessly over Apple devices.
TASK…
Using Material typography, I changed the Mary Shelley text I created earlier so that it fit into an iPhone frame. Using the dimensions given on material and grid systems, I moved the text onto Figma and created this small thumbnail. For the colour, I used the ink dropper tool to pick a green tone and then I increased the font size so it ran off the page to replicate how it would look if someone was to scroll through it.
Colour, weight and contrast can also be utilised in typography to add emphasis to certain parts of text. For example, headings and title should be bolder, thicker and perhaps a different colour to stand out from the body of text. Similarly, block quotes and hanging quotation marks could be highlighted by doing the same thing.
TASK…
Taking all this on board, I took a John Baskerville text file, and using visual hierarchy, I created a layout I felt best suited the content. I included a main and sub heading, section headings, body text and quotations to help break the file up. I had to go through the text to make sure all punctuation was correct and make changes were they were needed. Again I used a grid system on figma to make sure they all aligned up and the spacing was consistent.
After this, I used the tool font joy.com, to create a duplicate of my first design but present it in a more creative way using two complimentary font choices. Finally, I placed the screens into mockups to see how it would look on a visual screen.
