What you want to do is to vary optical sizes.
Garamond Premier Pro has four: Display, Subhead, standard, and Caption. The four optical sizes differ in overall weight, and intra-glyph stroke weight variation, for any given weight value.
Take a look, for example, at this page on readthesequences.com. The body text is in Garamond Premier Pro Regular (i.e. 400 weight). The heading, on the other hand, is in Garamond Premier Pro Subhead Medium (i.e. 500 weight, and a different optical size).
The Display optical size is for the largest headings. (As the post title is displayed at 50px size, this optical size may be appropriate here, or it may not.)
The Subhead optical size is for all headings except the very largest ones. (This optical size may be appropriate for the post title, and is certainly appropriate for all other heading levels within a post.)
The standard optical size is for body text.
The Caption optical size is, as the name indicates, for small text like captions, as well as superscript footnote links, etc.
Edit: This was supposed to be a reply to Raemon’s comment—whoops.
Yeah, I am still planning to do that, but held off on it since it increased our bundle size too much, and I needed to do some optimizations first. In general the current font changes are just a hotfix for the readability issues on various devices, and I am still working on a larger typography rework (I have access to Garamond Premier Pro via my Typekit subscription, so me using this font is not a sign that I paid for it and so settled on it as being used in the future, so that might also still change).
Cool. FYI re: increasing bundle size: indeed, I agree that this is a concern. My suggestion is to make use of subsetting—which you probably know about… but the non-obvious bit of the suggestion is this:
For font variants intended to be used for headings, you can get away with grabbing a much smaller subset of glyphs (as headings are unlikely to contain characters of other languages, or small caps, or exotic punctuation, or… etc.) than you need for the body text font variant.
This can cut down on the resulting file size by quite a bit (especially when starting with a font which contains as exhaustive a set of glyphs as Garamond Premier Pro, or most other professional fonts).
I think the new font looks pretty good. I do think though for a body font the x-height is pretty small which makes is less readable.
Yeah, that is also my biggest problem with it. I might move towards Merriweather, which has a larger font-size, but fits a bit less with the theme of the page.
If you have access to Typekit, then here are some other typefaces to consider:
(There are of course many other good choices on Typekit, but I list these because:
)
Ok, after looking into all of these (and some others I found), I decided to go with Warnock Pro, which had a much larger x-height, while also preserving most of the aesthetic that I care about.
Let me know in case anything renders badly on Windows machines. I am currently working on setting up the caption version of the font for small post-previews on the frontpage, and seeing whether the Display version of the font might work better for our larger heading sizes.
Thanks a lot for the recommendations. This saved me a lot of work, and I really appreciate your help in all of this.
Glad to help.
Further feedback: I know you're still working on the site's typography, and what I see isn't final, but I do want to register a strong suggestion that you increase the point size of the text—especially of the comments. I have to zoom to 150% to read it comfortably, on my 22" desktop display. (I would recommend a point size of 21px.)
re: rendering: I haven't checked Windows yet, but on all the Linux installs I've got, the text seems to render fine (although the effect of the small point size is even more pronounced; zooming is absolutely necessary for it to be readable).
Yeah, I think increasing the font-size on posts a bit makes sense, though to do that I will also have to increase the central column width, since we are otherwise approaching a fairly low number of characters per line, but that should be doable.
While I agree that increasing the font-size on comments is more necessary, I am also worried that it's by far the most costly there, since increasing the height of any individual comment makes skimming the comment threads a lot more difficult.
I will give redisigning the comment area a try sometime in the next few days, and depending on how that goes, I might actually end up going with a sans-serif for the comments, which should then increase readability at the smaller font-sizes we have right now. FB seems to get away with a 12px font-size, which I do think is a bit too small, but it generally still seems fairly readable.
Playing around with a stylesheet, I think changing the font-weight of the Header titles to 300 (or just, "not bold") improves the experience with Garamond. (It looks like Garamond has 3 font-weights available, and the top two are both a bit too heavy to look classy)
Here is a quick summary of the changes I just pushed:
Edit: I also made some changes to the font and typography, as you might have noticed. I actually like this font (Garamond Premiere Pro) less, but the other one had rendering issues on Windows machines, so here we are. I will adjust the page piece by piece to work better with the new font, and in general add a bunch more font and typography polish soon.
On that note, I also slightly restructured the frontpage to have a bit of a less chaotic structure and be easier to skim. This cost us some vertical space, but I think is worth the cost in structure and getting rid of that weird card-hover interaction.