This week was all about typography and we learned how much of an important component of web design it is. We learned about how it is used to reinforce the meaning of text and is for the benefit of the reader, not the writer.
Typography is not just about chosing a typeface. It is about how that typeface is used in terms of size and colour, line height, letter and word spacing and general layout. All of these things can be controlled in CSS.
We learned about how you can access more fonts on the web with services like Google Fonts and Typekit. Google fonts are open source fonts so don’t require any other licences but other services may not be the same.
We then talked about how typefaces are classified. They are either serif or sans-serif, although there are other types that are less commonly used. They are also designed for body text or headings specifically . Google Fonts has 5 categories: Sans Serif, Serif, display, monospce and handwriting .
We compared print and online typefaces and how sceen typefaces have larger x-heights to improve how they render on screen and thus their readability.
We looked at choosing the appropriate typefaces for different situations and typeface combinations; how many to use and how to marry them up.
We then looked at how to use CSS can help or enhance typography on a website and the diffent selectors and pseudo selectors that can be used.
We discussed the different units that can be used icluding px and % and typographic units such as em and REM.
At the end of the class we completed a timed CSS type task where we took a section from Mike Chimero’s Designers Code of Ethics and put it into an html file and styled with CSS, thinking specifically about typogrphy. Here is what I produced: