Skip to content

Commit 53f946d

Browse files
committed
Improve site legibility
This patch removes unnecessary letter-spacing and line-height settings, as well as the forced Arial/Helvetica font override, an instead uses the user's chosen font and the font's settings for letter-spacing and line-height. It also removes the global override for initial page font size, so that the user's font size settings are preserved. The blockquote styles are also update so that the quoted text is formatted similarly to the surrounding text (no italics, and no larger font size), and with a blacker grey to make the text more legible.
1 parent 749f41f commit 53f946d

File tree

3 files changed

+8
-19
lines changed

3 files changed

+8
-19
lines changed

_sass/_base.scss

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ dl, dd, ol, ul, figure {
1515
*/
1616
body {
1717
font-family: $base-font-family;
18-
font-size: $base-font-size;
19-
line-height: $base-line-height;
20-
font-weight: 300;
18+
font-size: 1em;
2119
color: $text-color;
2220
background-color: $background-color;
2321
}
@@ -110,9 +108,6 @@ blockquote {
110108
color: $grey-color;
111109
border-left: 4px solid $grey-color-light;
112110
padding-left: $spacing-unit / 2;
113-
font-size: 18px;
114-
letter-spacing: -1px;
115-
font-style: italic;
116111

117112
> :last-child {
118113
margin-bottom: 0;

_sass/_layout.scss

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@
1717
}
1818

1919
.site-title {
20-
font-size: 26px;
21-
line-height: 56px;
22-
letter-spacing: -1px;
20+
font-size: 150%;
21+
line-height: 4rem;
2322
margin-bottom: 0;
2423
float: left;
2524

@@ -31,15 +30,14 @@
3130

3231
.site-nav {
3332
float: right;
34-
line-height: 56px;
33+
line-height: 4rem;
3534

3635
.menu-icon {
3736
display: none;
3837
}
3938

4039
.page-link {
4140
color: $text-color;
42-
line-height: $base-line-height;
4341

4442
// Gaps between nav items, but not on the first one
4543
&:not(:first-child) {
@@ -210,9 +208,7 @@
210208
}
211209

212210
.post-title {
213-
font-size: 42px;
214-
letter-spacing: -1px;
215-
line-height: 1;
211+
font-size: 200%;
216212

217213
@include media-query($on-laptop) {
218214
font-size: 36px;

css/main.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,16 @@
66

77

88
// Our variables
9-
$base-font-family: Helvetica, Arial, sans-serif;
10-
$base-font-size: 16px;
11-
$small-font-size: $base-font-size * 0.875;
12-
$base-line-height: 1.5;
9+
$base-font-family: sans-serif;
10+
$small-font-size: 87.5%;
1311

1412
$spacing-unit: 30px;
1513

1614
$text-color: #111;
1715
$background-color: #fdfdfd;
1816
$brand-color: #2a7ae2;
1917

20-
$grey-color: #828282;
18+
$grey-color: #626262;
2119
$grey-color-light: lighten($grey-color, 40%);
2220
$grey-color-dark: darken($grey-color, 25%);
2321

0 commit comments

Comments
 (0)