Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
TypographiqueMinimalisteMonochrome
Aperçu

Grotesk Display Design Reference

Overview

Grotesk Display is a bold, typography-driven web design aesthetic that elevates massive sans-serif letterforms into the primary visual element of a composition. Rooted in the grotesque typeface tradition that emerged in the early 19th century and was refined through Swiss International Typographic Style in the 1950s, this aesthetic strips design back to its most fundamental ingredient -- type -- and pushes it to monumental scale. Where traditional Swiss design used grotesk typefaces at functional sizes within rigid grids, Grotesk Display breaks those letterforms free, scaling them to viewport-filling proportions and exploiting extreme weight contrast (hairline thin against ultra-black bold) to create arresting visual hierarchy without relying on imagery, illustration, or decoration.

The ancestry runs deep. Akzidenz-Grotesk, released by the Berthold Type Foundry in 1896, pioneered the stripped-down, low-contrast sans-serif letterform. Its DNA flows directly into Neue Haas Grotesk (later renamed Helvetica), Univers, and the wave of neo-grotesque typefaces that defined mid-century modernism. Grotesk Display inherits this lineage but amplifies it: where Helvetica whispered neutrality, Grotesk Display shouts presence. Condensed grotesques like Commercial Type's Druk (originally commissioned for Bloomberg Businessweek and inspired by historical Annonce Grotesk) exemplify the trend -- punchy, compressed, and designed to fill every pixel of a headline with typographic mass.

In practice, the aesthetic manifests as websites and interfaces dominated by oversized type that serves simultaneously as content, navigation, and ornament. Body text remains minimal and restrained, creating a dramatic tension between the colossal display headings and the whisper-thin supporting copy. The color palette is deliberately reduced -- often monochromatic black and white, occasionally punctuated by a single stark accent -- because the typography itself carries all the visual weight. Layouts favor generous white space that allows the massive letterforms to breathe, and micro-interactions tend to be subtle: weight shifts on hover, tracking adjustments, and smooth font-size transitions that keep the focus on the type. It is modernism distilled to its typographic essence, then amplified to a scale that demands attention.

Visual Characteristics

Core Design Traits

  • Oversized display typography: Headlines occupy 60-100% of viewport width, with font sizes ranging from 8vw to 20vw; type is not just content, it is the composition itself
  • Extreme weight contrast: Thin (100-200) and Black (800-900) weights appear side by side, creating dramatic visual tension between whisper-light and ultra-heavy letterforms
  • Condensed and compressed proportions: Narrow, tall letterforms maximize vertical impact while allowing more characters per line, referencing historical Annonce Grotesk display faces
  • Monochromatic or near-monochromatic palettes: Black, white, and gray dominate; color is used sparingly, often limited to a single high-contrast accent
  • Generous negative space: Vast areas of white (or black) surround the massive type, creating breathing room and directing all attention to the letterforms
  • Tight letter-spacing on display text: Negative tracking pulls oversized letters into dense, unified blocks of typographic texture
  • Mixed-case and case contrast: Uppercase display paired with lowercase body text creates hierarchical separation; sometimes a single word shifts case for emphasis
  • Minimal ornamentation: No gradients, no textures, no drop shadows; the raw geometry of the letterforms provides all visual interest
  • Grid-breaking type placement: Display text may bleed off edges, overlap sections, or span the full viewport width to create dynamic, editorial compositions
  • Horizontal rules and dividers: Thin lines (1-2px) separate sections and provide structural counterpoint to the heavy typographic mass
  • Subtle motion and micro-interactions: Font-weight morphing on hover, letter-spacing transitions, and smooth scroll-triggered type animations

Design Principles

  • Typography is the primary design element; every other component serves the type
  • Extreme contrast creates hierarchy: juxtapose thin against black, small against massive, tight against open
  • Restraint in color amplifies the power of form; let the letterforms do the visual heavy lifting
  • White space is not empty -- it is an active compositional force that gives type room to command attention
  • Simplicity and objectivity, inherited from Swiss roots, guide every layout decision
  • The grid provides invisible structure, but display type is allowed to break free for dramatic effect
  • Functional clarity remains paramount; bold aesthetics must never compromise readability of body content
  • Every design decision must be rationally justified; if an element does not serve the type, remove it

