Bear Blog headings

The default Bear Blog theme keeps headings plain, same size and weight throughout, 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 3 hours, 53 minutes ago.

Heading spacing and sizing

Adjusted spacing and sizing for headings

h1, h2, h3, h4, h5, h6 {
    margin-block: 1.5rem 0.5em;
    line-height: 1.3;
}

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

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

h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

Uppercase heading

Uppercase h2 with letter spacing

h2 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
}

Accent border heading

Left border accent on headings

h2 {
    border-left: 3px solid var(--link-color);
    padding-left: 0.6em;
}

Underline accent heading

Short underline beneath headings

h2 {
    display: inline-block;
    padding-bottom: 0.2em;
    border-bottom: 2px solid var(--link-color);
}

Small caps heading

Small caps treatment for headings

h2 {
    font-variant: small-caps;
    letter-spacing: 0.03em;
}

Numbered headings

Automatically numbered h2 headings

main {
    counter-reset: heading-counter;
}

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

Boxed sub-heading

Boxed background treatment for h3

h3 {
    display: inline-block;
    background-color: var(--code-background-color);
    padding: 0.2em 0.6em;
    border-radius: 3px;
}

Weight contrast heading

Light h1 paired with bold h2

h1 {
    font-weight: 300;
    font-size: 1.9rem;
}

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

Drop shadow

Soft drop shadow behind the h1

h1 {
    text-shadow: 2px 2px 0 var(--link-color);
}

Gradient

Gradient text fill on the h1

h1 {
    background: linear-gradient(90deg, var(--link-color), var(--visited-color));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

Want more? Check out the full Bear Blog library.