typography.css
2.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/*
scale
Use the classic typographer's scale:
6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72
We use ems for font size.
Our typographical math is made easier by Richard Rutter's 62.5% trick:
http://www.clagnut.com/blog/348/
16 pixels is 1.6em. 18 pixels is 1.8em. 9 pixels is 0.9em.
Inheritance slightly complicates the math, but there's a simple formula:
child pixels / parent pixels = child ems
*/
body {
font-size: .625em; }
h1 {
font-size: 4.8em; }
h2 {
font-size: 3.6em; }
h3 {
font-size: 2.4em; }
h4 {
font-size: 2.1em; }
h5 {
font-size: 1.8em; }
h6 {
font-size: 1.6em; }
#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
font-size: 1.6em; }
p, ul, dl, th, td, legend {
font-size: 1.4em; }
fieldset.buttons input {
font-size: 1.2em; }
fieldset p.instruction {
font-size: 1em; }
/* typeface */
body {
font-family: Verdana, "Lucida Grande", Lucida, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif; }
pre, code {
font-family: Monaco, "DejaVu Sans", Courier, "Courier New", monospace; }
/* weighting */
h1, h2, h3, h4, h5, h6 {
font-weight: normal; }
p, ul, li, dl, th, td, legend {
font-weight: lighter; }
#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li {
font-weight: bold; }
/*
leading
d. The space between lines of type.
Blocks of text usually need positive leading.
Headers usually need less leading.
Darker faces usually need more lead than lighter ones.
Sans serif type usually needs more lead then serif type.
Leading is set with line-height.
line-height can be (and should be) set with a unit-less integer.
We use the unit-less integer to ensure line-height scales with text.
*/
h1 {
line-height: 1.0; }
h2 {
line-height: 1.2; }
h3 {
line-height: 1.4; }
h4 {
line-height: 1.6; }
h5 {
line-height: 1.6; }
h6, p {
line-height: 1.8; }
ul, dl, th, td, legend {
line-height: 1.6; }
/* justification */
body {
text-align: left; }
/* decoration */
ul {
list-style-position: outside;
list-style-type: square; }
a, a:visited, a:link {
text-decoration: none; }
a:hover {
text-decoration: underline; }
th {
text-transform: uppercase; }
fieldset div.password input {
font-weight: bold; }
/*
the measure
d. The length of a single line of text.
We use ems to set the width of blocks of text.
Typically, between 30 and 50 ems is recommended for optimal readibility.
*/