Color Palette

Grotesk Display Core Palette

The Grotesk Display palette is deliberately austere. Rooted in the Swiss tradition of letting typography speak, the color system favors stark neutrals with minimal chromatic intervention. A single accent color -- typically a pure, saturated hue -- provides punctuation without competing with the massive letterforms. The palette shifts between light mode (white ground, black type) and dark mode (black ground, white type) to suit editorial context.

Color Name Hex Role / Usage
Jet Black #0A0A0A Primary text, display headings, dark backgrounds
Pure White #FFFFFF Light backgrounds, inverse text on dark
Off-White #F5F5F0 Secondary backgrounds, paper-like warmth
Light Gray #E8E8E3 Dividers, card backgrounds, subtle separators
Mid Gray #9E9E99 Caption text, metadata, muted UI elements
Dark Gray #3D3D3A Secondary text, subheadings on light backgrounds
Signal Red #E63222 Primary accent, active states, call-to-action highlights
Deep Red #B8281C Hover/pressed state for red accent elements
Electric Blue #1A5CFF Link color, secondary accent for interactive elements
Deep Blue #1244CC Hover/pressed state for blue accent elements
Warm Charcoal #2A2A28 Dark-mode secondary backgrounds, footer areas
Stone #C8C4BC Borders, inactive UI elements, neutral separators
Ink #1A1A18 Alternate dark for softer-than-pure-black compositions
Cream #FAF8F2 Warm light-mode background alternative
Highlight Yellow #FFE424 Rare tertiary accent for emphasis, badges, markers

CSS Custom Properties

:root {
  /* Neutrals */
  --gd-black: #0a0a0a;
  --gd-white: #ffffff;
  --gd-off-white: #f5f5f0;
  --gd-cream: #faf8f2;
  --gd-light-gray: #e8e8e3;
  --gd-mid-gray: #9e9e99;
  --gd-dark-gray: #3d3d3a;
  --gd-stone: #c8c4bc;
  --gd-charcoal: #2a2a28;
  --gd-ink: #1a1a18;

  /* Accent – Red */
  --gd-red: #e63222;
  --gd-red-hover: #b8281c;

  /* Accent – Blue */
  --gd-blue: #1a5cff;
  --gd-blue-hover: #1244cc;

  /* Accent – Yellow (rare) */
  --gd-yellow: #ffe424;

  /* Semantic */
  --gd-bg-primary: #ffffff;
  --gd-bg-secondary: #f5f5f0;
  --gd-bg-dark: #0a0a0a;
  --gd-bg-dark-secondary: #2a2a28;
  --gd-text-primary: #0a0a0a;
  --gd-text-secondary: #3d3d3a;
  --gd-text-muted: #9e9e99;
  --gd-text-inverse: #ffffff;
  --gd-border: #e8e8e3;
  --gd-border-dark: #3d3d3a;
}

Typography

Typeface Characteristics

Grotesk Display typography is defined by:

  • Grotesque and neo-grotesque sans-serifs -- descended from Akzidenz-Grotesk and Helvetica; low stroke contrast, squared terminals, and functional clarity
  • Variable font exploitation -- weight axis ranges from Thin (100) to Black (900), enabling smooth transitions and extreme contrast within a single family
  • Condensed display cuts -- narrow proportions maximize impact for headlines; more letters per line at larger sizes
  • Massive scale for headings -- display text uses viewport-relative units (vw), often 10-20vw, creating type that fills the screen
  • Minimal, functional body text -- body copy stays small (16-18px), light (400 weight), and well-spaced (1.6-1.7 line-height) to counterbalance display drama
  • Tight negative tracking for display -- letter-spacing of -0.02em to -0.06em pulls oversized characters into cohesive blocks
  • Generous tracking for labels -- small-caps labels and navigation use positive tracking (0.08-0.15em) for legibility at small sizes
