Class 4: What I Learned This Week…
Typography
Your website idea can include a specific target audience, such as children, but when implementing the design you need to make sure its accessible to everyone regardless of the target audience. There may be others who would enjoy using it too so don’t exclude them.
“Web design is 95% typography” – Oliver Reichenstein
- Looks at what type can express
- Serifs originated from print
- The differences between screen and paper is that there is no glare on paper so you can easily adjust position or angle, whereas on the web you can’t and so this makes serif more difficult to read online.
- Preferences: Some people prefer dark mode, some people prefer light mode. You need to ensure you are designing with this in mind.
- The 5 font families are: serif, sans serif, monospace, cursive, and fantasy. Monospace has the same amount of space between each letter and in pop culture it is used as a way of rebelling.
- You must always declare the font before the font family and ensure the fallback font is similar so that it doesn’t ruin your design/layout.
- By default, browser settings are set to 16pt
- You should declare at least 5 properties in the body section of the stylesheet: background colour, font colour, font family, margin, and padding. Links should be declared after the body.
- Advised not to use Lorem Ipsum as it is distracting and takes away from the design and layout
- White text on black backgrounds should always be scaled up and increase the line height as this is more difficult to read than black text on a white background.
- Headings should always have more top space than bottom space. This allows the reader to breathe and digest what they’ve just read before starting a new section.
- You shouldn’t underline or change the colour of something in the main text body that isn’t a link as these are the well known appearance of links, therefore it will be assumed.
- You can adjust text size for different screen sizes depending on the distance away from the eyes. For example a desktop pc might want a larger text as opposed to an iPad that would use a smaller text as it is held closer to the eyes. Whilst both are using different font sizes, they are perceived as the same because of the distance.
Design Principles
- Balance
- Gradation and contrast
- Repetition and rhythm
Left aligned text is best practice as it creates an easy flow of reading as opposed to centre aligned text which has different distances required for eye movement. To check legibility, it is a good idea to read text out loud – this will highlight how well it flows or bring your attention to any issues. The designer’s job is to create a reading experience that is a joy, not a chore. Menu links should be written as the words, lowercase, as this is much easier to read due to our brains being able to recognise the shapes of letters, as opposed to uppercase which would just look like blocks and also doesn’t create a nice calm atmosphere as it is shouting at you.
White Space
- Never set the line height to 1 as it is proportional. It should be at least 1.3 and the default is 1.5
- Gestalt Theory – This is the whitespace within and around shapes that can influence how the audience might perceive our layouts.
- Proximity – Grouping elements together will imply a relationship between them so layout needs to be well thought through
- Justify-text means text uses both left and right alignment to create neat edges on both sides. However this isn’t good practice to use as it makes text look like a block and difficult to read. This also creates uneven word spacing that makes ‘white rivers’ appear and draw your focus. This is especially difficult for dyslexic people as it can have the appearance of motion.
- You should try to use as few fonts as possible but as many variants as you like.
- Kerntype – Spacing between letters.