This link has been bookmarked by 98 people . It was first bookmarked on 20 Nov 2007, by Christy Tucker.
-
21 Sep 09
-
10 Aug 09
-
19 Jul 09
-
06 Jul 09
-
23 Jun 09
-
Richard SheppardThe Drupal Zen theme uses this as the basis for font calculation.
-
25 May 09
-
21 May 09
-
27 Apr 09
-
10 Apr 09
-
07 Apr 09
-
05 Apr 09
-
29 Mar 09
-
24 Mar 09
-
18 Mar 09
Peter JacobsonA better best practice for sizing type in CSS.
-
27 Feb 09
-
Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms.
-
Text size in pixels – iteration 1
The default text size of the base case is a good starting point, but for most people (designers, clients, and their customers) 16px is too large for body text. - 9 more annotations...
-
-
The result is that Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.
-
Text size in ems – iteration 2
-
The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.
-
Body sized as percentage – iteration 3
-
The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.
-
Setting line height in pixels – iteration 4
-
Setting line height in ems – iteration 5
-
The Safari monospace problem – iteration 6
-
For text set in pixels, Safari renders the monospaced font at the same size as the proportional-width text surrounding it. When text is set in ems, however, Safari renders monospace text much smaller than the surrounding text. The inconsistency appears to stem from Safari’s default text sizes, which are 16px for “standard fonts” and 13px for “fixed-width fonts.” Safari 3α on OS X does not appear to suffer from this problem.
-
-
-
26 Feb 09
-
18 Feb 09
-
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today
-
-
15 Feb 09
-
30 Dec 08
-
06 Nov 08
-
-
-
28 Oct 08
Terry McCallIn this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.
We’ll reach our destination -
15 Oct 08
E Barneya bit dated, but a nice explanation of the differences in browsers and font sizing options
-
07 Oct 08
-
21 Sep 08
-
19 Sep 08
-
07 Jul 08
-
30 Jun 08
-
19 Jun 08
-
25 May 08
-
21 May 08
applejackie87This is a way to size text that can be seen similarly from any internet browser. I hope to try this instead of having to deal with all the different versions of percentages etc. HTML dog also talks about sizing fonts, but this seems to sum up the most efficient code in a sentence.
"Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. "css code hmtl line height ems percentage body cross-browsers
-
29 Apr 08
Clint LalondeA rather technical, but detailed, dissection of the difference between ems, pixels, % for sizing text
-
23 Apr 08
-
16 Apr 08
-
08 Apr 08
-
05 Apr 08
-
31 Mar 08
-
27 Mar 08
-
20 Mar 08
-
13 Mar 08
Denis De Mesmaekerdefine font-size as 100% in style "body" use em relative to 16px=1em
-
03 Mar 08
-
31 Jan 08
-
28 Jan 08
-
25 Jan 08
-
Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms.
-
it’s safe to say that IE6 is still used by many people. So setting text in pixels would leave many people no means of resizing it. There’s also an argument that says IE7 users should be able to resize text without being forced to use the zoom control.
- 6 more annotations...
-
-
across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers.
-
A fix to the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage.
-
good typography requires a vertical grid, that is to say a solid vertical rhythm achieved with a consistent, measured line-height. The key implication is that line-height should be the same regardless of the size of the text (so that line-height, or the vertical grid, remains consistent, regardless of font size)
-
Safari renders monospace text much smaller than the surrounding text. The inconsistency appears to stem from Safari’s default text sizes, which are 16px for “standard fonts” and 13px for “fixed-width fonts.” Safari 3α on OS X does not appear to suffer from this problem.
-
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
-
This more complex example and its accompanying style sheet demonstrate how to size nested elements using the body as the starting point.
-
-
-
15 Jan 08
-
14 Jan 08
-
20 Dec 07
-
A fix to the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage. So retaining the ems on our content, the following styles were tested:body {
font-size:100%;
}
.bodytext p {
font-size:0.875em;
}
-
-
16 Dec 07
-
13 Dec 07
-
Howard KeziahThe sheer number of aging boomers make attention to this issue essential. I had an eye exam today and the effects of pupil dilation are still with me. I had to increase font size on my browser in order to work at all tonight. I'm amazed at the number of sites that completely screw up when you increase the font size.
-
retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment
-
-
09 Dec 07
-
04 Dec 07
-
03 Dec 07
-
02 Dec 07
-
01 Dec 07
-
30 Nov 07
-
29 Nov 07
-
28 Nov 07
-
27 Nov 07
-
26 Nov 07
-
25 Nov 07
-
24 Nov 07
-
23 Nov 07
-
22 Nov 07
-
21 Nov 07
-
-
The default text size of the base case is a good starting point, but for most people (designers, clients, and their customers) 16px is too large for body text.
-
-
Will BoltonGood stuff from Richard Rutter. Terrible author photo though - makes him look really smug and superior, which I'm sure he's not.
-
20 Nov 07
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.