Screens come in all shapes and sizes, and display text very differently to printed works. It is essential when deciding on typography for screens, to take into account screen size, display quality, brightness levels etc. to ensure your design works for all users. Most major companies will have design guidelines which they publish online and these are a great starting point for a design.
This week’s lecture took what we had learnt in Week 3’s Typography lecture and took us deeper into the topic and more specifically, typographic concerns when designing for products to be viewed on a screen, from Smartwatches to large Televisions.
To communicate the correct message in our typography it is essential we learn the basic structure and make up of typefaces and how to use them correctly.
In typography, there are millions of different typefaces to choose from, making it an almost impossible decision to chose one simply from a list, that is why typefaces are split into a number of different classifications which will narrow down any search.
We had discussed Serif, Sans Serif and Slab Serif fonts in a previous lecture but this week we were looking at how these can be split down even further into Humanist, Transitional and Modern/ Geometric styles.
Humanist serif typefaces were mainly designed in the 15th and 16th centuries, they have low contrast in their stroke weights (the difference in weight between the thickest and thinnest parts of a letter) and have angled Serifs. The term humanist is used in many topics but in typography, it means a design that is trying to mimic in some way the work of a human hand. For sans and slab serif, humanist typefaces tend to base their proportions on the older style serif typefaces, and tend to contain more open strokes and higher weight contrasts than other sans serif fonts.
Transitional serif typefaces are newer designs and bridge the gap between the older humanist and the modern typeface designs, these are more vertical and have sharper serifs. Similarly, transitional sans serif fonts are a bridge between old and new and are more vertical and have a uniform weight.
Modern serif typefaces were developed mainly in the 18th and 19th centuries and were almost completely vertical, had a very high contrast within their strokes and straight serifs. Modern sans serif typefaces are usually called Geometric Typefaces, as they are built from geometric shapes, in some cases letters are geometric shapes for example “o” in Futura.
Slab Serif Typefaces use very heavy serifs and this can impair readability, as such they are normally reserved for titles, headers or headlines and should be avoided for body text.
This image illustrates the differences between the styles, all typefaces can have their use cases, typography is all about selecting the correct typeface for the individual design and its needs.
Source (https://www.invisionapp.com/inside-design/how-to-describe-typefaces/) Last Accessed 25/10/2022
We also looked at contrast in terms of typography, in the text colour, but also in the typeface itself where contrast is the difference in font weight either within the typeface in its strokes or by using bold or semi-bold weight options. When designing for screen and concentrating on readability contrast is very important, and it is accepted that heavier font weights are easier to read at smaller sizes. In terms of sizing it is important to remember that different typefaces will have different x-heights at the same point size, so one typeface may appear bigger at 14 points than another. Just like contrast a larger x-height makes reading much easier on-screen.
When increasing the font size it is also essential to increase the leading, which is the space between the lines of text to avoid the text becoming crowded and difficult to read.
During the lecture we were also introduced to some common errors that are made using text in designs, these included using point marks instead of apostrophes or double point marks instead of proper quotation marks.
Another common error is to leave what is known as a hanging quote, where the first line of a quote is indented by the use of quotation marks, but the first letter of the next line is aligned to the quotation marks instead of the first letter, see below an example from BBC News online.