polvara.me

How to Style Text in HTML

Apr 3, 2023

Do you want to learn how to transform a wall of text into a readable, responsive, and dark mode-friendly page with just 32 lines of CSS? These basic rules have been my go-to for years and are the perfect starting point for any new website.

The default document
The default document
The page after our styling
The page after our styling

I'm using an excerpt from Factorio's Wikipedia page. By the way, it's an awesome game 🎮

Let's make the text easier to read. Right now, the lines are too long and condensed. We can change that with three simple CSS rules.

main {
  max-width: 60ch;
  line-height: 1.5;
  font-size: 1.2rem;
}

We can now improve the appearance. Sans-serif fonts are usually a good choice for web pages. I'm using the system's font with a list of fallbacks.

main {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

I like to align the block in the center and give it some side padding so it looks good on small screens too.

body {
  margin: 0;
}

main {
  margin: 0 auto;
  padding: 0 1rem;
}

Looking good! Let's make it even better! 🤩

Already looking better
Already looking better

I'm going to add some space before each heading so the text can "breathe" a bit more.

h1,
h2,
h3 {
  margin-top: 2em;
}

Let's add some colors. It's usually better to avoid full black, even for text. I'll pick a very dark gray instead. I'll then use a slightly off-white color for the background and a light blue for the links.

:root {
  --background: hsl(200 50% 98%);
  --text: hsl(0 0% 20%);
  --accent: hsl(200 60% 50%);
}

body {
  background-color: var(--background);
}

main {
  color: var(--text);
}

a {
  color: var(--accent);
}

Want to take it up a notch? Add a top-line. Trust me, things will look sharper 😎

body {
  border-top: 3px solid var(--accent);
}
The light version
The light version

Almost there! We only need to add dark mode. Luckily, it's just a matter of changing our color variables.

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(200 50% 18%);
    --text: hsl(200 50% 95%);
    --accent: hsl(330 60% 50%);
  }
}

And there you have it. A readable, responsive, and good-looking HTML page in 32 lines of CSS.

Check it out with full code live.