webmonkey/design/

Sizing Up the Browsers
by Steve Mulder and Michael Brandt

When you're creating a Web page, size matters. There's limited space to work with, and page elements take up standard amounts of space. It's a land of constraints, and you've got to know the rules before you get started.

Unfortunately, the browser makers have been naughty, so the rules aren't simple. Each Web browser has its own playing field with its own quirks. If we don't get to know every one of these playing fields, then our pages might very well look crappy in some browser.

The purpose of this quick reference is to collect everything you need to know about the spatial aspects of the major browsers.

Here's what we'll be looking at:

After looking at the browser stats at StatMarket, we decided to focus on the following browsers: Let the data begin.

Offset
As we all know, when you slap something into a Web page, it doesn't appear right next to the edge of the Web browser window. There's always a buffer between the window edge and the object. Unfortunately, this buffer isn't always the same, as the table below shows.

Key:
IE = Microsoft Internet Explorer
NN = Netscape Navigator (Communicator)
Win = Windows (98, 95, NT)
Mac = Macintosh


Browser


Horizontal
offset



Vertical
offset



IE 5.x (Win)

10

15

NN 4.x (Win)

8

8

NN 4.x (Mac)

8

8

IE 4.x (Win)

10

15

IE 4.x (Mac)

8

8

NN 3.x (Win)

10

15

NN 3.x (Mac)

8

8

IE 3.x (Win)

10

16

IE 3.x (Mac)

8

8
Measurements in pixels

Of course, there is a way to override the default browser offset:

<BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>
Using these attributes on the <BODY> tag means that your horizontal and vertical buffers will become zero. The bad news is that this does not work in Navigator 3.x, so you'll still have the default offset in that browser.

Offset is easy compared with the next topic — canvas size.

Canvas Size
"To what size should I design my page?"

It's the eternal question. Since the time of Aristotle, the great debate has raged: How wide should Web page content be?

We're not here to help you decide between 640-by-480-dpi and 800-by-600-dpi resolutions (StatMarket might help). We're here to help you after you've made up your mind.

The table further down on this page shows the maximum canvas sizes you have at your disposal for each resolution. These measurements were taken with the browsers in their default states after installation — that is, with all those annoying toolbars showing. Remember that many people aren't as smart as you are: They never turn those things off and are thus browsing the Web through very small windows. In our tests the Microsoft Windows taskbar at the bottom of PC screen was visible.

The horizontal size is what you can get with the browser window maximized on the screen. If the width gets any bigger, you'll get an ugly horizontal scrollbar or your content won't be visible to users. The vertical size measures the amout of space "above the fold" — that is, what users can see without scrolling down.

See the diagram below for the canvas size of an example browser at 640 by 480 dpi:

canvas example
Click for full-sized image

The area in blue is the canvas.

Note that these canvas size measurements do not include the browser offsets we saw on the previous page. In every major browser except Navigator 3.x, you can increase your canvas size slightly by eliminating the offset buffer.

Let's look at the numbers....


Browser


640x480
width



640x480
height



800x600
width



800x600
height



IE 5.x (Win)

600

275

760

395

NN 4.5+ (Win)

604

294

764

414

NN 4.0x (Win)

604

294

764

414

NN 4.5+ (Mac)

592

309

752

429

NN 4.0x (Mac)

582

315

742

435

IE 4.x (Win)

600

275

760

395

IE 4.5x (Mac)

563

318

723

438

IE 4.0x (Mac)

574

321

734

441

NN 3.x (Win)

600

270

760

390

NN 3.x (Mac)

582

306

742

426

IE 3.x (Win)

613

276

763

396

IE 3.x (Mac)

598

317

758

437
Measurements in pixels

Here's a highly annoying complication: When Microsoft Office is installed on a PC, the Office taskbar is automatically added to the right edge of the desktop. It's 43 pixels wide, which makes the overall canvas width 43 pixels less than what is listed above. And a lot of people have Microsoft Office. (By the way, if users move the Office taskbar from the right edge of the screen to the bottom edge, it takes up 32 pixels of canvas height instead.)

Our conclusion: Ugh. It's not a pretty sight. There are lots of different numbers. It's not immediately clear which width and height you should design pages for.

Our recommendations

After analyzing the numbers and taking the Office taskbar into account, we have a few recommendations based on different scenarios.


Scenario
designed for



640x480
width



640x480
height



800x600
width



800x600
height



All browsers, both platforms (with MS Office taskbar)

557

270

717

