Use DRY CSS for just typography styles

A good blog post about the DRY CSS Principle. And a Wikipedia article on typography.

Okay, so I'm not sold on using DRY CSS for all the styles for a website, but I think it makes since when just used for setting the different font-size, font-family, style, weight, etc.. In short, just for the styles that are typographic. Having too many font styles scattered about a website creates a messy site and a lot of the time a font style might be repeated, or slightly different. This isn't always easy to manage if in the future you need to have all the spots where a header style was uppercase to now be underline.

Example of using DRY CSS for typography: (totally made up CSS to protect the innocent.)

/* Huge header */
.Hero-header,
.SomeOtherThing-title--important,
h2 strong,
h1 {
  font-size: 45px;
  line-height: 60px;
}

With that code I can easily see where that huge font size is used.

An alternative is to only style plain tags with typographic styles and not use classes for them. What I mean is remove .Hero-header class and replace it with the h2 strong In the HTML.