Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debug Playfair SC (small-caps) and consider not using it #54

Open
lyzadanger opened this issue Feb 25, 2024 · 0 comments
Open

Debug Playfair SC (small-caps) and consider not using it #54

lyzadanger opened this issue Feb 25, 2024 · 0 comments
Labels
design Layout, design, aesthetics, formatting

Comments

@lyzadanger
Copy link
Owner

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):

image

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:

image

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:

image

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).

image

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?
@lyzadanger lyzadanger added the design Layout, design, aesthetics, formatting label Feb 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Layout, design, aesthetics, formatting
Projects
None yet
Development

No branches or pull requests

1 participant