Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

How-to

Setting weight and contrast in Font by Zaweba

How the weight and contrast sliders in Font by Zaweba take your letters from hairline to black, and shift thickness between horizontals and verticals.

Setting weight and contrast in Font by Zaweba

The two sliders that change a typeface's character most quickly are weight and contrast. Weight decides how heavy the strokes are, and contrast decides whether every stroke is the same thickness or whether some are thinner than others. Between them they set the tone of a font before you add a single serif or decoration.

In Font by Zaweba both live in the style stack, the ordered list of operations that sits on top of the base alphabet. Like every other operation there, weight and contrast have an on and off switch, their own sliders and a reset, and any change you make applies to the whole alphabet at once. Spacing and kerning are redone after each change, so a heavier font doesn't end up with letters crammed against each other.

How the weight slider works

Weight runs from 10, which is a hairline, up to 240, which is black. The reason it can be a single number is the way the base alphabet is built. Every letter is stored as a centre line, a skeleton, and a pen strokes along that line to make the visible shape. Change the width of the pen and every letter gets heavier or lighter together, with no redrawing.

For most reading text you'll want to stay well away from both ends. A very light weight looks elegant at large sizes on a poster and disappears at small sizes on paper. A very heavy weight makes a striking headline but the counters (the enclosed spaces in letters like e, a and o) start to fill in. Somewhere in the middle of the range is where a comfortable text face sits, and you'll find it faster by watching the preview than by aiming for a particular number.

What contrast does

Contrast runs from -0.8 to 0.8. At zero, horizontal and vertical strokes are the same thickness, which gives the even, modern look of a lot of sans serif type. Move the slider to the right and horizontals become thin while verticals stay full. That's the pattern most traditional book faces follow, and it's what makes them feel calm and classical.

Move it to the left and the opposite happens: verticals go thin and horizontals stay thick. This reversed contrast looks unusual and a little theatrical. It's the sort of thing you see on old circus posters and Western style lettering, and it pairs well with a slab serif or a heavy weight if you want something loud for a headline.

Getting a good balance

Weight and contrast affect each other. At a light weight, strong contrast can make the thin strokes so fine they vanish, especially once a font is printed small. At a heavy weight, the same contrast setting is much easier to see. So it helps to settle the weight first, then add contrast a little at a time while watching the letters with the most horizontals, such as E, F, T and z, and the round ones like o and e.

The live preview is the place to judge this. Show your text as a waterfall of sizes and look at the smallest lines as well as the largest. If the thin strokes start to break up at small sizes, ease the contrast back. You can also switch the preview to white on black, which shows quickly whether thin strokes still hold up when the background is dark.

How they fit with the rest of the stack

Because the style stack is ordered, weight and contrast work with whatever comes after them. Serifs attach to the stem ends of the weighted letters, outline turns the weighted shape hollow, and pattern fill fills it. A heavier weight gives patterns and outlines more room to show, which is why the bold looking presets make good starting points for decorative fonts.

If you plan to export a four-style family, remember that the Bold style adds its own extra weight on top of the Regular. Leave yourself room. A Regular that is already near black has little space left for a Bold that looks clearly different.

Pitfalls with heavy and light weights

The most common one is judging weight at a single large size. Letters always look lighter big than small, so check the waterfall. Another is pushing contrast hard and then adding a hairline serif, which gives a lot of very thin parts that print poorly. And if a letter you edited by hand looks out of step after a weight change, open it in the glyph editor's Skeleton mode: editing the centre line rather than the outline is what keeps weight changes clean.

Weight and contrast are quick to try and quick to reset, so experiment freely. A few minutes moving these two sliders will tell you more about the font you want than any amount of planning.