Type is the first thing a client reads and the last thing they notice. This is the shelf Zyqor Studio builds with: seven free faces, five pairings tested on real layouts, and the handful of rules we set them by.
ShelfSeven typefaces, all free for commercial work and all self-hosted. Each earns its place by doing one job better than the rest. Pick a row to open its specimen.
Every glyph we ship, a size waterfall, a weight run and a paragraph setting. Hover or tab through the grid to inspect a glyph against its real metrics.
Five pairings we have tested on real layouts, not on a sample line. The brands are fictional concepts; the typesetting decisions are the ones we would make for a client.
Served from the first rain until Durga Puja
Why the best-looking pages spend most of their effort on things you never notice.
Words: Margin desk · 9 min
Open any page you trust and measure it. The margins are wider than they need to be, the columns narrower, the headline smaller than your first instinct. None of it is an accident.
A grid is a promise to the reader that the next thing will be where they expect it. Keep that promise and you can afford one surprise per spread.
Break it every few inches and the surprise stops working.
Type a brand name or a headline you are working on. Pick a pairing, then set size, tracking and leading. The CSS underneath is ready to paste.
This paragraph is set in the pairing’s text face at 18 px on a 1.55 line height, with a measure capped at 62 characters. Click it and type your own copy to see how the two faces sit together.
Four rules cover most of what makes a page feel typeset rather than typed. Each one below is live: change it and watch the page react.
Sizes come from a base of 16 px multiplied by one ratio. We use 1.25 for content-heavy sites and 1.333 or more when the page is mostly headline. Random sizes are the fastest way to make a page look template-made.
Long lines make the eye lose its place on the return; short ones break the sentence into a stutter. Somewhere between sixty and seventy-five characters, reading stops being work. Drag the slider and watch the count.
Field Kettle 02
Field Kettle 02
Kettle
Fonts are spaced for reading sizes. Past about 40 px the gaps look loose, so display lines lose 2 to 5 percent of an em. Small caps and labels go the other way.
| Mon | 1,111.10 |
| Tue | 8,048.00 |
| Wed | 711.71 |
| Thu | 19,101.11 |
| Mon | 1,111.10 |
| Tue | 8,048.00 |
| Wed | 711.71 |
| Thu | 19,101.11 |
Ones in proportional figures are narrow, so columns drift. Tables, prices and timers get tabular figures; running text keeps proportional ones. Recipes get real fractions. All set in Satoshi.