Newly released PHP 5.4 is here with some new features. The most interesting one to me is the new CLI virtual server. Some other interesting features include: Default character set changed from ISO-8859-1 to UTF-8, shorter array syntax and traits for classes.
Traditional CSS font stacks work by accessing fonts (by name) that are installed on the user’s computer. If the font at the beginning of the stack isn’t installed, the browser will try to use the next font in the stack that is available. Remember to end your stacks with a generic keyword like serif, sans-serif, or monospace.
body {
font-family: georgia, serif;
}
h1, h2, p {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}
code {
font-family: "Courier New", courier, monospace;
}
A quick note: very few fonts common to most computers are optimized for screen display, and you should be particularly careful about the scale at which you set them. For instance, Bodoni and Baskerville have very thin strokes designed for print resolution; even the advanced anti-aliasing used by Mac OS X and Windows 7 won’t produce a good result if you set these fonts at 10px.
Cheat sheet: Verdana and Georgia are probably the best fonts that are both common to most Mac and Windows machines and are designed for screen. Thank you, Matthew Carter. Some would add Lucida Grande (or Lucida Console on Windows) to this list, but it doesn’t have real italics.
Here’s the comparison of commonly-used fonts I showed in class.
In the past two and half years, webfonts — that is, font files served from the server and loaded by the browser for a particular website — have gone from theory to reality. The major reasons have more to do with licensing deals than technological progress, but in any case, all the major browsers now support webfonts, though not all the same format. (All the good browsers use the emerging .woff file format, while IE requires a .eot file.)
Depending on licensing and the font vendor, you may end up hosting the font files on your own server or you may link to a font service’s CSS file or Javascript. (All webfont services/foundries will have instructions on how to do this embedding.) Once this basic embedding is done, you can then use straightforward CSS font stacks to assign elements your font choices. Note that good fonts have separate font files for bold and italic, so you may have to do this kind of thing to access the proper files:
body {
font-family: "FranklinGothic", arial, sans-serif;
}
body strong {
font-family: "FranklinGothic-Bold", arial, sans-serif;
font-weight: normal; /* prevent double-bolding */
}
body em {
font-family: "FranklinGothic-Italic", arial, sans-serif;
font-style:normal; /* prevent double-italicization */
}
Note that this makes fallbacks problematic, since if our webfont fails we can’t specifically fall back to an italic version of Arial.
The precise typographic results you get from a webfont — especially as regards anti-aliasing (blurriness) — can vary greatly depending on the care with which the service has constructed the webfont file. The web is filled with complaints about hastily converted fonts that show poor “hinting,” which is the process by which fonts should be customized to anti-alias well. The upshot: don’t buy a webfont from just anyone — use a respected service or foundry that has shown a commitment to quality.
Here are some of the higher quality places to start if you’re interested in using webfonts on a project:
In related news, Hoefler & Frere-Jones are supposedly launching their own webfont service sometime soon. At the moment they have two beta-testers: Jason Kottke and Barack Obama.
You can see any web site in wireframes. Maybe not so useful but it can give you an idea of how web sites are designed.
Load this on your browser tool bar and you can see the pixel width and height of your designs.
