Typography for screen is used in a number of Digital products such as motion graphics and webpage design. Used for body, display and titles, typography for screen is one of the most fundamental things for good design. Poor typography causes the user to lose interest while good typography can keep them engaged.
Serif
Originating in the 1800 from the Latin alphabet and Greek writings carved into stone, it remained popular due to its good readability and visual look. The serif typeface has a small flick or ‘tail’ at the end of each stroke, mimicking the flick of a quill or pen when writing. Examples of this is the typeface Times New Roman which is used for The Times newspaper. Differences in the Serif type can be seen between the transitional, humanist and modern versions. The traditional type uses more vertical axis and sharper serifs than the humanist serif type which uses a contrast of thick and thin lines to show the letter forms. The modern type uses a contrast of strokes, vertical axis and straight serifs.
Sans-Serif
Sans-serif fonts are commonly used for body text due its good readability and legibility as they have no serifs on the end of the letter strokes. Humanist sans-serif fonts have a bigger contrast and strokes than other sans-serif fonts do, an example being well known Gill Sans. Transitional sans-serif fonts such as Helvetica are a lot more uniform, using vertical strokes and a vertical axis. Geometric sans-serif fonts are created using geometric forms such as fonts like Futura were the ‘O’ is geometric.
Glyphs
A glyph is a single representation of a character within the typefaces Unicode. Each glyph takes up a space in the glyph table, organised according to the unicode. Not to be confused with a character as a character can have many glyphs and a single glyph can represent multiple characters.
Heads & bodies
These two elements are important for creating a meaningful piece of text and creating a clear hierarchy in the piece. The header is at the top of the piece and contains a few words summarising the text.
To get a good experience of using this hierarchy, we did a task using a piece of text on Frankenstein by Mary Shelley:
Frankenstein by Mary Shelly I am by birth a Genevese, and my family is one of the most distinguished of that republic. My ancestors had been for many years counsellors and syndics, and my father had filled several public situations with honour and reputation. He was respected by all who knew him for his integrity and indefatigable attention to public business. He passed his younger days perpetually occupied by the affairs of his country; a variety of circumstances had prevented his marrying early, nor was it until the decline of life that he became a husband and the father of a family.
https://www.figma.com/file/Ef8t1ADY7iSmoGTAwbdhxe/week-5-task-1-%26-2?t=phqzYKjMJ8pyprbF-6
Focusing on using the hierarchy, the measure of text and taking into consideration the genre, we had to choose a suitable typefaces for the heading and body and implement it.
I used Adobe Font to find some typefaces that would be appropriate and link in with the Frankenstein theme. I settled on using original surfer for ‘Mary Shelley’s’, Mr Darcy for ‘Frankenstein’ and Neue Aachen Pro for the body text. I used the light green colour #BAF2CA to help make the text stand out and link it in with Frankenstein.
Punctuation is such an important part of having text that makes sense and is readable. An important example of this is quotations and apostrophes being used appropriately and correctly to create a clear structure and easy to understand passage for the reader. The basic rules of quotation marks is using ‘ for feet and inches. “ for minutes of seconds, ‘ ‘ for apostrophes or single quotes and “” for double quotes. Other examples of good punctuation is the use of hyphens which are used to create a connection between two words such as top-notch, ice-cream and sign-in. Others that exist are en dash and em dash; an en dash is slightly longer than a hyphen and is used to indicate a length of numbers or distances. It is also used if the connected terms contains more than one word. An em dash marks the break in a sentence and are used a similar way to a comma.
Ligatures
A ligature is a glyph that combines shapes and letters to create a easier reading experience.
Examples of ligature can be seen in branding and logos such as the CNN logo:
Typography on screen is essential used to display information in a clear and concise way to the users. Although some people, especially those who are older tend to stick to the old way of printed documentation such as newspapers which the layout and concept of hasn't changed throughout their whole life. They also aren't required to have specific fonts or software downloaded or the technology and Wi-Fi to view it.
Just like the printed counterpart, documentation on screen must also use the hierarchy of title/display, subheadings and body to divert the users attention and tell them what to read and in what order. Using attention grabbers such as quotes displayed in larger, bolder texts intrigues the reader and grabs their attention. Also the use of colour and images alongside the text creates the positive experience for the user and helps direct the direction the user communicates and understands the piece.