획 (Stroke)

In typography, a stroke is any individual line or curve that forms part of a letter. Every letterform is built from strokes: vertical strokes (stems), horizontal strokes (crossbars), diagonal strokes (arms of 'K', 'V', 'W'), and curved strokes (bowls, arches). Understanding strokes helps decode both the anatomy of letters and the fundamental language of type classification.

The two most important stroke properties are weight (thickness) and contrast (the variation between thick and thin). Strokes with consistent weight characterize sans-serif typefaces; strokes that vary from thick to thin indicate a calligraphic heritage in serif type.

/* High-contrast stroke variation — classical elegance */
.high-contrast {
  font-family: 'Playfair Display', serif;
  /* Horizontal strokes are hairline-thin; vertical strokes are bold */
}

/* Low-contrast stroke variation — modern uniformity */
.low-contrast {
  font-family: 'Inter', sans-serif;
  /* Horizontal and vertical strokes are nearly the same weight */
}

/* Artificially modifying stroke via CSS (use sparingly — not true type rendering) */
.faux-bold {
  -webkit-text-stroke: 0.5px currentColor; /* Adds uniform stroke outline */
}

The stress axis of strokes — the angle at which strokes transition from thick to thin — is a key characteristic in type classification. Old-style serifs have a diagonal stress (reflecting the angle of a broad-nib pen). Transitional serifs move toward vertical stress. Modern serifs achieve perfectly vertical stress, producing the dramatic horizontal hairlines typical of Didot or Bodoni.

When browser rendering adds artificial bold to a font that lacks a true bold weight (font-synthesis: weight), it thickens all strokes uniformly — a rough approximation that loses the carefully designed stroke contrast of a proper bold weight. This is why loading both regular and bold weights is preferable to relying on browser synthesis, especially for high-quality display typography.

The term "stroke" also appears in CSS's text-stroke / -webkit-text-stroke property, which applies an outline stroke around text glyphs. Unlike typographic stroke design (which is baked into the font), CSS stroke is applied externally and can produce overlapping or misshapen results with detailed letterforms. It's best reserved for creative headline effects rather than legible body text.