390

All browsers, both platforms (with MS Office taskbar) — ugly horizontal scrollbar showing or no right-hand offset in NN & IE

567

270

727

390

All browsers, both platforms (no MS Office taskbar)

563

270

723

390

All browsers, both platforms (no MS Office taskbar) — ugly horizontal scrollbar and no right-hand offset in Mac IE 4.5

574

270

734

390

4.0+ browsers, PC platform (no MS Office taskbar)

600

275

760

395
Measurements in pixels

Playing it safe with the first recommendation means a relatively small canvas, but at least you'll be sure everyone can see your content!

Notes:

In summary, there are no easy answers about canvas size. But we hope that the recommendations above will give you a place to start.

Photoshop mock-ups

When designing Web pages, we always do mock-ups in Photoshop. Design first, code later. What this means is that our Photoshop mock-ups need to look exactly like what the pages will ultimately look like in the browser. Well, because of browser inconsistencies, they'll never look exactly the same, but it's important to get them as close as possible.

For that reason, we always include the browser "chrome" (the buttons, scrollbar, and other parts of the browser software that frames the page) in the Photoshop mock-up. We thought we'd provide these Photoshop files for download here:

Enjoy.

Text Size
What else do you need to know to mock up Web pages in Photoshop? The size, tracking, and leading of text are key. Specifically, you need to know the size of HTML text at the seven standard font sizes. More specifically, you need those seven font sizes for all the core Web fonts in each of the major browsers.

Quick definitions:
Size = type size in points
Tracking = Photoshop's term for letter spacing
Leading = the vertical space between lines of text (in points)

As it turns out, there's hardly any variation in text size between browsers. The big difference is between platforms, which is why you'll find one table for Windows and one for Macintosh below. For each font at each of the seven standard HTML text sizes, you'll find, in this order: text size, leading, and tracking. So, a value of "9, 10, 20" stands for 9-point text with leading set to 10 and tracking set to 20.

Note: For creating mocked-up HTML text in Photoshop, remember to turn off antialiasing!

OK, here come the reams of data....


Macintosh

<FONT SIZE="...">

Font face


1


2


3


4


5


6


7


Arial

10
10
-15


10
11
15


12
14
0


14
16
0


18
20
0


24
27
0


36
40
0


Arial Black

9
13
0


10
14
10


12
17
0


14
19
0


18
26
0


24
32
5


36
51
0


Comic Sans

9
13
10


10
14
10


12
17
10


14
19
10


18
24
-10


24
33
0


36
50
0


Courier

9
10
-15


11
11
-20


12
12
-20


14
14
-15


19
18
-15


24
24
-10


36
36
10


Courier New

9
10
-40


10
12
-35


13
14
-35


14
16
-25


18
20
10


24
27
-10


36
41
0


Georgia

9
10
30


10
11
50


12
14
30


14
16
10


18
21
0


24
28
0


36
40
0


Helvetica

9
10
15


10
11
0


12
13
10


13
14
25


18
18
10


24
25
-10


35
36
10


Impact

9
11
0


10
12
0


12
15
0


14
17
-10


18
22
-10


24
29
-10


36
44
0


Times

8
10
65


10
11
10


12
12
-10


14
15
0


17
18
25


23
24
25


35
36
20


Times New Roman

9
10
20


10
11
10


12
13
10


14
15
10


18
20
5


24
26
0


36
40
0


Trebuchet

9
10
40


10
11
0


12
14
10


14
16
10


18
21
-10


24
28
0


36
42
0


Verdana

10
11
0


10
12
50


12
15
20


14
17
0


18
22
-10


24
29
-10


36
43
0

Point size, leading, tracking



Windows

<FONT SIZE="...">

Font face


1


2


3


4


5


6


7


Arial

10
13
20


13
16
10


16
18
-15


18
21
0


24
27
0


32
36
0


48
55
0


Arial Black

10
14
10


13
18
0


16
23
5


18
25
0


24
33
0


32
45
0


48
68
0


Comic Sans

9.5
14
25


13
18
-5


16
23
-10


18
24
-15


24
32.5
-2


31.5
45
10


48
67
0


Courier

13
13
20


14
13
-30


16
16
-30


17
17
-70


21
20
-20


32
32
-40


49
48
-40


Courier New

10
10
4


14
15.5
-35


16
17.5
30


18
19.5
14


24
27
-15


31.5
36
5


48
50
5


Georgia

9.5
13
70


14
15.5
0


16
17.5
5


