Proofing: spacing, kerning, and outline harmony

[thundernixon]

I’ve made some proofs and have gone over them in search of stand-out visual issues which I believe would be worth addressing. Obviously, I am affected by my own experiences and biases. Some of these noted issues are more "urgent" or impactful than others. Overall, I hope that this will provide a set of things worth looking at again – it can be used as a set of “tests” to run or questions to ask in the further refinement of the fonts. I’m obviously not knocking the project in any way – it's an ambitious and useful open-source typeface – I'm just pointing out things that I believe could be make the fonts even better.

Process

This proofing is on the fonts versions as of Feb 27, 2019, focusing on the master weights, at font sizes that I guess to be their approximate intention (but also zooming in and out somewhat).

I used the web “lab” to typeset some basic spacing and kerning tests in the masters (Thin, Regular, Black, plus italics) and exported these into PDFs. I then printed these PDFs on a laser printer and also loaded them onto an iPad, then made annotations looking between the proofs. I have cross-checked a few things in Glyphs for their logic or exact values, but most so far are from observation in proofs. I have also sought some additional feedback from other designers, so a few of these notes aren’t only from me.

I've made the notes as checkbox-bullet points more because that's a personal workflow I find handy, not because I'm saying that 100% of these tasks must be completed.

I haven't made these changes so far. Instead, I want to share them first, and then have a discussion about whether you'd prefer me to make a PR with suggested changes, or if you would instead just let you work through them yourself, moving forward.

I still have to complete proofing the italics, and it would be valuable to look at more non-English usage, especially to get a sense for how the diacritics are working. Still, I wanted to post this here as a start, to share that I've been looking at it and spur a conversation if it's useful. I'll make a few updates in the upcoming days. :-)

Fonts & observations/opinions

Overall issues between all masters

I've de-duplicated my critiques for the most part, logging repeating items here. Below, I attach issues specific to each master, with marked-up proofs showing how I was looking at things.

Spacing

• [ ] wordspace is a bit wide, esp. in Regular
• [ ] /one is loose
• [ ] /three, /seven, & /eight are a bit loose
• [ ] brackets, slashes, asterisk, parentheses, guillemets all have fairly loose spacing, in comparison to other glyphs. Is this intentional?
• [ ] punctuation needs more kerning attention
  • [ ] /question and /questiondown could use kerning, esp. w/ rounds
  • [ ] commas against rounds & diagonals
• [ ] when adjacent, /i and /l appear to be tighter than other letters ... apparently, some fonts give these letters a bit of extra spacing. I doubt that's the right solution here, but it might be worth a little exploration / analysis of other fonts.
• [ ] /Z and /z are loose
• [ ] (especially in italics) make sure glyphs that should have symmetrical spacing, do. There are lots of 1 or 2 unit differences that don’t have a horrible impact, but which don’t have a reason to be there. I see that the upright and slants are duplexed (nice for interfaces!), but this would be easy enough to script a fixer or reporter for and fix without disrupting the duplexing.
• [ ] In Light, diagonals have a bit too much kerning in some combinations, but these feel often feel a bit loose in the Regular, and noticeably too loose in the Black. In general, match average space “volumes” a bit more, rather than "minimum" distances. Combinations that stand out as needing special attention are:
  • [ ] ro
  • [ ] ox
  • [ ] ex xe (etc)
  • [ ] oz zo (rounds w/ z)
  • [ ] jj
  • [ ] AW WA (close but not quite even)
  • [ ] VO OV (etc)
  • [ ] SW WS
  • [ ] LO
  • [ ] AY YA
  • [ ] LY LT LV
  • [ ] OY YO (etc)
  • [ ] GT
  • [ ] KO XO (etc)
  • [ ] CA
  • [ ] Au
  • [ ] Ed, Eo, (etc)
  • [ ] Ka, Ku, Ko (etc)
  • [ ] Vo, Vs
  • [ ] Wu
  • [ ] Xa, Xe, Xy
  • [ ] Yp, Ys
• [ ] punctuation needs more kerning attention against caps and lowercase

Shapes

• [x] /r.alt flag not yet consistent against verticals, etc (discussion below in thread)
• [ ] potentially, an /f.alt (similar to /r.alt) could be useful in fl, fb, fh, etc
• [x] /degree shouldn't be slanted
• [ ] /colon probably shouldn't be vertically centered for caps – only for numbers
• [x] /asterisk probably shouldn't be vertically centered for caps – only for numbers
• [x] /numbersign needs to lean slightly more, or it looks backslanted in italics

Thin

inter_100-spacing_proof_24pt-feb_21_2019.pdf

Spacing

