Heading styles

The default Bear Blog theme keeps headings plain, browser-default sizes and no extra character. That leaves a lot of room to make them stand out.

This page collects small CSS tweaks and variations for h1 to h6. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 6 days, 10 hours ago.

Spacing and sizing

Adjusted spacing and sizing for headings

/* Headings: spacing and sizing | robertbirming.com */
main :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 1.5rem 0.5em;
  line-height: 1.3;
}

main h1 {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

main h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

main h3 { font-size: 1.3rem; }

main h4 { font-size: 1.1rem; }

Uppercase

Uppercase h2 with letter spacing

/* Headings: uppercase | robertbirming.com */
main h2 {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

Accent border

Accent border beside headings

/* Headings: accent border | robertbirming.com */
main h2 {
  padding-inline-start: 0.6em;
  border-inline-start: 3px solid var(--link-color);
}

Underline accent

Short underline beneath headings

/* Headings: underline accent | robertbirming.com */
main h2 {
  display: inline-block;
  padding-block-end: 0.2em;
  border-block-end: 2px solid var(--link-color);
}

Small caps

Small caps treatment for headings

/* Headings: small caps | robertbirming.com */
main h2 {
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

Numbered

Automatically numbered h2 headings

/* Headings: numbered | robertbirming.com */
main {
  counter-reset: heading-counter;
}

main h2::before {
  counter-increment: heading-counter;
  content: counter(heading-counter) ". ";
  color: var(--link-color);
}

Boxed sub-heading

Boxed background for h3

/* Headings: boxed sub-heading | robertbirming.com */
main h3 {
  display: inline-block;
  padding: 0.2em 0.6em;
  background-color: var(--code-background-color);
  border-radius: 3px;
}

Weight contrast

Light h1 paired with bold h2

/* Headings: weight contrast | robertbirming.com */
main h1 {
  font-size: 1.9rem;
  font-weight: 300;
}

main h2 {
  font-size: 1.3rem;
  font-weight: 700;
}

Drop shadow

Drop shadow behind the h1

/* Headings: drop shadow | robertbirming.com */
main h1 {
  text-shadow: 2px 2px 0 var(--link-color);
}

Gradient

Gradient text fill on the h1

/* Headings: gradient | robertbirming.com */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  main h1 {
    width: fit-content;
    background: linear-gradient(90deg, var(--link-color), var(--visited-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

Have fun giving your headings some presence.

Want more? Check out the full Bear Blog library.