Font Style Best For
Space Grotesk Geometric grotesque, 5 weights Headlines and display; idiosyncratic details add character
Familjen Grotesk Contemporary grotesque Display and text; bridges editorial and functional roles
Inter Neo-grotesque, variable Body text, UI; extremely legible at all sizes
Work Sans Geometric grotesque, 9 weights Body text, labels; excellent weight range
Darker Grotesque High-contrast grotesque, 9 weights Display headings; dramatic weight extremes from 300-900
Hanken Grotesk Clean neo-grotesque Subheadings, navigation; neutral and versatile
Albert Sans Geometric grotesque, variable Body text; modern, clean, and highly legible
Schibsted Grotesk Editorial grotesque Headlines and body; strong personality for editorial layouts
Archivo Grotesque with geometric leanings Versatile heading and body font; wide weight range
Bricolage Grotesque Display grotesque, variable Large display text; distinctive character at big sizes

Font Pairing Suggestions

Heading Font Body Font Character
Space Grotesk (700) Inter (400) Tech-forward, modern clarity
Darker Grotesque (900) Work Sans (400) Maximum weight contrast, editorial drama
Familjen Grotesk (700) Albert Sans (400) Refined and contemporary
Bricolage Grotesque (800) Inter (400) Display personality with functional body
Schibsted Grotesk (700) Hanken Grotesk (400) Editorial, Scandinavian-influenced
Archivo (800) Archivo (400) Monofamily, cohesive at all sizes

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--gd-text-primary);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

/* Display / Hero text */
.gd-display {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3.5rem, 12vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}

/* Display thin variant for contrast */
.gd-display--thin {
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* Body text */
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gd-text-secondary);
}

/* Labels and overlines */
.gd-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gd-text-muted);
}

/* Large body / lead paragraph */
.gd-lead {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--gd-text-secondary);
  max-width: 540px;
}

/* Caption */
.gd-caption {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--gd-text-muted);
  line-height: 1.5;
}

Layout Principles

  • Typography-first hierarchy -- the display heading is the largest element on the page, often occupying 30-50% of the viewport height; all other elements are subordinate to the type
  • Asymmetric grids with wide margins -- 12-column grids with content often occupying only 6-8 columns, leaving generous margins that frame the typography
  • Full-bleed type, contained body -- display headings may span edge-to-edge while body text is constrained to a narrow 540-640px measure for readability
  • Vertical rhythm through scale jumps -- dramatic size differences between heading levels (e.g., h1 at 12vw, h2 at 3rem, body at 1rem) create clear visual hierarchy
  • Horizontal rules as structural punctuation -- 1px lines in light gray or dark gray separate sections and provide a calm counterpoint to bold type
  • Minimal imagery -- when images appear, they are secondary to typography; often desaturated, cropped tightly, or placed in supporting grid positions
  • Scroll-driven editorial flow -- content unfolds vertically in distinct type-dominated sections, each with a clear focal point
  • Max-width containers for body content -- 1100-1200px max-width for overall layout, with body text further constrained to 540-640px
  • Dark/light section alternation -- alternating between white and black background sections creates rhythm and dramatic contrast shifts
  • Viewport-height hero sections -- the opening section frequently uses 100vh (or close to it), allowing the display type to dominate the initial view
  • Type as texture and pattern -- repeating, overlapping, or partially cropped display text can serve as a background texture layer

CSS / Design Techniques

Card Component

.gd-card {
  background: var(--gd-white);
  border-bottom: 2px solid var(--gd-border);
  padding: 40px 0;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease;
}

.gd-card:hover {
  border-color: var(--gd-black);
}

.gd-card__label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gd-text-muted);
  margin-bottom: 12px;
}

.gd-card__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 16px;
  transition: letter-spacing 0.3s ease;
}

.gd-card:hover .gd-card__title {
  letter-spacing: 0em;
}

