Jordan Smalls

Software Engineer

7 Lines of CSS to Improve UX

Just a few simple CSS rules can make your text much easier to read.

Center the body, cap its width for readable line lengths, and set a comfortable line-height, font size, and text color. Tighten heading line-height separately since headings need less breathing room than body text.

css
body {
  margin: 40px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 18px;
  color: #444;
  padding: 0 10px;
}

h1,
h2,
h3 {
  line-height: 1.2;
}