10/28/17 Development Update: New editor framework (markdown support!), speed improvements, style improvements
post by habryka (habryka4) · 2017-10-28T09:59:07.667Z · LW · GW · 11 commentsHere 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.
11 comments
Comments sorted by top scores.
comment by Said Achmiz (SaidAchmiz) · 2017-10-29T06:37:21.533Z · LW(p) · GW(p)
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.
Replies from: habryka4↑ comment by habryka (habryka4) · 2017-10-29T08:51:43.951Z · LW(p) · GW(p)
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).
Replies from: SaidAchmiz↑ comment by Said Achmiz (SaidAchmiz) · 2017-10-29T19:35:36.751Z · LW(p) · GW(p)
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).
comment by Malo (malo) · 2017-10-29T21:24:27.246Z · LW(p) · GW(p)
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.
Replies from: habryka4↑ comment by habryka (habryka4) · 2017-10-29T21:38:55.071Z · LW(p) · GW(p)
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.
Replies from: SaidAchmiz↑ comment by Said Achmiz (SaidAchmiz) · 2017-10-29T23:13:47.191Z · LW(p) · GW(p)
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
)
Replies from: habryka4, habryka4↑ comment by habryka (habryka4) · 2017-10-31T23:13:41.979Z · LW(p) · GW(p)
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.
Replies from: SaidAchmiz↑ comment by Said Achmiz (SaidAchmiz) · 2017-11-01T02:35:16.318Z · LW(p) · GW(p)
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).
Replies from: habryka4↑ comment by habryka (habryka4) · 2017-11-01T03:05:41.997Z · LW(p) · GW(p)
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.
↑ comment by habryka (habryka4) · 2017-10-30T00:29:20.398Z · LW(p) · GW(p)
Oh, excellent! I will look at all of them.
comment by Raemon · 2017-10-28T23:08:13.202Z · LW(p) · GW(p)
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)