For homework this week read the article What is Typesetting? published on alistapart.com.
What is A List Apart, you may be wondering? according to Wikipedia “A List Apart is a webzine that explores the design, development, and meaning of web content, with a special focus on web standards and best practices. You can think of A List Apart as the leading voice of professional web developers. The online magazine is the brain child of Jeffrey Zeldman, one of the pioneers of the Web Standards movement and a general hero to all modern web developers / designers.
The article will be good food for thought while you are working on you HTML resume. As you’re working on your resume, think about the tags you are using, and how they can form the basis for the visual hierarchy on your page. As designers and typographers adding visual hierarchy into typographic layouts is one of your most powerful tolls, and as designers writing code you can build that hierarchy into the the structure of your code. Once a solid foundation is laid, you can then rapidly try out and apply different typographic treatments, in a way that actually easier and more intuitive than with traditional deign tools. Unlike Illustrator, where updating a text based layout could potentially require selected every text element, or carefully managing charter sales, in HTML you just write rules for how you want each element to look and they are instantly applied across the whole layout.
If you have a few heading that you want to have the same style throughout your documents make them all < h1 > tags, if you have a few sub heading styles make them all < h2 > and < h3 >. As a designer at first it, can seem weird to write CSS code for how things should look, but when you use design tools like XD and make style selections from the properties panel, you are using a visual tool to accomplish the same thing.
For example, this simple XD document has two typographic elements, with two charter styles assigned to them, just like you would in Illustrator or Indesign.
These familiar character styles set in the TEXT properties panel can be exported from the Share panel into a format that developers can translate directly into css code:
Here’s that same set of styles, written as CSS: