Web Typography

Transcript

1. Web Typography Monday, 21 May, 12
2. Font basics Terminology Monday, 21 May, 12
3. Monday, 21 May, 12
4. Monday, 21 May, 12
5. Monday, 21 May, 12
6. Monday, 21 May, 12
7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus tellus eu justo elementum vehicula. In eu eros est, aliquam tincidunt lorem. Aliquam erat volutpat. Nullam malesuada dignissim felis. Etiam magna felis, rhoncus id hendrerit eget, porttitor et elit. Phasellus porta luctus felis ac commodo. Etiam et velit sit amet nunc ultricies gravida. Pellentesque accumsan, tortor eu auctor luctus, dui nisi porttitor augue, vel venenatis est purus nec elit. Nunc luctus vehicula nisl, at luctus est sollicitudin vitae. Monday, 21 May, 12
8. Monday, 21 May, 12
9. Monday, 21 May, 12
10. Technical Web Typography Monday, 21 May, 12
11. html { font-family: sans-serif; /* Serve the machine’s default sans face. */ background: #fff; color: #333; } serve Helvetica to Macs and Arial to PCs Monday, 21 May, 12
12. Ideal line length, or “measure.” “anything from 45 to 75 characters is widely regarded as a satisfactory length of line….” Robert Bringhurst writes in The Elements of Typographic Style Monday, 21 May, 12
13. Monday, 21 May, 12
14. Vertical Rhythm: Setting A Baseline /*--- HEADINGS ---*/ h1, h2, h3, h4, h5, h6 { margin-bottom: 24px; font-weight: bold; } h1 { font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */ line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */ } h2 { font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */ line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */ } h3 { font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */ line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */ } h4 { font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */ line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */ } h5, h6 { font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */ line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */ } Monday, 21 May, 12
15. (magic number) ÷ (font size) = (line height) Monday, 21 May, 12
16. Monday, 21 May, 12
17. Monday, 21 May, 12
18. http://www.webtypography.net/toc/ Monday, 21 May, 12