Skip to content

Commit 4d83684

Browse files
rayraycodesrayraycodes
committed
improved typography
1 parent 96d2d02 commit 4d83684

2 files changed

Lines changed: 27 additions & 25 deletions

File tree

‎src/index.css‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap");
23
/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
34
@layer properties {
45
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
@@ -164,8 +165,8 @@
164165
html, :host {
165166
-webkit-text-size-adjust: 100%;
166167
tab-size: 4;
167-
line-height: 1.5;
168-
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
168+
line-height: 1.54;
169+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
169170
font-feature-settings: var(--default-font-feature-settings, normal);
170171
font-variation-settings: var(--default-font-variation-settings, normal);
171172
-webkit-tap-highlight-color: transparent;
@@ -418,54 +419,54 @@
418419
color: var(--foreground);
419420
-webkit-font-smoothing: antialiased;
420421
-moz-osx-font-smoothing: grayscale;
421-
font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro Display, Inter, system-ui, sans-serif;
422+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
422423
}
423424

424425
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
425426
font-size: var(--text-2xl);
426427
font-weight: var(--font-weight-medium);
427428
letter-spacing: -.02em;
428-
font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Inter, system-ui, sans-serif;
429-
line-height: 1.5;
429+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
430+
line-height: 1.54;
430431
}
431432

432433
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
433434
font-size: var(--text-xl);
434435
font-weight: var(--font-weight-medium);
435436
letter-spacing: -.01em;
436-
font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Inter, system-ui, sans-serif;
437-
line-height: 1.5;
437+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
438+
line-height: 1.54;
438439
}
439440

440441
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
441442
font-size: var(--text-lg);
442443
font-weight: var(--font-weight-medium);
443-
font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Inter, system-ui, sans-serif;
444-
line-height: 1.5;
444+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
445+
line-height: 1.54;
445446
}
446447

447448
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
448449
font-size: var(--text-base);
449450
font-weight: var(--font-weight-medium);
450-
line-height: 1.5;
451+
line-height: 1.54;
451452
}
452453

453454
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
454455
font-size: var(--text-base);
455456
font-weight: var(--font-weight-normal);
456-
line-height: 1.5;
457+
line-height: 1.54;
457458
}
458459

459460
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
460461
font-size: var(--text-base);
461462
font-weight: var(--font-weight-medium);
462-
line-height: 1.5;
463+
line-height: 1.54;
463464
}
464465

465466
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
466467
font-size: var(--text-base);
467468
font-weight: var(--font-weight-normal);
468-
line-height: 1.5;
469+
line-height: 1.54;
469470
}
470471
}
471472

‎src/styles/globals.css‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@custom-variant dark (&:is(.dark *));
22

33
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');
45

56
:root {
67
--font-size: 16px;
@@ -130,7 +131,7 @@
130131

131132
body {
132133
@apply bg-background text-foreground;
133-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, sans-serif;
134+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
134135
-webkit-font-smoothing: antialiased;
135136
-moz-osx-font-smoothing: grayscale;
136137
/* Smooth scrolling disabled to prevent double-scroll issue */
@@ -149,54 +150,54 @@
149150
h1 {
150151
font-size: var(--text-2xl);
151152
font-weight: var(--font-weight-medium);
152-
line-height: 1.5;
153-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
153+
line-height: 1.54;
154+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
154155
letter-spacing: -0.02em;
155156
}
156157

157158
h2 {
158159
font-size: var(--text-xl);
159160
font-weight: var(--font-weight-medium);
160-
line-height: 1.5;
161-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
161+
line-height: 1.54;
162+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
162163
letter-spacing: -0.01em;
163164
}
164165

165166
h3 {
166167
font-size: var(--text-lg);
167168
font-weight: var(--font-weight-medium);
168-
line-height: 1.5;
169-
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
169+
line-height: 1.54;
170+
font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
170171
}
171172

172173
h4 {
173174
font-size: var(--text-base);
174175
font-weight: var(--font-weight-medium);
175-
line-height: 1.5;
176+
line-height: 1.54;
176177
}
177178

178179
p {
179180
font-size: var(--text-base);
180181
font-weight: var(--font-weight-normal);
181-
line-height: 1.5;
182+
line-height: 1.54;
182183
}
183184

184185
label {
185186
font-size: var(--text-base);
186187
font-weight: var(--font-weight-medium);
187-
line-height: 1.5;
188+
line-height: 1.54;
188189
}
189190

190191
button {
191192
font-size: var(--text-base);
192193
font-weight: var(--font-weight-medium);
193-
line-height: 1.5;
194+
line-height: 1.54;
194195
}
195196

196197
input {
197198
font-size: var(--text-base);
198199
font-weight: var(--font-weight-normal);
199-
line-height: 1.5;
200+
line-height: 1.54;
200201
}
201202
}
202203
}

0 commit comments

Comments
 (0)