• [ ] Overall, spacing is somewhat tight for such a light weight
• [ ] several cap diagonals seem overly-kerned against diagonals and rounds
• [ ] - and + are used in proofs to show spacing or kerning issues. If a letter is consistently marked, the spacing is probably the issue. If it’s just a specific combination, it’s more likely to be kerning.
  • [ ] /A spaced a bit tight
  • [ ] /b loose on left?
  • [ ] /two and /three are a bit loose

Shapes

• [ ] Most letters are too narrow – especially /n, /t, /m, /f, /v, /x, /y, /k, /A, /T
• [ ] /zero, /six, /nine narrower than other figures
• [ ] /o, /e, /c, /six, /nine are overly elliptical in shape, compared to heavier weights and other glyphs in Light (e.g. /n, cap /O, etc). They’re a bit “pointy” on top and bottom, and will need to be just slightly squarer to look properly round.
• [ ] the joints in /b and /n are at very different heights – probably, the lowercase counters are overly symmetrical
• [ ] /A crossbar feels a touch too high – top and bottom spaces don’t quite feel “equal” yet
• [ ] /r.alt is a bit too extreme – too much difference from default /r, and has maybe a bit too much right margin
• [ ] /u visually wider than /n (though, /n is too narrow, which should be changed first). /u needs slight width compensation because the top is open)
• [ ] braces, brackets, and parentheses feel quite narrow
• [ ] the dots of /i and /j feel a bit low – in other masters, this roughly matches the top height of caps/ascenders, but here, it's somewhat below

Thin Italic

inter_100_italic-spacing_proof_24pt-feb_22_2019.pdf

Shares overall issues with roman light. Thin Italic is super tricky to draw – especially if it has to interpolate to upright – so some of these issues are just side-effects of skew transformation from the upright Thin.

Spacing

• [ ] /n seems too loose on right side, which has cascading spacing issues, not just with /a and /h, but also makes many glyphs look too far to the right of their space
• [ ] Some diagonals are a bit closer to the left side (/w, /v) or to the right side (/x, /o). /X, /T, /H, /numbersign
• [ ] cap verticals feel looser than rounds

Shapes

• [ ] also pretty narrow
• [ ] “ellipticalness” of rounds is less pronounced here, but maybe they could still get a hair rounder
• [ ] /s curves have too much tension near terminals – not quite corrected enough from skew transformation
• [ ] /k bottom leg slightly light
• [ ] /q thicker at top-right and bottom-left
• [ ] cap /O, /B, /C, /G, /U, /question skew doesn’t quite feel completely corrected yet
• [ ] /backslash not corrected – too thick
• [ ] braces, brackets, and parentheses feel quite narrow

Regular

inter_400-spacing_proof_16pt-feb_21_2019.pdf

Spacing

• [ ] /R is a bit tight on RSB
• [ ] kerning could be tighter in certain combinations to give a more uniform appearance of spacing across the family.
• [ ] certain letters (T, Y, J) could (maybe) be kerned a bit against /space this can cause issues, so it's debatable: discussion on Twitter

Shapes

• [ ] diagonal stems look a bit thick compared to vertical stems – they should be slightly thinner
• [x] /r alt could be used against more verticals – /l, /b, /h, etc
• [ ] counters could potentially cut into stems slightly – the smooth connections make stems on letters p, d, b, q look a bit thicker than other stems
• [ ] curved strokes are currently the same thickness as vertical stems at the thickest point, rather than overall. Curves need to be slightly thicker than straight strokes to visually match weight, because curves taper somewhat.
• [ ] strokes connecting bowls to stems taper just a bit suddenly in /b, /g, /d, etc. This is from inflected (or nearly inflected) handles in these spots. If they are balanced out and the curve tension lowered slightly, they will look nicer.
• [ ] currently, the /a is less smooth than the Black weight in two ways:
  • [ ] the top-left of the /a bowl has a curve which is a bit sharp
  • [ ] the bowl-to-stem connection in the /a is so tight, it looks like a sharp connection below ~50px
• [ ] /A looks maybe just slightly narrow
• [x] /percent and /perthousand look a bit light next to numbers (nevermind; see thread below)

Regular Italic

inter_400_italic-spacing_proof_16pt-feb_22_2019.pdf

Spacing

• [ ] left side of /b matches /H, but should match /n
• similar kerning issues to regular

Shapes

• [ ] /a has slight kink just above bowl/stem connection (only visible at large sizes)
• [ ] the shoulder (top-right) of /n looks a bit thicker than the stems. /u has the mirror issue.
• [ ] diagonals /k, /R, /Y, /X could use a hair more adjustment to keep the overall contrast
• [ ] the /s feels a bit off ... my proof says "leaning back," but with another look, I think it's that the top-right and bottom-left (near the terminals) have curves that are a bit too tight
• [ ] /z and /Z stems are slightly thin
• [ ] /numbersign seems to lean back

