10/28/17 Development Update: New editor framework (markdown support!), speed improvements, style improvements
Here is a quick summary of the changes I just pushed:
We now have a new editor framework (we moved from ory-editor to draft-js-plugins). The primary reason for this was performance, though we also had a few other problems with the editor. Please let me know in case anything breaks, but overall I expect things to be a lot more stable now.
With the move to the new framework comes markdown support. So feel free to use markdown in any of the text fields from now, it should be automatically translated into its rich-text equivalent (you can insert block-level images via the Toolbar and inline-images via markdown)
We significantly decreased our bundle size with this update, though I still have some more cleaning up to do. The editor was the biggest part of the rework that I was blocked on, so wrapping up the performance improvements should now be a lot faster
We also made some style improvements and navigation improvements to the sequences and collection navigation. Though we are still wrapping up some stuff in that domain, so expect more in the coming days.
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.
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:
Arno Pro
Chaparral Pro
Kepler
Utopia
Warnock Pro
(There are of course many other good choices on Typekit, but I list these because:
they are good, readable text fonts
they all have larger x-heights than Garamond Premier Pro
I think you may like them w.r.t. theme fit
they also include a similar selection of optical sizes
)
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.
Oh, excellent! I will look at all of them.
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)