.gd-card__body {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--gd-text-muted);
  max-width: 480px;
  line-height: 1.6;
}

.gd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0;
}

Button

.gd-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gd-black);
  color: var(--gd-white);
  border: 2px solid var(--gd-black);
  border-radius: 0;
  padding: 14px 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}

.gd-button:hover {
  background: transparent;
  color: var(--gd-black);
  letter-spacing: 0.14em;
}

/* Outline variant */
.gd-button--outline {
  background: transparent;
  color: var(--gd-black);
}

.gd-button--outline:hover {
  background: var(--gd-black);
  color: var(--gd-white);
  letter-spacing: 0.08em;
}

/* Accent variant */
.gd-button--accent {
  background: var(--gd-red);
  border-color: var(--gd-red);
}

.gd-button--accent:hover {
  background: var(--gd-red-hover);
  border-color: var(--gd-red-hover);
  color: var(--gd-white);
  letter-spacing: 0.08em;
}

/* Inverse for dark backgrounds */
.gd-button--inverse {
  background: var(--gd-white);
  color: var(--gd-black);
  border-color: var(--gd-white);
}

.gd-button--inverse:hover {
  background: transparent;
  color: var(--gd-white);
}

/* Arrow icon pseudo-element */
.gd-button__arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.gd-button:hover .gd-button__arrow {
  transform: translateX(4px);
}

.gd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 40px;
  border-bottom: 1px solid var(--gd-border);
}

.gd-nav__logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gd-black);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gd-nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gd-nav__links a {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--gd-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.gd-nav__links a:hover {
  color: var(--gd-black);
}

.gd-nav__links a.active {
  color: var(--gd-black);
  font-weight: 500;
}

/* Dark variant */
.gd-nav--dark {
  border-color: var(--gd-border-dark);
}

.gd-nav--dark .gd-nav__logo {
  color: var(--gd-white);
}

.gd-nav--dark .gd-nav__links a {
  color: var(--gd-mid-gray);
}

.gd-nav--dark .gd-nav__links a:hover,
.gd-nav--dark .gd-nav__links a.active {
  color: var(--gd-white);
}

Hero Section

.gd-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 40px 80px;
  position: relative;
}

.gd-hero__heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(4rem, 14vw, 14rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--gd-text-primary);
  margin-bottom: 48px;
}

.gd-hero__heading em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.gd-hero__heading .accent {
  color: var(--gd-red);
}

.gd-hero__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.gd-hero__intro {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--gd-text-secondary);
  max-width: 440px;
  line-height: 1.7;
}

.gd-hero__meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gd-text-muted);
  text-align: right;
}

@media (max-width: 768px) {
  .gd-hero {
    min-height: auto;
    padding: 80px 24px 60px;
  }

  .gd-hero__body {
    flex-direction: column;
    align-items: flex-start;
  }

  .gd-hero__meta {
    text-align: left;
  }
}

Section Divider

.gd-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.gd-divider hr {
  border: none;
  height: 1px;
  background: var(--gd-border);
}

.gd-divider--dark hr {
  background: var(--gd-border-dark);
}

.gd-divider--heavy hr {
  height: 3px;
  background: var(--gd-black);
}

Feature / Content Row

.gd-content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
  align-items: start;
}

.gd-content-row__label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gd-text-muted);
  margin-bottom: 16px;
}

.gd-content-row__heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.gd-content-row__text {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--gd-text-secondary);
  line-height: 1.7;
  max-width: 480px;
}

@media (max-width: 768px) {
  .gd-content-row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 24px;
  }
}

Dark Section Block

.gd-dark-section {
  background: var(--gd-bg-dark);
  color: var(--gd-text-inverse);
  padding: 120px 0;
}

.gd-dark-section h2 {
  color: var(--gd-white);
}

.gd-dark-section p {
  color: var(--gd-mid-gray);
}

.gd-dark-section .gd-label {
  color: var(--gd-mid-gray);
}

/* Large centered statement */
.gd-statement {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.gd-statement__text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 900px;
  margin: 0 auto;
}