Black

inter_900-spacing_proof_24pt-feb_21_2019.pdf

Spacing

• [ ] uppercase verticals (/H, /M, etc) appear to be spaced even more tightly than lowercase – this causes problems in mixed-case settings (E.g. sentences, logos, labels, etc)
• [ ] uppercase rounds (/O, /D, etc) appear to be spaced a bit looser than lowercase
• [ ] uppercase diagonals have a bit too much space
• [ ] lowercase rounds appear to be slightly tighter than verticals
• [ ] left side of /j just a hair too tight
• [ ] a few “crashes” could potentially be beneficial in this weight – AA, VV, etc (it's understandable if you don't want any touching, though)

Shapes

• [ ] diagonals (/A, /K, /M, /X, /V, /Y, /v, /y, /w) appear a bit reverse-contrast. They have thicker sw–ne strokes than nw–se strokes (e.g. right side of V looks thick, left side looks about right)
• [ ] bottom leg of /R and /K can be just slightly thicker
• [ ] left side of /y could be a bit less-vertical. maaaybe the tail could also be a bit longer
• [ ] /S seems too have a slightly-reversed contrast – spine looks light compared to top and bottom
• [ ] /r flag is a bit light
• [ ] dot (e.g. in /i, /j, etc) looks overly small – could expand downward a bit, could potentially get a bit more wider than tall
• [ ] diagonals on /x could be less vertical … currently, there is a dark spot in the center
• [ ] /w is a bit darker than n, o
• [ ] /one stem looks thicker than other number stems, esp. /seven stem
• [ ] comma, single quote, and most accent marks are a little light
• [ ] center of bars could be removed or visually compensated in bold weights ($, /cent, etc)

Black Italic

inter_900_italic-spacing_proof_24pt-feb_22_2019.pdf

Spacing

• [ ] in caps, sidebearings of straight stems (/H, /M, etc) are tighter than in lowercase (/n, /l, etc). This throws off the spacing in the rest of the caps when they're set together, because it's hard for the other letters to match that tightness. Instead, the caps should match or (very slightly) exceed the lowercase spacing.
  • [ ] It seems like the other caps will look more natural with spacing updates to verticals, but we should re-evaluate them once we loosen the verticals slightly
  • [ ] the /d shares the tighter spacing, but other lowercase letters don't
• [ ] /o sidebearings are (probably) just slightly too tight – they look tighter than verticals
• [ ] as in other bold weights, the diagonals could stand to be kerned more tightly, with a few exceptions, because the rest of the spacing is quite tight and the shapes are so prominent.
• [ ] /b RSB is loose
• [ ] diagonals have asymmetric spacing against rounds – e.g. OWO and OYO
  • [ ] this is also an issue in quotes, underscores, and slashes
• [ ] /j LSB is tight
• [ ] /V, /X and /Y might be loose – evaluate after fixing verticals

Shapes

• [ ] /a, /P shoulder (top-right curve) is a bit sharp
• [ ] bottom-right curve of /o, /c, /e, /O, /C, /G, /three is a but too shallow
• [ ] parentheses not corrected / don't look vertically even
• [ ] bowl of /O feels slightly off – "corners" don't yet visually match
• [ ] /S curves and thicknesses feel off in several spots. /s could also be refined, to a lesser extent.
  • [ ] top-left of /S and /s spine looks slightly thick to me
• [ ] Not all diagonals look quite corrected for slant. /x, /v, /k, /K, /R, /V, /Y, /Z, /two, /seven have too much contrast and don't appear to match other stem thicknesses.
• [ ] like in black, /x gets chunky at center
• [ ] /J isn't corrected for slant
• [ ] /three looks a bit light, especially at top stroke
• [ ] /r flag is a bit light

[rsms]

This is a fantastic start, Stephen. Let's move ahead with PRs.

[Regular] /r alt could be used against more verticals – /l, /b, /h, etc [Black] /r.alt really needs to be used against all verticals in this weight, if it’s used at all

Re. the "r": I've been thinking about making "r.alt" the default and "r" the alt; remove "r"/"r.alt" substitution from calt and make the current "r.alt" the default "r" (i.e. with straight-cut shoulder.) Though doing this would remove a bit of personality, I find the "r" with a curved shoulder to be a little too wide sometimes and tricky to work with for large-size text, especially in heavier weights. Alternatively throwing the curved-shoulder "r" away. What do you think?

[Regular] /percent and /perthousand look a bit light next to numbers

