There’s been a welcome resurgence of curiosity in net typography over the previous 12 months or so, with many articles and convention talks providing strategies and principle. Regularly asserted is the notion that good typography requires correct management of font dimension and line-height. However that is the online: it’s a particular medium the place the reader can have as a lot management because the designer—the implication being that textual content on the internet, whereas bending to the designer’s will, should even be reliably resizable throughout browsers and platforms.
Article Continues Beneath
On this article, we are going to reconcile the designer’s requirement for accuracy with the consumer’s must resize textual content on demand, arriving at a greatest apply that satisfies designers and customers and works throughout browsers and platforms.
We’ll attain our vacation spot by the normal methodology of trial and error. With greater than a nod to Owen Briggs’s pioneering work of 2002, I’ve created a base case with six iterations and 161 screenshots. Comply with alongside, gained’t you?
The content material used for testing functions was a two-column structure with physique copy on the left and a sidebar on the precise. Textual content was set in Arial to assist consistency throughout working techniques and platforms.
The browsers used for testing had been Safari 2, Firefox 2 and Opera 9.5α working on Mac OS X Tiger, together with Web Explorer 6 (IE6) and Web Explorer 7 (IE7) working on Home windows XP with ClearType turned on. Clearly this isn’t an exhaustive record of browsers, working techniques, or rendering engines, nevertheless it covers nearly all of customers on the market right now.
Every working system and browser was run utilizing its default settings.
Each iteration was examined to see how every browser rendered textual content at smaller, medium, bigger, and largest sizes, together with 90%, 100%, 110%, and 120% web page zoom ranges, the place relevant.
First it was essential to confirm that browsers offered a constant baseline from which to start out. The bottom case reveals that in every browser, the default textual content dimension is persistently 16px when no types are utilized (aside from the browser defaults), and the textual content scales pretty persistently throughout the board.
Textual content dimension in pixels – iteration 1#section4
The default textual content dimension of the bottom case is an effective place to begin, however for most individuals (designers, purchasers, and their clients) 16px is simply too giant for physique textual content. In our instance, the physique textual content was diminished to 14px, with the sidebar set at 12px. This primary iteration does simply that, setting the fonts in pixels:
.bodytext p {
font-size:14px;
}.sidenote {
font-size:12px;
}
The result’s that Safari and Firefox nonetheless resize the textual content, whereas IE6 and IE7 don’t. The textual content could be resized in Opera and IE7 by utilizing the web page zoom software, which magnifies the web page structure, textual content and pictures inside.
Textual content dimension in ems – iteration 2#section5
Though browser market share differs from web site to web site, and browser share statistics are drawn in sand, it’s protected to say that IE6 continues to be utilized by many individuals. So setting textual content in pixels would depart many individuals no technique of resizing it. There’s additionally an argument that claims IE7 customers ought to have the ability to resize textual content with out being pressured to make use of the zoom management.
The subsequent unit to strive for textual content sizing is ems. The em is a real typographic unit, really helpful by the W3C, and affords a precision key phrases lack. Working from a default of 16px, the next types ought to give the specified textual content sizes:
.bodytext p {
font-size:0.875em; /* 16x.875=14 */
}.sidenote {
font-size:0.75em; /* 16x0.75=12 */
}
The outcomes present that, throughout all browsers, textual content on the medium browser setting is rendered identically to textual content set in pixels. It additionally demonstrates that textual content sized in ems could be resized throughout all browsers. Nonetheless IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized textual content.
Physique sized as share – iteration 3#section6
A repair to the exaggerated textual content resizing of IE6 and IE7 is to dimension the physique utilizing a share. So retaining the ems on our content material, the next types had been examined:
physique {
font-size:100%;
}.bodytext p {
font-size:0.875em;
}.sidenote {
font-size:0.75em;
}
The outcomes present that the distinction between bigger and smaller browser settings in IE6 and IE7 is now much less pronounced, which means we now have all browsers rendering textual content at an equivalent dimension on their medium setting, and resizing textual content persistently.
Setting line peak in pixels – iteration 4#section7
Current net typography articles corresponding to “Setting Sort on the Internet to a Baseline Grid” (A Checklist Aside, April 2007) stress that good typography requires a vertical grid, that’s to say a stable vertical rhythm achieved with a constant, measured line-height. The important thing implication is that line-height must be the identical whatever the dimension of the textual content (in order that line-height, or the vertical grid, stays constant, no matter font dimension).
For our instance, an acceptable line-height is 18px, so that’s added to the physique as follows:
physique {
font-size:100%;
line-height:18px;
}.bodytext p {
font-size:0.875em;
}.sidenote {
font-size:0.75em;
}
The outcomes present that the 18px line-height is inherited by all textual content on the web page—be aware how the sidebar textual content has the identical common rhythm because the physique copy. Specifying a unit (on this case, px) when setting the line-height permits the worth to be inherited all through the web page. If a unitless line-height had been specified, the multiplier would have been inherited, leading to line-heights being rendered proportionally to the textual content dimension, thus breaking the vertical rhythm.
Sadly the outcomes present that the 18px line-height will not be scaled by IE6 and IE7 when textual content is resized, which means the biggest setting seems to squash the textual content.
Setting line peak in ems – iteration 5#section8
When pixels failed earlier than, we turned to ems. Repeating the logic offers us the next types:
physique {
font-size:100%;
line-height:1.125em; /* 16×1.125=18 */
}.bodytext p {
font-size:0.875em;
}.sidenote {
font-size:0.75em;
}
The outcomes present correct, persistently resized textual content and line-height throughout all browsers. Good. Or practically so.
The Safari monospace downside – iteration 6#section9
The observant amongst you will have observed a wee glitch within the Safari screenshots: the monospaced font included within the physique textual content is rendered inconsistently. For textual content set in pixels, Safari renders the monospaced font on the identical dimension because the proportional-width textual content surrounding it. When textual content is ready in ems, nonetheless, Safari renders monospace textual content a lot smaller than the encircling textual content. The inconsistency seems to stem from Safari’s default textual content sizes, that are 16px for “customary fonts” and 13px for “fixed-width fonts.” Safari 3α on OS X doesn’t seem to undergo from this downside.
You might resolve that undersized monospace textual content in Safari is one thing you and your readers can reside with, and as Safari 3 is included in OS X Leopard and the newest replace to Tiger, it is not going to be lengthy till the issue just about disappears. For the nervous management freak who can’t wait, an alternate repair is to ship textual content sized in pixels to Safari.
The next code appends a downlevel-revealed conditional remark to our types, in order that pixels are despatched to all browsers besides IE6 and IE7 (be aware the [if !IE] syntax, instructing IE/Win to disregard the markup that follows).
<type kind="textual content/css">
physique {
font-size:100%;
line-height:1.125em;
}.bodytext p {
font-size:0.875em;
}.sidenote {
font-size:0.75em;
}
</type><!--[if !IE]>--><type kind="textual content/css">
physique {
font-size:16px;
}
</type><!--<[endif]-->
The outcomes present persistently resized textual content and line-height throughout all browsers, together with the monospaced textual content in Safari 2.
Conditional feedback are controversial, with many detractors and proponents, however I consider the strategy is suitable on this case, as we’re utilizing a browser function (conditional feedback) to work round a browser behaviour (non-resizing of pixels). It also needs to be famous that, for the sake of readability, the code listed above presents CSS guidelines inside type components; greatest apply would dictate using linked type sheets as a substitute.
Our process was to discover a solution to dimension textual content that permits designers to retain correct management of typography, with out sacrificing the consumer’s means to regulate his or her studying surroundings. We examined varied items throughout frequent browsers. Sizing textual content and line-height in ems, with a share specified on the physique (and an elective caveat for Safari 2), was proven to supply correct, resizable textual content throughout all browsers in frequent use right now. This can be a approach you’ll be able to put in your equipment bag and use as a greatest apply for sizing textual content in CSS that satisfies each designers and readers.
Addendum#section11
Ems could be difficult to work with, particularly when nesting components deeply, as it may be onerous to maintain observe of the maths. Nonetheless, commenting your type sheets nicely and styling components from the physique inwards can maintain issues simpler to comply with. This extra advanced instance and its accompanying type sheet display easy methods to dimension nested components utilizing the physique as the place to begin.