A basic Web page is composed of HTML and CSS.
A basic Web page is composed of HTML and CSS.
HTML is just annotations around the text, describing its structure.
CSS is just annotations keyed off the HTML, describing its presentation.
Design for the Web is very different from design for Print.
You often don't have control over the content.
You almost never have control over the display size or orientation.
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
You don't even have actual control over the font face or size (as the user might have set a minimum, or the font loading may be turned off due to bad network connectivity or metering).
But with CSS, we can make designs that take whatever environment and content we have as input, and lay it out to fit perfectly. (Try resizing the page above!)
We can use content-, container-, and/or typeface-based sizing constraints, allowing the underlying alignment decisions of the typographer to be expressed regardless of screen size.
However, doing this requires us to have some accurate font metrics.
CSS uses OpenType metrics for the ascent and descent.
For underline and strikethrough position and thickness.
For superscript and subscript position and size.
For correct drop caps we need baselines and cap heights.
As well as other metrics for other writing systems.
But sometimes fonts don't give us correct metrics.
If the superscript metrics don't match the superscript glyphs, any synthesized missing glyphs look really awful.
A good underline offset helps us avoid problems like placing the line
right across the bottom edge of the descenders.
An incorrect cap height means our drop caps look bad.
Mismatched ascent and descent metrics across platforms
means designers are very upset when their page only works correctly on one OS.