Let's make sure they render really crisply at small sizes. (~10pt) I ended up spending quite a bit of time on percent, degree and similar small detailed round shapes to make them highly legible at small sizes.

[Black] /S seems too have a slightly-reversed contrast – spine looks light compared to top and bottom

I'm pretty happy with the black-weight "S", but happy to let you try making it better! (It's one of the glyphs I've spent the most time on I think, in terms of shape.) I've mainly tried making "S" of the black weight look good at large sizes, so perhaps the low contrast of the spine is an effect of that.

[Black] /r flag is a bit light

What does "flag" mean? Where the shoulder joins the vertical stem perhaps? (If so, I reduced the weight there very intentionally to harmonize the "r" with "d", "b" et al (esp. at smaller sizes.) Again, I'm totally open for improvements if you think it would be impactful.

[Black] potentially, an /f.alt (similar to /r.alt) could be useful in fl, fb, fh, etc

Interesting! As we've discussed offline, Inter avoids ligatures that optimizes pairs or triplets of glyphs to make it possible to adjust spacing. This means that there're no "fi" "ffi" etc ligatures — this could be a good alternate approach to optimizing those combinations :–) It's a potentially low-impact thing, but might be fun and contribute to an over-all improvement to quality.

[Black] dot (e.g. in /i, /j, etc) looks overly small – could expand downward a bit, could potentially get a bit more wider than tall

Maybe we could "squeeze" the dot a little more for black in order to make it fatter without affecting alignment too much.

Here's a visualization of diacritic alignment:

---

I'm so excited for all of this!

[thundernixon]

/r vs /r.alt

I see there being two logical solutions here:

1. Making the substitution consistent: devising a systematic approach to which shapes the /r.alt is activated against – e.g. "r should have vertical endings against all vertical stems."
2. Following the example of horizontal-ish terminals (/a, /s, /e, /c, etc), the /r could have an angle in Light & Regular, and be vertical in Black.

Have you tried the latter already? If not, I think it would be worth testing.

[Black] /r flag

(Yes, I mean the part coming off of the stem. It could also be called an "ear," perhaps).

harmonize the "r" with "d", "b" et al (esp. at smaller sizes.)

For me, it's less important to harmonize the flag with the tops of "d", "b" et al, and more important to harmonize its bulk with the overall weight of the style (which comes more from the stems and edges of bowls). Because it has so much white space below, it tends to need just a bit more heft to compensate and hold its own, especially in heavier weights. The amount of this, however, is matter of opinion.

percent, degree and similar small detailed round shapes ... highly legible at small sizes.

Cool! That makes sense. They look pretty good.

[Black] /S contrast

My problem here is very slight ... I think it's a matter of only a few units. Overall, the black weight has a slight amount of contrast in caps, and I think the /S should visually match the /O. Right now it's a bit too monolinear – even at large sizes – so it doesn't quite match.

/f.alt (similar to /r.alt) could be useful in fl, fb, fh, etc

Maybe this would be a good separate issue...

Diacritic weight & alignment

[Black] dot (e.g. in /i, /j, etc)

Looking at the Black & Black Italic further, I feel that almost all the accent marks (dots, acutes, macrons, tilde, breve, etc) are somewhat light for the style.

Most of these could gain some weight without getting any higher (and potentially causing line crashes with descenders above), by simply growing outwards and downwards slightly. I'm sure they are probably more crisp at their current weight in small sizes, but the Black letters already aren't optimal for crispness at small sizes – the apertures in the /a, /e, /s, etc are all too tight to make this a practical text or caption weight. It's great for headlines and posters, so in my opinion, that's also what the accents should be optimized for. In face, a useful starting point for the distance of accents to letters might be the general gap thickness of apertures.

macron vs breve

Is there a reason these align on the bottom in Light, but the top in Regular and Black? In a way, I get the idea to match the /breve height to the caps & lowercase, but I think that it might be more logical & aesthetic to match these to the overall vertical space of other accents – especially /circumflex & /caron.

[rsms]

/r and /r.1 addressed in 56e2c754ce610569964d8b4b9411de2eaeb09881

That commit swaps r.1 ↔︎ r, and adds ss03 which enables contextual substitution of "r that curves into round neighbor" like "rd" and "rs".

[rsms]

/degree shouldn't be slanted

Fixed in e9035262c490a77326cc924b642ee20f793d91a4

[rsms]

/numbersign needs to lean slightly more, or it looks backslanted in italics

Fixed in 908432305c15144d670945e66723f2949597fc56 by making /numbersign about 1° more forward than the slant angle for italics.

[rsms]

FYI: I just published a new release: https://github.com/rsms/inter/releases/tag/v3.4