Ec Square Sans Pro Font Work

@font-face 
  font-family: 'EC Square Sans Pro';
  src: url('fonts/ecsquare-sans-pro-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
body 
font-family: 'EC Square Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem; /* 16px base */
line-height: 1.45;
letter-spacing: 0.01em;

h1 
font-weight: 700;
font-size: 3rem;
letter-spacing: -0.02em;
line-height: 1.1;

The ultimate goal of EC Square Sans Pro font work is not to use the font "correctly" but to build a system. Here’s a modular scale you can steal:

Base size: 16px

Apply this system consistently across web, slides, and print. That is professional font work.

Even experienced designers fall into these traps: ec square sans pro font work

Because EC Square Sans Pro is geometric but neutral, it pairs well with:

| Pairing | Contrast | Use case | |---------|----------|-----------| | EC Square Sans Pro + Slab serif (e.g., Roboto Slab, Arvo) | Geometric vs. bracketed serifs | Editorial, tech blogs | | EC Square Sans Pro + Humanist sans (e.g., Source Sans Pro, Lato) | Cold geometric vs. warm organic | Corporate sites, apps | | EC Square Sans Pro + Monospace (e.g., JetBrains Mono, Fira Code) | Smooth vs. rigid | Developer docs, terminals | h1 font-weight: 700; font-size: 3rem; letter-spacing: -0

Avoid pairing with:

To use the font in design software (Photoshop, Illustrator, InDesign, Word, etc.), you must install it on your operating system. The ultimate goal of EC Square Sans Pro