Mark Boulton
Owner,
Mark Boulton Design
Richard Rutter
Production Dir,
Clearleft Ltd
Notes below are combination of my thoughts and paraphrasing.
Funny session. These guys are making fun of people who can’t bring themselves to use regular quotes, apostrophes, and proper hyphens, en dashes, em dashes, etc.
Here’s my point: We actually did this for a really long time at Hammock, but we’ve discovered that many RSS readers can’t make sense of html typography code.
A List Apart: Has typography details
Smarty Pants John Gruber
Goudy Old Style, Palatino, Book Antiqua: Say these fonts are on almost all computers.
Vertical rhythm: A description of how the words flow vertically down the page. Like regular intervals in music for instance. You need extra line height to ease online reading. What sort of formulas should you use to determine spacing?
Shows 12 px text, 18 px spacing. Line height of 1.5em.
Goes through a lot more math to determine CSS for a page….
Basic point: Start with your text size and work out your spacing, your header and subheader sizes and extra text sizes from that.
Spaces before and after lists help you process. Break out your lists with spacing, typeface or different margins to make them easier to read. Recommend going into left margin for lists instead of indenting, say it’s easier to read.
Says, people often go willy-nilly when designing online, but instead: Use golden ratio when designing: 1:1.68, round up to 2:3 for ease. Use to create a grid, and your white space will relate to your text size.
Now they’re getting into fonts. Woo-hoo!
Trashing the code written by Dreamweaver and other similar programs….when you get a list in the font-family tag like, verdana, arial, helvetica….Arial isn’t a nice sub for Verdana. Sizes are different, don’t look the same. In that case, take out Arial for sure.
Frutiger/Univers Helvetica Neue/Arial: Those are better subs for each other and are pretty common. Great point. I think we frequently feel constrained by type.
Loves the new Vista fonts. Calibri, Cambria, Candara, Constantia, Corbel. [Funny, why do they all start with C??] Will they, for instance, ship with next version of Mac Office? Unknown.
Great analogy: Shows the periodic table…pulls out gold with 79 protons. If you don’t put in all the details and special characters, you end up with something less.
What has gone wrong in our industry that attention to detail, the care, isn’t there in the digital medium? Answer: It’s all our fault. We all have to be responsible for it.
Giving props to Khoi Vinh and NY Times design: They do it right and take the extra step.
http://webtypography.net/sxsw2007/
{ 0 comments… add one now }