tests

Type tests

Building a new site, it's customary to set various type sizes, header tags, list styles, etc. This is an attempt at a visual reference so we can view all of those things in one place.

This will eventually make its way into a proper style guide, so I can remind myself how to style something in 6 months, instead of trying to re-invent the wheel every. single. time.

Global SASS rules for sweet headers

These header styles are already defined in my base.scss stylesheet, so no need to add them to the additional class definitions in other files.

Headers use a component helper, and don't have margin or padding applied by default. Spacing is accomplished by using a Box component.

All headers are should be set in the Inter typeface.

More info on @use or the sass language in general.

import Heading from "./heading"
// load variables.scss via @use
// and set the namespace to "var"
@use './variables' as var;
h1, h2, h3, h4, h5, h6 {
font-family: "Inter";
}
h1, h2 { line-height: .875; }
h3, h4, h5, h6 { line-height: .95; }

Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion?

h1

Big 'ol type. I've tried to compress it as much as I can (via negative letter-spacing), while still retaining legiblity.

Some characters may overlap into the ascenders and descenders on adjacent lines (due to the line-height), but that's acceptable enough. Since this size is mainly used in typically shorter "section header" type, the chances of that happening frequently are pretty minimal.

<Heading type="h1">Title</Heading>
h1 {
font-size: var.$baseline * 4;
font-weight: 800;
letter-spacing: - var.$baseline * .15625;
@media(max-width: $breakpoint__md__min) {
font-size: var.$baseline * 3;
}
}
// $baseline and $breakpoint__md__min
// are both set in my variables.scss

Smooth as an android's bottom, eh, Data?

h2

No worries about this h2 being too small... While it isn't the biggest size I've got going on the page, it's still pretty large.

Purposfully jammed together just enough to be somewhat crispy-looking, and still not ascend into chaos.

This size shares the same line-height as it's big brother.

<Heading type="h2">Title</Heading>
h2 {
font-size: var.$baseline * 3;
font-weight: 800;
letter-spacing: - var.$baseline * .15625;
@media(max-width: $breakpoint__md__min) {
font-size: var.$baseline * 2;
}
}

Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody.

h3

The middle of the road header size. Used mostly as a subheader size in longer-form copy areas.

This size shares the same line-height as the h4, h5, and h6 headers.

<Heading type="h3">Title</Heading>
h3 {
font-size: var.$baseline * 2;
font-weight: 800;
letter-spacing: - var.$baseline * .05;
@media(max-width: $breakpoint__md__min) {
font-size: var.$baseline * 1.5;
letter-spacing: - var.$baseline * .05;
}
}

Sure. You'd be surprised how far a hug goes with Geordi, or Worf.

h4

Just a tiny bit smaller than the h3, this size header is a decent compromise in size vs. readability, compared to the size of the regular paragraph copy.

<Heading type="h4">Title</Heading>
h4 {
font-size: var.$baseline * 1.75;
font-weight: 800;
letter-spacing: - var.$baseline * .025;
@media(max-width: $breakpoint__md__min) {
font-size: var.$baseline * 1.375;
letter-spacing: - var.$baseline * .05;
}
}
They were just sucked into space.
h5

The h5 is like the bastard step-child of header sizes. I really like this one, even though it isn't used all that often. I should fix that.

<Heading type="h5">Title</Heading>
h5 {
font-size: var.$baseline * 1.5;
font-weight: 800;
letter-spacing: - var.$baseline * .025;
@media(max-width: $breakpoint__md__min) {
font-size: var.$baseline * 1.25;
letter-spacing: - var.$baseline * .05;
}
}
I think you've let your personal feelings cloud your judgement.
h6

This header is only a bit larger than the regular paragraph copy.

I'm sure that a header this size has it's use, but I'll be damned if I've used it on anything so far. Time will tell.

<Heading type="h6">Title</Heading>
h6 {
font-size: var.$baseline * 1.25;
font-weight: 800;
letter-spacing: - var.$baseline * .025;
@media(max-width: $breakpoint__md__min) {
font-size: var.$baseline * 1.125;
letter-spacing: - var.$baseline * .05;
}
}

Text from Riker Ipsum. LOL

  • ©2021 ff4500