Header 1

Updated

Usage

Open Appearance → Customize → Styles → Header 1 to set how your largest headings look across the site. These settings apply to H1 headings and to any block whose headline style is set to H1.

Set the Font (usually Display), Size and Mobile Size, Weight, Style, Transform, Tracking (letter spacing), Line Height, and Color. Together they form the top of your type scale.

When to use it

  • Setting your hero headline look before adjusting H2–H6.
  • When page titles and Hero blocks should share one bold heading style.
  • After changing your Fonts or Palette, to recheck size and contrast on photo heroes.

Tips

  • A block's headline style changes how it looks, not its place in the page outline. A Hero set to look like H1 may still be an H2 underneath, which is fine for accessibility and SEO.
  • Mobile Size applies on phones. Long H1 headlines usually need a noticeably smaller mobile size.
  • Color defaults to Text. On dark heroes, use the block's light-text or reverse options instead of changing this site-wide color.
  • The site name beside your logo uses the Header 3 style. Only page titles and H1-style blocks use this one.

Settings

Header 1

Font setting in the block editor sidebar
Font
  • Displaydefault
  • Body
  • Alt
Style setting in the block editor sidebar
Style
  • Normaldefault
  • Italic
Transform setting in the block editor sidebar
Transform
  • Nonedefault
  • Uppercase
  • Lowercase
  • Title Case
Weight setting in the block editor sidebar
Weight
  • Extra Light
  • Light
  • Normaldefault
  • Book
  • Md. Bold
  • Bold
  • Xtra Bold
  • Black
  • Xtra Black
Color setting in the block editor sidebar
Color
  • White
  • Gray
  • Dark
  • Textdefault
  • Primary
  • Secondary
  • Accent
  • Variant
  • Muted
Size setting in the block editor sidebar
Size
Mobile Size setting in the block editor sidebar
Mobile Size
Tracking setting in the block editor sidebar
Tracking
Line Height setting in the block editor sidebar
Line Height