Sizing Up the Browser (Part 3)
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
0 |
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 |
10
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
40 |
10
11
0 |
12
14
10 |
14
16
10 |
18
21
-10 |
24
28
0 |
36
42
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 |
48
60
0 |
| Times |
10
12
15 |
13
15
0 |
16
19
-30 |
18
20
0 |
24
27
0 |
31.5
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.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
