At first sight the new visual identity for the San Francisco Symphony (pictured below, on the right) looks a bit off …
Those letters sure look a bit oddly sized, no? Turns out there’s a dynamic drive behind them:
Leveraging new creative technology including variable font design, our new visual language (of which the logo is just the beginning) will use typography itself to bring the essence of sound and music to life.
Bringing typography to life through sound? The SYMPHOSIZER website let’s you do exactly that.
Let the site have access to your microphone and start making some noise!
Lifting up the hood using view-source: they use p5 to capture the audio and after some processing pass the resulting numbers to font-size, font-variation-settings, and transform: skew().
In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem.
You can see the issue below: the 32px gap between all text ends up too be more than 32px because of this:
The leading-trim properties allow controlling the spacing above and below the first and last lines of a block. It allows precise control over spacing; moreover, by relying on font metrics rather than hard-coded lengths, it allows content to be resized, rewrapped, and rendered in a variety of fonts while maintaining that spacing.
Vertical Centering of Text is explicitly mentioned in the specification of this new property. Use it as follows:
text-edge: cap alphabetic;
As Wang notes:
The example above first uses text-edge (also a new property) to tell the browser the desired edge of the text is the cap height and the alphabetic baseline. Then it uses leading-trim to trim it from both sides.
These two simple lines of CSS create a clean text box that hugs your text. This helps you achieve much more accurate spacings and create a better visual hierarchy.
Richard has done a nice writeup on hyphenation in CSS. Turns out we have some nice controls to tweaking how hyphenation on your site works:
There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.
In the image above for example you can see hyphenate-limit-lines at work (on the right), which can limit the number of consecutive lines with hyphens.
Using the hanging-punctuation CSS property it’s possible to control whether a punctuation mark should hang at the start or end of a line of text, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment.
To cater for browser that don’t support hanging-punctuation you can (somewhat) fake hanging-punctuation: first; using a negative text-indent, along with an override for browser that do (using @supports):
When applying text-decoration: underline; on an element, the line drawn will cross descenders.
Using text-decoration-skip one can control the behavior of the underline
The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
When set to ink, the underline will skip over descenders:
The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
Deep dive CSS: font metrics, line-height and vertical-align →