You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Google Fonts provides an all-small-caps Playfair as Playfair SC, which is handy, and is set as the font-smallcaps in tailwindcss config for this site presently. It's a nice font; you can see it at play (I also use the italic of it):
It's also possible to use regular Playfair and set small-caps using CSS (font-variant-caps:all-small-caps). The effect is, however, different; it would look something like:
Playfair SC isn't all small-caps in the sense that it still has capital capitals, versus the mono-height CSS fakery. There are a few places in the site when I do truly want single-height caps, and do use CSS small-caps, e.g. contact links. I don't want variant-height capitals here:
Other drawbacks of using CSS all-small-caps are:
I have to compensate by bumping the font size by about two "levels" in Tailwind. e.g. where font-base would suffice with Playfair SC, I have to use font-xl to make CSS small-caps approximately an equal height.
Alignment is tough with the CSS approach because none of the rendered glyphs exceed the x-height. This makes line-height and vertical alignment obnoxious and I've hand-tuned, e.g., the position of the icons vis-a-vis the text in the above contact links.
Obviously, one loses the finesse of the small-caps font, especially the delectable italic
But I apparently can't use Playfair SC indiscriminately either, as there is a bug in the fl ligature (see #53).
I've disabled ligatures in that instance to fix this. But then I get no ligatures!
So the questions are:
Is the payload ding of loading Playfair SC in italic, 400- and 900-weight worth it? As I write this, I'm still leaning yes because the rest of the site is so lean, but...
Do I need to disable ligatures on it every time I use it? Or do I just keep my eyes out like a hawk?
Should I add a custom tailwindcss utility class for font-variant-caps:all-small-caps (that's just an ergonomic thing)?
How much effort should I make to track down and report an issue about the SC fl ligature in the right place (is that place Google Fonts or the Playfair font's repository or...somewhere else?
The text was updated successfully, but these errors were encountered:
Google Fonts provides an all-small-caps Playfair as Playfair SC, which is handy, and is set as the
font-smallcaps
in tailwindcss config for this site presently. It's a nice font; you can see it at play (I also use the italic of it):It's also possible to use regular Playfair and set small-caps using CSS (
font-variant-caps:all-small-caps
). The effect is, however, different; it would look something like:Playfair SC isn't all small-caps in the sense that it still has capital capitals, versus the mono-height CSS fakery. There are a few places in the site when I do truly want single-height caps, and do use CSS small-caps, e.g. contact links. I don't want variant-height capitals here:
Other drawbacks of using CSS all-small-caps are:
font-base
would suffice with Playfair SC, I have to usefont-xl
to make CSS small-caps approximately an equal height.line-height
and vertical alignment obnoxious and I've hand-tuned, e.g., the position of the icons vis-a-vis the text in the above contact links.But I apparently can't use Playfair SC indiscriminately either, as there is a bug in the
fl
ligature (see #53).I've disabled ligatures in that instance to fix this. But then I get no ligatures!
So the questions are:
font-variant-caps:all-small-caps
(that's just an ergonomic thing)?fl
ligature in the right place (is that place Google Fonts or the Playfair font's repository or...somewhere else?The text was updated successfully, but these errors were encountered: