Typography and Color

Font Stack and Scale

A short release note card gains a serif font stack, a larger base size, a stronger heading, and calmer body color.

Program

Typography starts with a font stack and a scale. The stack chooses acceptable fonts, while size and weight separate headings from body text.

font_stack_scale.html
Visuals: captured from real browser rendering
<style>
.type-card { font-family: Georgia, "Times New Roman", serif; }
.type-card { font-size: 18px; }
.type-card h2 { font-size: 28px; font-weight: 700; }
.type-card p { color: #475569; }
</style>

<article class="type-card">
  <h2>Release Notes</h2>
  <p>Readable typography keeps status updates scannable.</p>
</article>

  1. Choose a serif font stack.

    The card switches to a serif family with fallbacks.
    A font stack lists preferred fonts and generic fallbacks.

  2. Set a larger base text size.

    The paragraph becomes easier to read.
    Base font size affects inherited text inside the component.

  3. Scale up the heading.

    The heading now stands apart from the paragraph.
    Heading selectors can tune size and weight without extra markup.

  4. Use a quieter body text color.

    The paragraph recedes while staying readable.
    Color helps hierarchy when contrast remains sufficient.
font stack A font stack lists preferred fonts followed by fallbacks.
type scale A type scale uses size and weight changes to show hierarchy.