.gd-statement__text em {
  font-style: normal;
  font-weight: 300;
  color: var(--gd-mid-gray);
}

.gd-footer {
  background: var(--gd-bg-dark);
  color: var(--gd-mid-gray);
  border-top: 1px solid var(--gd-border-dark);
}

.gd-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px;
}

.gd-footer__brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gd-white);
}

.gd-footer__links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gd-footer__links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--gd-mid-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.gd-footer__links a:hover {
  color: var(--gd-white);
}

.gd-footer__copy {
  font-size: 0.75rem;
  color: var(--gd-mid-gray);
}

@media (max-width: 768px) {
  .gd-footer__inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 28px 24px;
  }
}

Design Do's and Don'ts

Do

  • Let typography be the hero -- scale display headings to fill the viewport and make them the dominant visual element
  • Exploit extreme weight contrast within a single typeface family (Thin next to Black) for dramatic hierarchy
  • Use generous white space to frame and elevate the typography; empty space is a design tool, not wasted area
  • Maintain a strict, reduced color palette -- black, white, and one accent color create clarity and sophistication
  • Use tight negative letter-spacing on display type to create dense, impactful headline blocks
  • Apply wide positive letter-spacing to small labels and overlines for legibility and visual contrast
  • Design for both light and dark modes; the aesthetic excels in both contexts
  • Include subtle hover interactions -- weight shifts, tracking changes, underline reveals -- that reinforce the typographic focus

Don't

  • Add decorative elements, patterns, or textures that compete with the type for visual attention
  • Use multiple accent colors simultaneously; chromatic restraint is fundamental to the aesthetic
  • Apply drop shadows, bevels, or 3D effects to text -- the flat, graphic quality of the letterforms is essential
  • Set body text too large or too heavy; the contrast between massive display text and quiet body text is the defining dynamic
  • Use script, handwritten, or serif fonts for display headings; the grotesk sans-serif is the non-negotiable foundation
  • Neglect the grid for body content; while display type may break the grid for drama, supporting content must remain structured
  • Overcrowd the layout with imagery; when images are used, they should be secondary to and framed by typography
  • Add gratuitous animation; motion should be subtle, purposeful, and type-focused (weight transitions, tracking shifts)
