design3

Recommendations

Info

122 The Principles of Beautiful Web Design those of us who know the nuances of other sans-serif fonts like Helvetica Neue, Futura, and Univers, using one of the safe fonts can be like using a screwdriver to drive in a nail. Fortunately, the font-family property of CSS allows you to choose multiple fonts in order of preference. This is referred to as a font stack. If the first font is unavailable, the second font will be used; if the second font is absent, the third font will be used, and so on. Let’s say that you want your section headlines to have a serif font. You think the best font for the job is Calisto MT, so you specify that first—for the few people that have it installed. Your second choice is your first backup plan, and for this you choose Georgia. If users don’t have Calisto MT installed, they’ll see Georgia. Even though Georgia is on the safe list, some people may not have it installed. Times New Roman is a close equivalent, so you decide that you might as well add it as your next alternative. To finish off the preferential list, to cater to users who don’t have any of those fonts installed, you add what the W3C calls a generic font family. The generic font families are serif, sans-serif, cursive (similar to script or hand lettering), fantasy (or novelty), and monospace. All your font choices so far have been from the serif family, so that’s the generic family you specify. In summary, your font stack would look like this: font-family: 'Calisto MT', Georgia, 'Times New Roman', serif; Fonts with Spaces Remember that any font family names that include spaces must be quoted, either using single (') or double (") quotes. The key to creating an effective font stack is knowing which fonts are most similar and, more importantly, which ones are installed by default in each operating system. For a handle on the first part, I recommend reading Nathan Ford’s 2008 article, “Building Better Font Stacks.” 2 A great resource for checking on the prevalence of specific fonts in various operating systems is Code Style’s interactive Font Stack Builder. 3 2 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ 3 http://www.codestyle.org/servlets/FontStack
Typography 123 Web Fonts with @font-face Jason Cranford Teague, the author of Fluid Web Typography, 4 recently asked in a presentation, “What do these three things have in common: flying cars, trips to Jupiter, and downloadable web fonts?” The answer is that we were supposed to have them all by the year 2010. What Teague was talking about was the ability to display text on a website using fonts not installed on the visitor’s computer. A mechanism for doing just that has been a part of CSS since 1998. It’s called @fontface, and it works like this: @font-face { font-family: "League Gothic"; src: url("/type/league_gothic.otf") format("opentype"); } h1 { font-family:"League Gothic", Arial, sans-serif; } If you’re familiar with CSS, the syntax of @font-face is brilliantly self-explanatory. We’re simply defining a URL where the font family League Gothic can be found. Once that’s established, you list it in your font stack the same way you would any other font. So why haven’t we been using this all along? The two main roadblocks have been resistance from font foundries, and inconsistencies in supported font formats. The resistance from the foundries is understandable. They make their money through licensing the use of their fonts, so want to deter people from downloading, copying, and using them for free. The licenses that protect these fonts usually don't allow for use of their fonts on the Web. Always be sure to read the license and usage guidelines. The file format part of the story is a little messier. Some browsers support the TTF and OTF formats, iOS devices (such as the iPhone and iPad) require SVG, Internet Explorer only uses Microsoft’s proprietary EOT format, and to cap it all off there’s an up-and-coming open source format (WOFF) that’s supported by the very latest versions of most browsers. Over the last few years, though, the technical issues with embedding fonts have been overcome. This led to a huge explosion in commercial-use free fonts, which, in turn, forced the foundries to reconsider their position on licensing fonts for embedding. Unfortunately, though, it looks like we’ll have to wait a long while yet for flying cars and trips to Jupiter. Self-hosted Web Fonts Because of the difference in required formats, you can’t just toss a TTF file into a folder on your site and link to it as I suggested in the simplified @font-face code above. What’s more, doing so would most likely violate your End User Licensing Agreement (EULA) with the font’s foundry. If 4 Berkeley: New Riders, 2009
Page 1:
Summary of Contents Preface . . . .
Page 4 and 5:
iv The Principles of Beautiful Web
Page 7 and 8:
Table of Contents Preface . . . . .
Page 9 and 10:
ix Color Scheme Designer 3 . . . .
Page 11:
xi Creative Image Treatments . . .
Page 14 and 15:
xiv bathroom with the work that we
Page 16 and 17:
xvi Tips, Notes, and Warnings Hey,
Page 18 and 19:
2 The Principles of Beautiful Web D
Page 20 and 21:
Page 22 and 23:
Page 24 and 25:
Page 26 and 27:
10 The Principles of Beautiful Web
Page 28 and 29:
Page 30 and 31:
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 40 and 41:
Page 42 and 43:
Page 44 and 45:
Page 46 and 47:
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Page 54 and 55:
Page 56 and 57:
Page 58 and 59:
Page 60 and 61:
Page 62 and 63:
Page 65 and 66:
2 Chapter Color Whether you’re de
Page 67 and 68:
Color 51 reason, it’s often used
Page 69 and 70:
Color 53 Figure 2.5. Calming stones
Page 71 and 72:
Color 55 Figure 2.7. These wind tur
Page 73 and 74:
Color 57 Chromatic Value The measur
Page 75 and 76:
Color 59 Figure 2.12. The tradition
Page 77 and 78:
Color 61 thick that you’re unable
Page 79 and 80:
Color 63 Another example of saturat
Page 81 and 82:
Color 65 An Analogous Color Scheme
Page 83 and 84:
Color 67 Figure 2.22. Blinksale’s
Page 85 and 86:
Color 69 put off by the stark contr
Page 87 and 88: Color 71 Figure 2.27. Cross Cross C
Page 89 and 90: Color 73 Figure 2.30. The Bulls+Arr
Page 91 and 92: Color 75 Figure 2.34. The adventuro
Page 93 and 94: Color 77 Table 2.1. Counting from 1
Page 95 and 96: Color 79 Scheme Designer 3 works. U
Page 97 and 98: Color 81 Figure 2.39. Pictaculous C
Page 99 and 100: Color 83 Figure 2.41. A mood board
Page 101 and 102: 3 Chapter Texture There are many we
Page 103 and 104: Texture 87 Figure 3.2. The A-Team b
Page 105 and 106: Texture 89 Figure 3.5. Geometric an
Page 107 and 108: Texture 91 Rounded Corners So we’
Page 109 and 110: Texture 93 Figure 3.10. Ithaca Even
Page 111 and 112: Texture 95 Figure 3.12. Speed Kids
Page 113 and 114: Texture 97 Figure 3.14. Perspective
Page 115 and 116: Texture 99 Figure 3.17. A clear and
Page 117 and 118: Texture 101 Although repetitious ba
Page 119 and 120: Texture 103 declaration background-
Page 121 and 122: Texture 105 Figure 3.25. Three repe
Page 123 and 124: Texture 107 Figure 3.27. Team Fanny
Page 125 and 126: Texture 109 said, just because you
Page 127 and 128: Texture 111 This site certainly fal
Page 129 and 130: Texture 113 Another notable example
Page 131 and 132: Texture 115 Figure 3.36. Minimalism
Page 133: Texture 117 Figure 3.38. The site d
Page 136 and 137: 120 The Principles of Beautiful Web
Page 188 and 189:
Page 190 and 191:
Page 192 and 193:
Page 194 and 195:
Page 196 and 197:
Page 198 and 199:
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206:
show all

design3

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?