18
21
-5


24
28.5
0


31.5
38
10


48
56
0


Helvetica

10
13
25


13
16
10


16
17
-10


18
25
0


23.5
27
0


31.5
35
0


48
55
0


Impact

9.5
14
26


13
17
5


16
21
-5


18
22
-15


24
28.5
-12


31.5
40
5


28
60
0


Times

10
12
15


13
15
0


16
19
-30


18
20
0


24
27
0


31
36
0


48
55
0


Times New Roman

10
12
20


12
15
30


14
19
15


17
20
20


23
27
10


31
36
0


48
55
0


Trebuchet

9.5
15
23


13
17.5
10


16
21.5
5


18
22.5
-8


24
28.5
0


31.5
40
10


48
61
-5


Verdana

9.5
10
80


13
15.5
0


16
17.5
25


18
22
-5


24
28.5
-10


31.5
38
10


48
60
0

Point size, leading, tracking

Note: Fonts with similar names have slightly different measurements, which is why they're listed separately. (Times and Courier are native to the Mac; Times New Roman and Courier New are native to Windows.)

OK, let's end by looking at form elements.

Form Elements
If you like control, then we have one piece of advice: Before designing pages with forms, take a deep breath, because it won't be a joyous experience. Form elements don't like to be tamed. Depending on the browser being used, form elements will vary in size, spacing, and typography.

This page has two purposes:

Note: We looked at form elements that had no font or style applied to them (e.g., <FONT SIZE>). Most browsers don't accept fonts or styles applied to forms anyway, and those that do behave inconsistently. In general, avoid applying fonts and styles to forms.

To come up with the information below, we took screen shots of the key form elements in all the major browsers. We thought it might come in handy for you to have those files so when you're doing a Photoshop mock-up of a Web page with a form, you'll have real form elements to use. We also threw in the default cursors (the arrow pointer and the pointing hand) for every major browser. Download the zipped Photoshop file with these pieces and parts from all the browsers.


RADIO BUTTONS


Browser


Height


Width


Space after


IE 5.x (Win)

11

11

5

NN 4.x (Win)

11

11

6

NN 4.x (Mac)

12

12

5

IE 4.x (Win)

11

11

5

IE 4.x (Mac)

12

12

5

NN 3.x (Win)

11

11

6

NN 3.x (Mac)

12

12

4

IE 3.x (Win)

11

11

7

IE 3.x (Mac)

12

12

7
Measurements in pixels

"Space after" is the number of pixels measured horizontally between the radio button and the text associated with it. It assumes that the text is on the same line as the radio button in the code (some browsers insert additional space if the code contains a line break).

The bottom line: Radio buttons are fairly consistent. If your page has radio buttons, the text size has greater impact on the design than the radio buttons do.


CHECKBOXES


Browser


Height


Width


Space after


IE 5.x (Win)

12

12

5

NN 4.x (Win)

12

12

6

NN 4.x (Mac)

12

12

7

IE 4.x (Win)

12

12

5

IE 4.x (Mac)

12

12

5

NN 3.x (Win)

12

12

6

NN 3.x (Mac)

12

12

6

IE 3.x (Win)

12

12

6

IE 3.x (Mac)

14

14

6
Measurements in pixels

"Space after" is the number of pixels measured horizontally between the checkbox and the text associated with it. It assumes that the text is on the same line as the checkbox in the code (some browsers insert additional space if the code contains a line break).

The bottom line: Checkboxes are fairly consistent. If your page has checkboxes, the text size has a greater impact on the design than the checkboxes do.


TEXT INPUT FIELDS


Browser


Height


Width at
SIZE=20



IE 5.x (Win)

21

152

NN 4.x (Win)

24

169

NN 4.x (Mac)

16

126

IE 4.x (Win)

21

152

IE 4.x (Mac)

15

123

NN 3.x (Win)

24

154

NN 3.x (Mac)

16

126

IE 3.x (Win)

22

119

IE 3.x (Mac)

15

123
Measurements in pixels

The largest values are in bold. Your design should accommodate the largest text input field.

The bottom line: Make sure to test your page in Navigator 4.x (Windows).


TEXT AREAS


Browser


Height
(default)



Height at
ROWS=2



Height at
ROWS=3



Width at
COLS=20



IE 5.x (Win)

37

37

53

181

NN 4.x (Win)

48

64

80

184

NN 4.x (Mac)

38

50

62

150

IE 4.x (Win)

37

37

53

181

IE 4.x (Mac)

