Building on my knowledge of typography, during class we looked at punctuation, typeface for screen and delved further into the anatomy of type. We looked at the differences between:

• Prime mark – used in measurements and time.
• Apostrophe – to indicated possessives, plurals or contractions
• Quotation mark – used when quoting someone word for word.
• Hyphen – is placed between 2 compound words, joining digits or the symbol for division.
• En dash – used to represent the range of numbers, time or date.
• Em dash – can be used in places of colons, parentheses or commas.

These were just a few of the terms we learned that pertained to the exercise we had been set in class but as I researched typography and punctuations, I wanted to familiarise myself with more of the meanings behind frequently used symbols.

• Period – marks the end of a sentence or pause in a thought.
• Question mark – used at the end of a direct question replacing a period.
• Exclamation mark – adds emphasis to a sentences and can express strong emotion.
• Colon – emphases a phrase or word at the end of a sentences. Also introduces a list. Separate hours from minutes and also a ratio of two numbers.
• Semicolon – used between two sentences that are joined together sometimes in place of the full stop but instead a semicolon is used to indicated the connection between the two clauses.
• Parentheses – always appear in pairs to provide the reader with additional information.
• Brackets – allows additional material to be inserted inside a quote.
• Angled brackets – more commonly used during the early days of the internet but can be found enclosing wed or email addresses.
• Braces/Curly Brackets – found in programming languages and mathematical expressions.
• Ellipsis – 3 periods with a space either side of each that convey a pause, except when next to a quotation mark then there should be no spaces.

Ligatures

Two or more letters that combine into one character are known as ligatures. These can be used to create a little flare in typography with characters that tend to overlap when places adjacent to one another, creating a smoother transition between them. These are more commonly used with characters with ascenders such as ‘fl’ or in the case of ‘fi’ the dot in the ‘i’ would be replaced with the ligature. They are also used in connecting crossbars like in ‘ff’ or ‘ft’.

Discretionary ligatures can give a word or text a more old-fashioned feel and are used with letters such as ‘ct’, ‘st’ or ‘sp’. This type of ligature can also include Long s ligatures which can be found in ‘f’s that are missing the right side of the crossbar and is combined with ‘h’, ‘l’, ‘i’ and ‘t’. Long s ligatured where common in 18th century writing.

---

Our first task was to take a piece of text and with what we have learned so far, make it more visually appealing and more readable. I chose Frankenstein by Mary Shelly and in my first version I chose the Ovo font for the title and author, which is an old style medium contrast serif best used in headings or large sizing. For the body of text I used Palanquin as its larger line spacing and san serif characters were more appealing to the eye.

Once we completed this task, the next stage was to use the same text but design its layout for the latest iPhone screen and further improve the visual appearance of this text by adding an image and choosing the right typeface. Initially I chose a simple black and white layout using Oswald as my font in various thicknesses. I then wanted to incorporate colour into my design and changed the title font to Julee, which I felt was suiting to the Frankenstein theme. I kept the body of text as Oswald but changed the colour so it was able to contract the green background I had placed behind it it. I prefer the first design as it is more simplistic and the bold title is the first thing your eye is drawn to in comparison to the second which is the image. This means you know exactly what the piece is about as soon as you look at the screen, which in my opinion, is what would capture the viewers attention quicker that an piece that you search to the screen to understand more about.

Our next task was to work with a larger piece of text and using the Material Design website choose the correct sizing for headings, titles and paragraphs. We applied a grid to our page using Figma to get the layout such as spacing and padding correct.