Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Commit f0db02b

Browse files
committed
Update font-sizes value to use the REM unit and line-heights to be
unitless to be more consistent of the relative unit values used already to establish consistent typography while simultaneously being more accommodating of RWD & a11y-friendly uses of the the declarations.
1 parent 886fb1e commit f0db02b

File tree

1 file changed

+28
-29
lines changed

1 file changed

+28
-29
lines changed

typography.html

+28-29
Original file line numberDiff line numberDiff line change
@@ -50,129 +50,128 @@
5050
@apply --paper-font-common-base;
5151
@apply --paper-font-common-nowrap;
5252

53-
font-size: 112px;
53+
font-size: 7rem;
5454
font-weight: 300;
5555
letter-spacing: -.044em;
56-
line-height: 120px;
56+
line-height: 1.071428571;
5757
};
5858

5959
--paper-font-display3: {
6060
@apply --paper-font-common-base;
6161
@apply --paper-font-common-nowrap;
6262

63-
font-size: 56px;
63+
font-size: 3.5rem;
6464
font-weight: 400;
6565
letter-spacing: -.026em;
66-
line-height: 60px;
66+
line-height: 1.071428571;
6767
};
6868

6969
--paper-font-display2: {
7070
@apply --paper-font-common-base;
7171

72-
font-size: 45px;
72+
font-size: 2.8125rem;
7373
font-weight: 400;
7474
letter-spacing: -.018em;
75-
line-height: 48px;
75+
line-height: 1.066666667;
7676
};
7777

7878
--paper-font-display1: {
7979
@apply --paper-font-common-base;
8080

81-
font-size: 34px;
81+
font-size: 2.125rem;
8282
font-weight: 400;
8383
letter-spacing: -.01em;
84-
line-height: 40px;
84+
line-height: 1.176470588;
8585
};
8686

8787
--paper-font-headline: {
8888
@apply --paper-font-common-base;
8989

90-
font-size: 24px;
90+
font-size: 1.5rem;
9191
font-weight: 400;
9292
letter-spacing: -.012em;
93-
line-height: 32px;
93+
line-height: 1.333333333;
9494
};
9595

9696
--paper-font-title: {
9797
@apply --paper-font-common-base;
9898
@apply --paper-font-common-nowrap;
9999

100-
font-size: 20px;
100+
font-size: 1.25rem;
101101
font-weight: 500;
102-
line-height: 28px;
102+
line-height: 1.4;
103103
};
104104

105105
--paper-font-subhead: {
106106
@apply --paper-font-common-base;
107107

108-
font-size: 16px;
108+
font-size: 1rem;
109109
font-weight: 400;
110-
line-height: 24px;
110+
line-height: 1.5;
111111
};
112112

113113
--paper-font-body2: {
114114
@apply --paper-font-common-base;
115115

116-
font-size: 14px;
116+
font-size: .875rem;
117117
font-weight: 500;
118-
line-height: 24px;
118+
line-height: 1.714285714;
119119
};
120120

121121
--paper-font-body1: {
122122
@apply --paper-font-common-base;
123123

124-
font-size: 14px;
124+
font-size: .875rem;
125125
font-weight: 400;
126-
line-height: 20px;
126+
line-height: 1.428571429;
127127
};
128128

129129
--paper-font-caption: {
130130
@apply --paper-font-common-base;
131131
@apply --paper-font-common-nowrap;
132132

133-
font-size: 12px;
133+
font-size: .75rem;
134134
font-weight: 400;
135135
letter-spacing: 0.011em;
136-
line-height: 20px;
136+
line-height: 1.666666667;
137137
};
138138

139139
--paper-font-menu: {
140140
@apply --paper-font-common-base;
141141
@apply --paper-font-common-nowrap;
142142

143-
font-size: 13px;
143+
font-size: .8125rem;
144144
font-weight: 500;
145-
line-height: 24px;
145+
line-height: 1.846153846;
146146
};
147147

148148
--paper-font-button: {
149149
@apply --paper-font-common-base;
150150
@apply --paper-font-common-nowrap;
151151

152-
font-size: 14px;
152+
font-size: .875rem;
153153
font-weight: 500;
154154
letter-spacing: 0.018em;
155-
line-height: 24px;
155+
line-height: 1.714285714;
156156
text-transform: uppercase;
157157
};
158158

159159
--paper-font-code2: {
160160
@apply --paper-font-common-code;
161161

162-
font-size: 14px;
162+
font-size: .875rem;
163163
font-weight: 700;
164-
line-height: 20px;
164+
line-height: 1.428571429;
165165
};
166166

167167
--paper-font-code1: {
168168
@apply --paper-font-common-code;
169169

170-
font-size: 14px;
170+
font-size: .875rem;
171171
font-weight: 500;
172-
line-height: 20px;
172+
line-height: 1.428571429;
173173
};
174174

175175
}
176-
177176
</style>
178177
</custom-style>

0 commit comments

Comments
 (0)