Ancestors

Written by Matthew Kay on 2024-11-24 at 04:56

To give an example of what I was talking about in this #datavis #typography thread: this figure uses at least seven (just counted!) different weights of Source Sans Variable to both create visual hierarchy/emphasis and to maintain even visual texture

RE: https://bsky.app/profile/did:plc:6fs5x6cofzyz4si2xhqiqj37/post/3lbnnlerwqc2s

=> View attached media

=> More informations about this toot | More toots from mjskay.com@bsky.brid.gy

Written by Matthew Kay on 2024-11-24 at 04:56

The top of the visual hierarchy is the function responsible for each layer --- 11pt heavy weight (900), to pull it above the body text (400) and variables (700) --- paired with a circled label ("B") at a smaller size (~8pt) but with weight (788) punched up to better match the function name

=> View attached media

=> More informations about this toot | More toots from mjskay.com@bsky.brid.gy

Toot

Written by Matthew Kay on 2024-11-24 at 04:56

Meanwhile in table headers, I set the Roman letters at a bit of an odd weight (634) to try to visually match the Greek letters from Cambria, which only has two weights and a different stroke contrast (ratio of thick to thin strokes), so I went for a kind of visual average --- maybe could be better

=> View attached media

=> More informations about this toot | More toots from mjskay.com@bsky.brid.gy

Descendants

Written by Matthew Kay on 2024-11-24 at 04:56

Source Sans doesn't have pre-drawn subscripts for cap letters (unlike numbers), so I faked them with all-caps letters at a smaller size (11pt -> 7pt) baseline-shifted down by 2pt, then bumped up the weight (634 -> 823) and increased tracking (10) to give a similar visual weight

=> View attached media

=> More informations about this toot | More toots from mjskay.com@bsky.brid.gy

Written by Matthew Kay on 2024-11-24 at 04:56

I also manually kerned the space between "(" and "x" because the default kerning tends not to work well for math expressions like f(x) --- particularly since the parens should be upright even when the variables are italic (a common mistake in manually-typeset math)

=> View attached media

=> More informations about this toot | More toots from mjskay.com@bsky.brid.gy

Written by Matthew Kay on 2024-11-24 at 04:56

There are probably a bunch of other little decisions I've forgotten (made this figure awhile back), but hopefully that shows some useful little tricks for maintaining even visual texture and creating subtle differences in emphasis

=> More informations about this toot | More toots from mjskay.com@bsky.brid.gy

Written by Richard Rutter on 2024-11-24 at 15:12

@mjskay.com thanks for the write up Matthew. I love the attention to detail here, especially varying the weights so precisely for specific situations. Excellent use case for how variable fonts can be used beyond combining multiple font files into one.

=> More informations about this toot | More toots from Richr@mastodon.social