Typography for Screens
Brief History of Typography
Before the invention of digital devices and screens typography was primarily used for printing, dating back to when the Gutenberg Press was first created and the use of moveable type surged throughout Europe and the rest of the world. In modern society the use of screens are becoming more and more popular especially when it comes to advertising, we see typography in the application we use on a day-to-day basis, we see typography on our TV’s or when we are watching a film and we see typography being used in advertisements with the output intended for digital screens. Although typefaces are still used in print today, the digital world is taking over at a rapid pace. This calls for the creation of typefaces that suit the purpose of their intended outcome.
Type Anatomy and Typography for Screens
Serif or Sans-Serifs
Throughout the 1900’s sans-serif typefaces were becoming more popular due to their modern and geometric traits, while serif type face we not particularly “cancelled” sans-serif typefaces definitely became the go-to font choice for the majority of the design industry. This is still the case today as a lot of well-known companies and brands that’s used serif typefaces in their logo have had it re-designed with a sans-serif typefaces.
Their characteristics make the type class perfect for digital outputs as its geometric shape and low-stroke contrast makes them more suitable for screens as the device display is made from pixels, serif typefaces are still used in elements of interface design commonly seen in headings and/or display titles.
Glyphs
We took a look at glyphs and what they are when it comes to typography. Glyphs are considered as a specific letterform or shape within a certain typeface or type family, this can include the basic letterforms of the typefaces like the letter ‘Q’ or the letter ‘A’ but also included other typographical elements like punctuation, accented letters commonly seen in foreign languages and symbolic marks like the ™ trade mark symbol and the © copyright symbol. The first sighting of glyphs date back to the early days of cave painting and Egyptian carvings where symbols we often used to depict stories and information as this was their only form of written communication back then.[1]
Anatomy of Type
When it comes to using typography on screens it is important to consider the characteristics of each typeface to see which traits would work best, a typeface with a larger x-height would be a better fit for screen as it would allow for better readability when its displayed at smaller sizes, this would make it perfect for certain devices like smartphones or even smart watches. A typeface that has a high stroke contrast may not be the best choice for screens depending on what you are using the typeface for of course, if the typeface is displayed at smaller sizes, say for body text for example, the typeface may not be completely legible especially when it comes to accessibility and people with visual impairments as they may find it more difficult to read in comparison to a consistent sans-serif typeface.
Punctuation
Throughout our workshop we looked into the use of punctuation and how it is important to use punctuation correctly when it comes to designing. We explored some common mistakes that are often made within the use of type and the correct way to use punctuation when it comes to designing with typography. We explored the use of hyphens and em-dashes and how they should be used when it comes to typography, we looked into the use of apostrophes and there correct way of using them when it comes to names and numerical values like feet and inches and we looked at quotation marks and the correct way off using them within our typographical elements.
Personally I found this interesting as punctuation is not my strongest point when it comes to text and I’m not 100% sure about how they are used correctly, going over this in class made it a lot easier for me to understand how punctuation should be used in typography and what they are used for. I began to explore the use of punctuation in the task, Heads and Bodies, we were given in our workshop to see if I was able to expand my skillset.
BBC Reith Case Study
During our workshop we looked at how the BBC implemented a change in typeface across all of their platforms, from TV and boradcasting to their website and branding material. Reith is typeface that was created for the BBC and lead by the London based typography designer, Dalton Magg. The typefaces previously used for the BBC in the majority of their work were starting to become outdated and did not suit the new digital age, as text is being displayed at smaller and smaller sizes on screen, especially on TV where they have limited space, they wanted to ensure the were using a typeface that utilised all the space on screen as well as being legible and easy to read. The BBC originally primarily used grotesque sans-serif typefaces like Arial, Helvetica and Gill Sans throughout their services, products and branding but these typefaces were primarily designed for print in the 19th century. Reith is a humanist sans-serif typeface that is influenced by the typefaces commonly used by the BBC but focuses more on the purpose and use case behind the typeface by ensuring the typeface in easy legible at small sizes and is directed towards accessibility concerns to make it easy for the viewer to read and digest information.[2]
Personally I found the video extremely interesting to watch as I never fully understood how something like a typeface was created let alone being implemented into a brand change with a company as big as the BBC who have zero down time, this makes its extremely difficult for them to implement the new typeface without having issues across the board. Listening to the video and seeing how they had considered all factors of the typeface design like designing the typeface to make the most of the space when it is displayed on screen through to considering accessibility concerns that surround typefaces. One point that stood out the me was with the way they had used a horizontal stroke for the letter ‘Q’ instead of having it hang below the baseline on the type, the designers had purposely directed the stroke off to the side of the letter form to ensure they were utilising the space in the best way possible. Another point I found interesting was they way the introduced subtle differences into letterforms like ‘b’,’p’,’d’ and ‘q’ to ensure that the letters were easily defined.
Task – Heads and Bodies
We were asked to create a design layout about John Baskerville just using typography, the purpose of this was to explore the use of typography and creating visual hierarchy through sizing of type.
For my design I chose to align the sub-title with the large title to introduce some asymmetry to my work, I looked into creating a visual hierarchy between the headings, titles and body elements of the page by using the type-scale tool at www.type-scale.com, this allowed me to create some authority between the titles and the accompanying body text based off the golden ratio.
I also looked into using different font weights in the headings to separate them from the title of the page, this also created a visual grouping between each typographic element where the title is big and bold, the headings are thick and distinctive and the body copy is consistent and aligned. I chose to explore the use of italics in areas throughout the project to create extra variation between certain parts of the text, this can be seen in the sub-title below the title and the quotation in the body text, I created a separation between the quote and the citation by introducing italics to the citation of the quote but leaving the quote as regular body text. I could have took this a step further and introduced a different sizing or spacing to the element like an indent to separate the quote from the body content.
I wanted to explore the use of quotations and hanging quotations in design, when designing this in Figma I noticed that they don’t have a feature that allows you to create hanging quotations so I had to use a work around. I created a separate text area with the quotation marks in and aligned them to the edge of the paragraph to simulate the idea of hanging quotations.
I have included an image below to illustrate my exploration of heads and bodies.
Design Systems
We started to explore the use of design systems and how they are used throughout the design industry, design systems are one of the most common tools used in design as they are a set of principles and values that the design is centred around, this allows the design to be consistent with the brand as well as making it easier when it comes to the overall design and development phase of the project. Design systems are often a set of components such as buttons, labels, navigation bars, menus and modal boxes, they will often include information about colour, typography, scaling, and code to assist the developers when it comes to the build of the application or website. This is most commonly seen in CSS code and code for application development like Xcode and Swift.
I did some extra research into different design systems other than the Material Design system by Google, I noticed that a lot of big companies utilised design systems and brand guidelines. One example we looked into was the Ulster University brand guidelines to see how they create their designs for marketing and branding through a specific set of principles. On further research I noticed that companies like Apple, Microsoft, MailChimp, Adobe, IBM and many other big named brands all utilise and have a design system, I decided to look into a few designs systems to see how they were created and what the common features of a design system were, I noticed that they all include colour values, typographic scales and often component elements like buttons and cards but some design systems are more detailed.
I have included some of my favourite design systems below to illustrate what design systems are and how they are used by companies to achieve consistency and efficiency when it comes to designing.
- Bootstrap Design System
- MailChimp Design System
- Apple’s Human Interface Guidelines
- Material Design by Google
- Adobe Design System
Task – Typography for Applications
For this task we were asked to create a layout for a mobile device using some of the content from the previous project, the purpose of this task was to explore the use of typography with the output being a digital display. For my project I wanted to explore the idea of using two different typefaces to create a visual hierarchy between each element on the screen, I also decided to look into using colour to create a visual hierarchy between elements by having the title a dark teal colour and leaving the accompanying body content as black.
I wanted to explore the use of design systems based on the previous research we had done in our class, I decided to look into Googles Material Design system to help me create my typographic scale, these settings were easy to implement as they are all displayed on the material.io website. I had to tweak the sizing of the title as the typeface I had selected to suit the style of the content had wider characteristics and a bolder appearance.
I have included an image below to illustrate how I used typography when designing for a digital screen.
References & Sources
- ThoughtCo. 2021. Glyph: A Word With Several Meanings Across Many Disciplines. Available at: https://www.thoughtco.com/what-is-a-glyph-2086584.
- GEL Website. 2021. BBC GEL | Introducing Reith â the new face of the BBC. Available at: https://www.bbc.co.uk/gel/articles/introducing-bbc-reith.