Typography pt.2
Typography is something that we regularly don’t put too much thought into whenever we’re reading a magazine, an article, or any sort of text in general. Which was what we were talking about in today’s class.
We started off by learning about the different classifications of a typeface as well as its anatomy. The anatomy of a typeface is basically the same for most of them, with slight changes. The X-height, cap height, letter spacing, baseline, etc. remains the same. But serifs on the other hand might not be present in certain typefaces, which is a sans serif typeface.
Early typefaces were based on Latin calligraphy, which is what we know as Serif typefaces, and when technology advanced we got Sans serif typefaces, we also brought up the type classification Slab Serif, which focuses on heavier, block-like serifs.
While talking about the different type classifications there were different sorts of types of it, for example, Humanist, Transitional and Modern. Which are three types of serif fonts.
Humanist, Transitional and Geometrical, which are the types of Sans serif, and finally Slab serif which is, Humanist, Transitional and Geometric.
Each of these types carries different characteristics, for example; The humanist font is based on human calligraphy. A type that has more of an organic feel tends to look more organic.
Transitional on the other hand, is a mixture between old and new typography in both of the classifications, hence its name.
Heads and bodies
For the first task that we participated in today, we had to learn the importance of typefaces and how we can make a section of text with a headline reflect its content. We were given two pieces of text to reflect upon, as well as adding a typeface we felt was relevant to the text we chose.
We could choose between either:
- Frankenstein by Mary Shelly
- Do Androids Dream of Electric Sheep by Philip K Dick
I naturally chose the second option, which is the novel that the Bladerunner movie was based on, which is one of my favourite movies and I knew quite a bit about.
I decided to go with an older font that would have futuristic elements to it, to reflect the book’s content. Since the book’s contents take place in the future but because it’s an older book to convey the retro feeling of it.
With the small knowledge I have with fonts, I thought that the typeface Futura would be a perfect fit.
I was happy with the outcome of it and felt like I managed to bring out the feeling of the text using the said font.
When we were done with the task given to us, we were taught about the importance of the correct usage of glyphs. Glyphs, much like the Latin alphabet are used in writing, but for a different purpose. There is a wide variety of glyphs used in writing, mainly symbols like an exclamation mark for example.
Letters can also be considered glyphs, since it’s not the usual letter from the Latin alphabet, for example, In the Swedish as well as Finnish alphabet there are three extra letters, Å. Ä and Ö. They also appear but in a different shape in the Norweigan as well as Danish alphabet, Æ Ø Å. These are considered glyphs since they’re A E and O from the Latin alphabet but modified using glyphs. Ö for example is O but modified with the diaeresis, creating the letter Ö.
We were also taught the importance of using the right glyph in the right situation in text.
We spoke punctuation, how to properly use apostrophes and quotation marks, Quotation marks, hanging quotes; how to make a quote look better using a hanging quote, hyphens, Ligatures as well as numerals.
Communication
Whenever you’re writing a text, you’re actively communicating with an audience of some sort. It’s important to use different font sizes, types, and colours to convey your message putting attention to different parts of the text by making it bold, etc.
Another thing that is important when you’re for example going to highlight a certain quote or a section of the text is to make it slightly larger than the rest and place it in a different area to make it stand out and grab the attention of the reader.
We were also watching this documentary about the UI of BBC, where they were talking about them developing their own apps, making a unique typeface, as well as the UX on their apps, making it unique around their brand.
Making the typeface they wanted to maintain the history of BBC, they also thought about the accessibility so that old, as well as young, should be able to read the text.
One thing they did was use the limited amount of space with the new fonts, they bypassed an issue by changing the Q to make it take less space, making them be able to fit large text with less space. Humanist type space.
As for the second task, we were asked to transfer the text we previously worked with to fit on a phone screen, working with material.io guidelines to find the perfect font size with the font we were using. We also added an image onto the screen artboard that relates to the story we were given.
When we were done with the second task of the day, we were taught the importance of colour, weight, and contrast in the text.
With that, we were given our third task of the day and were given a piece of text about the history of the Baskerville to correct and make a nice layout.
Once again in this task, we were advised to use material.io guidelines for the font sizes. We were asked to go for an 8px grid with 12 separate grids, using Figma. I tried using Figma but gave up shortly after since I didn’t feel like it gave me the freedom to edit the text the way I had in mind.
Using Illustrator I edited the text and created a layout that I felt had a nice design that divided the different paragraphs, still keeping relevant elements. I used the grids to create a layout, giving each part of the text an equal space between them.
To make the quote stand out I made it more opaque, slightly larger using italics. I also added a vertical line to highlight it, moving the text slightly to the right.
Overall I’m happy with the final product, I also made two more using different fonts for the headline.
For the first one I used the font Lora, I found this font using fontjoy.com to add more creativity to the text, but still this old retro feeling of it.
In this version of the text, I used the font Playfair, using the same website to find something similar but still interesting to change up the feeling of the text.
Thank you.