Aesthetic Relationship to Grotesk Display
International Typographic Style Direct ancestor; Swiss Style established the grotesque typeface, grid system, and objective clarity that Grotesk Display inherits and amplifies
Brutalist Web Design Shares the raw, unadorned approach and bold typographic scale, but Brutalist embraces deliberate ugliness where Grotesk Display seeks refined impact
Minimalism Parallel reductive philosophy; both strip away ornament, but Grotesk Display uses massive type scale as a maximalist gesture within a minimal framework
Editorial Design Magazine and newspaper layouts pioneered the oversized headline / restrained body text dynamic that defines Grotesk Display on the web
Bauhaus Shared geometric sans-serif foundation and functional design principles; Bauhaus adds color and shape where Grotesk Display focuses purely on type
Flat Design Both reject dimensionality and ornament; Flat Design distributes visual weight across UI components while Grotesk Display concentrates it in typography
Neo-Brutalism Shares bold graphic presence and boundary-pushing scale, but adds color blocks and visible borders where Grotesk Display remains monochromatic
Kinetic Typography Extends the Grotesk Display philosophy into motion; animated type becomes the entire visual experience
Corporate Memphis Opposite approach -- uses illustration and color as primary elements, whereas Grotesk Display asserts that type alone is sufficient

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grotesk Display</title>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --gd-black: #0a0a0a;
      --gd-white: #ffffff;
      --gd-off-white: #f5f5f0;
      --gd-cream: #faf8f2;
      --gd-light-gray: #e8e8e3;
      --gd-mid-gray: #9e9e99;
      --gd-dark-gray: #3d3d3a;
      --gd-stone: #c8c4bc;
      --gd-charcoal: #2a2a28;
      --gd-ink: #1a1a18;
      --gd-red: #e63222;
      --gd-red-hover: #b8281c;
      --gd-blue: #1a5cff;
      --gd-blue-hover: #1244cc;
      --gd-yellow: #ffe424;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--gd-white);
      color: var(--gd-black);
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      font-weight: 400;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4 {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: -0.03em;
    }

    /* Navigation */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 40px;
      border-bottom: 1px solid var(--gd-light-gray);
    }

    nav .logo {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--gd-black);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    nav ul {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    nav ul a {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 0.85rem;
      color: var(--gd-mid-gray);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    nav ul a:hover {
      color: var(--gd-black);
    }

    /* Hero */
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 92vh;
      max-width: 1200px;
      margin: 0 auto;
      padding: 100px 40px 80px;
    }

    .hero h1 {
      font-size: clamp(4rem, 13vw, 13rem);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 0.85;
      text-transform: uppercase;
      margin-bottom: 48px;
    }

    .hero h1 .thin {
      font-weight: 300;
      letter-spacing: -0.02em;
    }

    .hero h1 .accent {
      color: var(--gd-red);
    }

    .hero-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 40px;
      padding-top: 40px;
      border-top: 1px solid var(--gd-light-gray);
    }

    .hero-intro {
      font-weight: 300;
      font-size: 1.1rem;
      color: var(--gd-dark-gray);
      max-width: 420px;
      line-height: 1.7;
    }

    .hero-scroll {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gd-mid-gray);
      text-align: right;
      white-space: nowrap;
    }

    .hero-scroll span {
      display: block;
      margin-top: 8px;
      font-size: 1.4rem;
      letter-spacing: 0;
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }

    /* Divider */
    .divider {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .divider hr {
      border: none;
      height: 1px;
      background: var(--gd-light-gray);
    }

    /* About / Content Row */
    .content-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 100px 40px;
      align-items: start;
    }

    .content-row .label {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gd-mid-gray);
      margin-bottom: 20px;
    }

    .content-row h2 {
      font-size: clamp(2rem, 4vw, 3.5rem);
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 24px;
    }

    .content-row p {
      font-size: 1rem;
      color: var(--gd-dark-gray);
      line-height: 1.7;
      max-width: 480px;
    }

    .content-row p + p {
      margin-top: 16px;
    }

    .content-row .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-top: 48px;
    }

    .stat-number {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 0.8rem;
      color: var(--gd-mid-gray);
    }

    /* Dark Section / Statement */
    .dark-section {
      background: var(--gd-black);
      color: var(--gd-white);
      padding: 120px 0;
    }

    .dark-section .inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: center;
    }

    .dark-section .label {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gd-mid-gray);
      margin-bottom: 32px;
    }

    .dark-section .statement {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(2rem, 5vw, 4.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      max-width: 900px;
      margin: 0 auto 40px;
    }

    .dark-section .statement .light {
      font-weight: 300;
      color: var(--gd-mid-gray);
    }

    .dark-section .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gd-white);
      color: var(--gd-black);
      border: 2px solid var(--gd-white);
      padding: 14px 32px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
    }

    .dark-section .btn:hover {
      background: transparent;
      color: var(--gd-white);
      letter-spacing: 0.14em;
    }

    /* Projects / Cards */
    .projects {
      max-width: 1200px;
      margin: 0 auto;
      padding: 100px 40px;
    }

    .projects .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 60px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--gd-light-gray);
    }

    .projects .section-header h2 {
      font-size: clamp(2rem, 4vw, 3.5rem);
      letter-spacing: -0.03em;
    }

    .projects .section-header .label {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gd-mid-gray);
    }

    .card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      padding: 48px 0;
      border-bottom: 1px solid var(--gd-light-gray);
      text-decoration: none;
      color: inherit;
      align-items: center;
      transition: border-color 0.3s ease;
    }

    .card:hover {
      border-color: var(--gd-black);
    }

    .card-visual {
      background: var(--gd-off-white);
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .card-visual .placeholder {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      color: var(--gd-stone);
      text-transform: uppercase;
      user-select: none;
    }

    .card-content .card-label {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gd-mid-gray);
      margin-bottom: 12px;
    }

    .card-content h3 {
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 16px;
      transition: letter-spacing 0.3s ease;
    }

    .card:hover .card-content h3 {
      letter-spacing: 0em;
    }

    .card-content p {
      font-size: 0.95rem;
      color: var(--gd-mid-gray);
      line-height: 1.6;
      max-width: 400px;
    }

    .card:nth-child(even) {
      direction: rtl;
    }

    .card:nth-child(even) > * {
      direction: ltr;
    }

    /* Contact / CTA */
    .cta {
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 40px;
      text-align: center;
    }

    .cta .label {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gd-mid-gray);
      margin-bottom: 24px;
    }

    .cta h2 {
      font-size: clamp(3rem, 10vw, 10rem);
      letter-spacing: -0.05em;
      line-height: 0.9;
      text-transform: uppercase;
      margin-bottom: 40px;
    }

    .cta h2 .thin {
      font-weight: 300;
      letter-spacing: -0.02em;
    }

    .cta .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gd-black);
      color: var(--gd-white);
      border: 2px solid var(--gd-black);
      padding: 16px 40px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
    }

    .cta .btn:hover {
      background: transparent;
      color: var(--gd-black);
      letter-spacing: 0.14em;
    }

    /* Footer */
    footer {
      background: var(--gd-black);
      color: var(--gd-mid-gray);
      border-top: 1px solid var(--gd-charcoal);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 40px;
    }

    .footer-brand {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gd-white);
    }

    .footer-links {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    .footer-links a {
      font-size: 0.8rem;
      color: var(--gd-mid-gray);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--gd-white);
    }

    .footer-copy {
      font-size: 0.75rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
      nav {
        padding: 20px 24px;
      }

      nav ul {
        gap: 20px;
      }

      .hero {
        min-height: auto;
        padding: 60px 24px 48px;
      }

      .hero-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .hero-scroll {
        text-align: left;
      }

      .content-row {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 24px;
      }

      .content-row .stats {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      .dark-section {
        padding: 80px 0;
      }

      .projects {
        padding: 60px 24px;
      }

      .card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 0;
      }

      .card:nth-child(even) {
        direction: ltr;
      }

      .cta {
        padding: 80px 24px;
      }

      .divider {
        padding: 0 24px;
      }

      .footer-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 28px 24px;
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#" class="logo">Grotesk</a>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <h1>
      <span class="thin">The</span> Bold<br>
      Weight <span class="accent thin">of</span><br>
      Type
    </h1>
    <div class="hero-bottom">
      <p class="hero-intro">
        Massive grotesque letterforms command the viewport. Swiss precision
        meets display-scale drama. Typography is the design.
      </p>
      <div class="hero-scroll">
        Scroll to explore
        <span>&darr;</span>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider"><hr></div>

  <!-- About -->
  <section class="content-row" id="about">
    <div>
      <p class="label">001 &mdash; Philosophy</p>
      <h2>Type as the<br>primary material</h2>
      <p>
        Grotesk Display strips design to its typographic skeleton. Descended
        from the sans-serif revolution that began with Akzidenz-Grotesk in 1896
        and was refined by Swiss modernists in the 1950s, this aesthetic makes
        a singular argument: the letterform is enough.
      </p>
      <p>
        Scale a grotesque to viewport-filling proportions, contrast hairline
        thin against ultra-black, and the result is a composition that needs
        nothing more. No imagery. No illustration. Just type.
      </p>
    </div>
    <div>
      <div class="stats">
        <div>
          <div class="stat-number">128</div>
          <div class="stat-label">Years of grotesque type heritage</div>
        </div>
        <div>
          <div class="stat-number">14vw</div>
          <div class="stat-label">Typical display heading scale</div>
        </div>
        <div>
          <div class="stat-number">100+</div>
          <div class="stat-label">Weight range: Thin to Black</div>
        </div>
        <div>
          <div class="stat-number">2</div>
          <div class="stat-label">Colors needed: black and white</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider"><hr></div>

  <!-- Dark Statement Section -->
  <section class="dark-section">
    <div class="inner">
      <p class="label">Manifesto</p>
      <p class="statement">
        When type is <span class="light">bold enough,</span>
        everything else becomes
        <span class="light">silence.</span>
      </p>
      <a href="#" class="btn">
        Read More
        <span>&rarr;</span>
      </a>
    </div>
  </section>

  <!-- Projects -->
  <section class="projects" id="projects">
    <div class="section-header">
      <h2>Selected<br>Work</h2>
      <p class="label">002 &mdash; Projects</p>
    </div>

    <a href="#" class="card">
      <div class="card-visual">
        <span class="placeholder">Aa</span>
      </div>
      <div class="card-content">
        <p class="card-label">Branding</p>
        <h3>Typographic Identity System</h3>
        <p>
          A complete brand identity built exclusively from grotesque
          letterforms, weight contrast, and negative space.
        </p>
      </div>
    </a>

    <a href="#" class="card">
      <div class="card-visual">
        <span class="placeholder">Rg</span>
      </div>
      <div class="card-content">
        <p class="card-label">Editorial</p>
        <h3>Display Magazine Redesign</h3>
        <p>
          Oversized condensed headlines meet disciplined Swiss grids
          in this editorial layout for a contemporary design journal.
        </p>
      </div>
    </a>

    <a href="#" class="card">
      <div class="card-visual">
        <span class="placeholder">Bk</span>
      </div>
      <div class="card-content">
        <p class="card-label">Web</p>
        <h3>Monochrome Portfolio Platform</h3>
        <p>
          A black-and-white portfolio site where viewport-scale type
          replaces hero imagery, proving that letterforms are enough.
        </p>
      </div>
    </a>
  </section>

  <!-- CTA -->
  <section class="cta" id="contact">
    <p class="label">003 &mdash; Contact</p>
    <h2>
      <span class="thin">Let's</span><br>
      Work
    </h2>
    <a href="#" class="btn">
      Get in Touch
      <span>&rarr;</span>
    </a>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-inner">
      <span class="footer-brand">Grotesk</span>
      <ul class="footer-links">
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Dribbble</a></li>
        <li><a href="#">GitHub</a></li>
        <li><a href="#">LinkedIn</a></li>
      </ul>
      <span class="footer-copy">&copy; 2026 Grotesk Display. All rights reserved.</span>
    </div>
  </footer>

</body>
</html>

Implementation Tips

  • Use variable fonts when available -- fonts like Space Grotesk with a wght axis allow smooth weight transitions on hover (e.g., font-variation-settings: 'wght' 300 transitioning to 'wght' 700) without loading multiple font files
  • Apply clamp() for responsive display type -- font-size: clamp(3rem, 12vw, 12rem) ensures headings scale fluidly from mobile to widescreen without media query breakpoints
  • Enable font smoothing for crisp letterforms -- use -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale to ensure the thin weights of grotesk fonts render cleanly on macOS and Firefox
  • Preload display fonts to prevent FOUT -- add <link rel="preload" href="font.woff2" as="font" crossorigin> for the primary display font to minimize visible font swaps on page load
  • Test extreme weight contrast at multiple viewports -- a Thin (300) heading that reads beautifully at 14vw on desktop may become illegibly thin on a 375px mobile screen; verify rendering across devices
  • Keep body text measure between 50 and 75 characters -- even though display headings span edge to edge, body paragraphs should use max-width: 540px (or equivalent ch-based units) for comfortable reading
  • Use letter-spacing transitions for hover states -- animating tracking from -0.04em to 0em on display links creates a subtle, type-native interaction that reinforces the grotesk aesthetic without resorting to color changes
  • Limit accent color usage to one or two instances per viewport -- the power of Signal Red or Electric Blue in a monochromatic composition comes from scarcity; overusing it destroys the contrast that makes it effective
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.