Today’s class focuses on typography both in a broad and minute form. I am extremely relieved that we are covering this topic today in Kyle’s class as Typography is one area I would like to get stronger at, especially looking at the last modules (IXD301) website and how I would constantly bicker about the sizing of the headings, body, etc as I just felt like it didn’t look right. However, with this class today I hope I cover a lot more meaning on how correctly balance typography.
Typography is one of the most fundamental parts of content and design, Robert Bringhurst a Canadian author and typographer which in his book “The Elements Of Typographic Style” concludes 3 prominent points such as:
- Typography exists to honor the content.
- Three is a style beyond style.
- Read the text before designing it.
Although I acknowledge the major importance of typography, the points that Kyle has concluded from Roberts’s book enhance my perception of typography and now make me think of it in a stronger light. Something so simple yet so fundamental to design. Reading these points creates a starting guide for my own typographical demeanor. Furthering these points, Kyle talks about how Web Design is 95% typography, this is true for most sites on the web as if we removed all of the media elements from it we can still fully navigate and transfer our way throughout websites.
Nielsen Norman Group
However, not everything is symmetrical, as reading in the real world is much different from reading in the digital world, looking further into a research article by the Nielsen Norman Group we can find that there is a different internal pattern at how the human brain acknowledges digital written content.
On people who read news websites, 79 percent scanned through written content while 14 percent read new pages from word to word. Additionally, it found that email newsletters are read even more spontaneously than regular pages.
In what ways can I display my written content to cooperate with this human behavior?
- Hyperlinks/Highlight text – These serve to highlight information or words to create more awareness of the text. – *I could possibly do this on my website using my intended colour palette? *
- Meaningful sub-headings – This not only instills a sense of typographical hierarchy but also creates a sense of value towards what the user is reading, additionally, clichés are outdated and lack a sense of credibility and validity.
- Bulleted lists – Structures and organizes content for my website.
- One idea per paragraph – Similarly to an Email that I would send to my lecturer or employer, don’t overcomplicate the flow of content.
- Half the word count – Less complicated and cooperates with human reading patterns.
- Blockquotes
Like in everyday life from products you find in a store or designs on the web, credibility is a major factor in the product’s success as it is a fundamental factor whether a product will be seen as trusted or not. This is the same for written content on the web. The best way to improve credit is to:
- High quality & relevant typography
- Good Writing
- Outbound Hyperlinks
How has this helped me?
I really found this read critical in understanding how most humans interpret information on websites, although these were broad findings on specific web pages it gives an overall conclusion to how the mind scans information. Additionally, with the tips provided such as typographical ques, I feel like this is great starting knowledge to understand how to structure and coordinate content for my own Apollo project.
Design for reading
For our project, we need to remind ourselves that this project revolves around building a narrative or a story throughout our website/prototype, similar to what Apple does on their website. We need to ease the audience in and create an immersive yet understandable story throughout. We need to design for reading.
The rules:
- Focus on the body copy
- Choose a comfortable point size (15smallish – 25px)
- Consider leading
- Maintain the measure (45-75 characters)
- Select a legible typeface
“Body text refers to the majority of the text in a composition. Its job is to be steady so that other things – like wayfinding signals and eye-catching headings can stand out.” – Tim Brown, Head of Typography, Adobe.
Body text should be translucent, if your body text captures the attention of your audience more than your headings then you are doing something wrong. So in order to have a stark balance, I must ensure that my body text isn’t as detailed as the headings, a recent example of me committing this mistake was on my website, where I chose two yet different rounded typefaces for body and head, this creates a distraction among the text taking it away from more directory details.
Scale
“Scale – setting type at different, contrasting sizes – can be used to articulate a typographic tempo, guiding the reader across a page. At its simplest level, playing with scale both large and small can introduce hierarchy, helping the reader navigate content” – Chris Murphy
I found this quote really interesting as it perfectly describes the interaction between typography and human needs to find visual cues from a sense of hierarchy. This area is one area I need to improve on from the last module as I have said previously that I found it tedious trying to find the right flow between different partitions of text. Thankfully Kyle has provided us with excellent online material to help me understand this.
A little history…
Typography is a beautiful visual expression that allows humans to interact and connect with the essence it is trying to portray whether that be from cultural, geographical or historical reasons, through these reasons however it can connect to readers just based on its identity.
An example of this is old western typography, originally used in the 1800s in South-West United states it holds strong ties to that era and conveys a sense of rustic, old and wild expressions – often tied to criminal activity. Additionally, offspring typography comes with this and holds separate new ties however similar – this is the power of typography.
Similarly, we can use these historical and cultural ties to our advantage for the Apollo project such as a greenish Pixel type font which the earliest computers used, a clean minimalistic prestigious magazine representative of the Bauhaus days conveying a new era/step for humans or a sparky serif font that would’ve been found on the magazines at that time.
What have I learned?
DO TASK
(Talk about how important typography is) mistakes from last year.
Brief
(slecting typefaces for bodytext – website)
Using typeface scale immediately helps without even doing at work to it .
modular scale . com
Whatfont addon
Just my type
Inspo 0–
Typewolf
Practical typograph
Glossary
Professional web typography
Flexible typesetting