54

28

41

139

NN 3.x (Win)

48

64

80

184

NN 3.x (Mac)

38

50

62

150

IE 3.x (Win)

77

51

64

99

IE 3.x (Mac)

15

28

41

123
Measurements in pixels

The largest values are in bold. Your design should accommodate the largest text area.

To get the heights for text areas with more than three lines of text, simply use the difference between the ROWS=2 column and the ROWS=3 column as the increment.

The bottom line: Make sure to test your page in Navigator 4.x (Windows). Also, always define the number of rows so you can avoid the large default height of IE 3.x (Windows).


PULL-DOWN MENUS


Browser


Height


Relative
width



Font, point size, tracking


IE 5.x (Win)

21

 

Arial 13/0

NN 4.x (Win)

21

 

Arial 13/0

NN 4.x (Mac)

18

 

Times 11.5/10

IE 4.x (Win)

21

 

Arial 13/0

IE 4.x (Mac)

18

 

Charcoal 12/30

NN 3.x (Win)

23

 

Arial 13/0

NN 3.x (Mac)

18

widest

Times 11.5/10

IE 3.x (Win)

20

 

Arial 13/0

IE 3.x (Mac)

17

 

Times 11.5/10
Measurements are in pixels except where noted.

The largest values are in bold. Your design should accommodate the largest pulldown menu.

The width of a pulldown menu depends on the longest line of text within it, so there's no way to list default values here. We simply noted the browser with the widest pulldown menu.

Note: Charcoal is a core system font for the latest version of the Mac OS. Older Mac OS versions use different fonts.

The bottom line: Be sure to test your page in Navigator 3.x (Windows and Mac).


MULTIPLE SELECTIONS


Browser


Height at
SIZE=2



Height at
SIZE=3



Relative
width



Font, point size, tracking


IE 5.x (Win)

38

54

 

Arial 13/0

NN 4.x (Win)

38

54

 

Arial 13/0

NN 4.x (Mac)

26

38

widest (tie)

Courier 10.5/-30

IE 4.x (Win)

38

54

 

Arial 13/0

IE 4.x (Mac)

26

38

 

Times 11.5/10

NN 3.x (Win)

38

54

 

Arial 13/0

NN 3.x (Mac)

26

38

widest (tie)

Courier 10.5/-30

IE 3.x (Win)

32

45

 

Arial 13/0

IE 3.x (Mac)

26

38

 

Times 11.5/10
Measurements are in pixels except where noted.

The largest values are in bold. Your design should accommodate the largest multiple-selection box.

The width depends on the longest line of text, so there's no way to list default values here. We simply noted the browsers with the widest multiple-selection box.

To get the heights for multiple-selection boxes with more than three lines of text, simply use the difference between the SIZE=2 column and the SIZE=3 column as the increment.

The bottom line: Be sure to test your page in IE 5.x (Windows) and Navigator 4.x (Mac).


SUBMIT BUTTON


Browser


Height


Width


Font, point size, tracking


IE 5.x (Win)

24

61

Arial 13/0

NN 4.x (Win)

23

61

Arial 13/0

NN 4.x (Mac)

20

50

Times 11.5/10

IE 4.x (Win)

24

61

Arial 13/0

IE 4.x (Mac)

20

54

Charcoal 12/30

NN 3.x (Win)

24

61

Arial 13/0

NN 3.x (Mac)

20

50

Times 11.5/10

IE 3.x (Win)

23

72

Arial 13/0

IE 3.x (Mac)

18

54

Charcoal 12/30
Measurements in pixels except where noted

The largest values are in bold. Your design should accommodate the largest Submit button.

The width here assumes you're using the common text in the button Submit. If you're using different text, obviously the width value will be different.

Note: Charcoal is a core system font for the latest version of the Mac OS. Older Mac OS versions use different fonts.

The bottom line: Be sure to test your page in IE 5.x (Windows) and IE 3.x (Windows).


We hope you come away from this article with two opinions:

Because, yes, size does matter.



Steve Mulder and Michael Brandt know the value of a pixel. Steve is a senior consultant at TSDesign, an Internet strategy and design firm in Boston. He is the author of Web Designer's Guide to Style Sheets. Michael Brandt is the interface design director for TSDesign.





 

Feedback  |  Help  |  About Us  |  Jobs  |  Advertise  |  Privacy Statement  |  Terms of Service

Copyright © 1994-2000 Wired Digital Inc., a Lycos Network site. All rights reserved.