Musings on ideal formatting of posts (prompted by argument with Ben Pace)
My thoughts:
1) Working memory is important.
If a post talks about too many things, then in order for me to respond to the argument or do anything useful with it, I need a way to hold the entire argument in my head.
2) Less Wrong is for thinking
This is a place where I particularly want to read complex arguments and hold them in my head and form new conclusions or actions based on them, or build upon them.
3) You can expand working memory with visual reference
Having larger monitors or notebooks to jot down thoughts makes it easier to think.
The larger font-size of LW main posts works against this currently, since there are fewer words on the screen at once and scrolling around makes it easier to lose your train of thought. (A counterpoint is that the larger font size makes iteasier to read in the first place without causing eyestrain).
But regardless of font-size:
4) Optimizing a post for re-skimmability makes it easier to refer to.
This is why, when I write posts, I make an effort to bold the key points, and break things into bullets where applicable, and otherwise shape the post so it’s easy to skim. (See Sunset at Noon for an example)
Ben’s Counter:
Ben Pace noticed this while reviewing an upcoming post I was working on, and his feeling was “all this bold is making me skim the post instead of reading it.”
To which all I have to say is “hmm. Yeah, that seems likely.”
I pushed Oliver for smaller font size when I first saw the LW 2.0 design (I’d prefer something like the comments font), partly for the words-in-mind reason. I agree that bigger words work against complex and deep thinking, and also think that any time you force someone to scroll, you risk disruption (when you have kids you’re trying to deal with, being forced to interact with the screen can be a remarkably large negative).
I avoid bold and use italics instead because of the skimming effect. I feel like other words are made to seem less important when things are bolded. Using it not at all is likely a mistake, but I would use it sparingly, and definitely not use it as much as in the comment above.
I do think that using variable font size for section headings and other similar things is almost purely good, and give full permission for admins to edit such things in if I’m being too lazy to do it myself.
The current plan is to allow the authors to choose between a smaller sans-serif that is optimized for skimmability, and a larger serif that is optimized for getting users into a flow of reading. Not confident about that yet though. I am hesitant about having too much variance in font-sizes on the page, and so don’t really want to give authors the option to choose their own font-size from a variety of options, but having a conceptual distinction between “wiki-posts” that are optimized for skimmability and “essay-posts” that are optimized for reading things in a flow state seems good to me.
Also not sure about the UI for this yet, input is welcome. I want to keep the post-editor UI as simple as possible.
Hmm. Here’s the above post with italics instead, for comparison:
...
Musings on ideal formatting of posts (prompted by argument with Ben Pace)
My thoughts:
1) Working memory is important.
If a post talks about too many things, then in order for me to respond to the argument or do anything useful with it, I need a way to hold the entire argument in my head.
2) Less Wrong is for thinking
This is a place where I particularly want to read complex arguments and hold them in my head and form new conclusions or actions based on them, or build upon them.
3) You can expand working memory with visual reference
Having larger monitors or notebooks to jot down thoughts makes it easier to think.
The larger font-size of LW main posts works against this currently, since there are fewer words on the screen at once and scrolling around makes it easier to lose your train of thought. (A counterpoint is that the larger font size makes it easier to read in the first place without causing eyestrain).
But regardless of font-size:
4) Optimizing a post for re-skimmability makes it easier to refer to.
This is why, when I write posts, I make an effort to bold the key points, and break things into bullets where applicable, and otherwise shape the post so it’s easy to skim. (See Sunset at Noon for an example)
I think it works reasonably for the bulleted-number-titles. I don’t personally find it working as well for interior-paragraph things.
Using the bold makes the document function essentially as it’s own outline, whereas italics feels insufficient for that—when I’m actually in skimming/hold-in-working-memory mode, I really want something optimized for that.
The solution might just to provide actual outlines after-the-fact.
Part of what I liked with my use of bold and headers was that it’d be fairly easy to build a tool that auto-constructs an outline.
For what it’s worth, my feeling is pretty much the opposite. I’m happy with boldface (and hence feel no need to switch to italics) for structural signposts like headings, but boldface is too prominent, relative to ordinary text, to use for emphasis mid-paragraph unless we actively want readers to read only the boldface text and ignore everything else.
I would probably not feel this way if the boldface text were less outrageously heavy relative to the body text. (At least for me, in the browser I’m using now, on the monitor I’m using now, where the contrast is really extreme.)
When the font size is small, and the ‘bold’ text has a much heavier weight than the regular text (left-hand version), the eye is drawn to the bold text. This is both because (a) reading the regular text is effortful (due to the small size) and the bold stands out and thus requires greatly reduced effort, and (b) because of the great contrast between the two weights.
But when the font size is larger, and the ‘bold’ text is not so much heavier in weight than the regular text (right-hand version), then the eye does not slide off the regular text, though the emphasized lines retains emphasis. This means that emphasis via bolding does not seriously impact whether a reader will read the full text.
(2) Using italics for emphasis
Not much to say here, except that how different the italic variant of a font is from the roman variant is critical to how well italicizing works for the purpose of emphasis. It tends to be the case that sans-serif fonts (such as Freight Sans Pro, the font currently used for comments and UI elements on LW) have less distinctive italic variants than serif fonts (such as Charter, the font used in the right-hand part of the image above)—though there are some sans-serif fonts which are exceptions.
(3) Skimmability
Appropriate typography is one way to increase a post’s navigability/skimmability. A table of contents (perhaps an auto-generated one—see image) is another. (Note that the example post in this image has its own table of contents at the beginning, provided by Raemon, though few other posts do.)
(4) Bold vs. italic for emphasis
This is a perfect case study of points (1) and (2) above. Warnock Pro (the font you see in the left-hand part of the image above) has a very distinctive italic variant; it’s hard to miss, and works very well for emphasis. Charter (the font you see in the right-hand part of the image) has a somewhat less distinctive italic variant (though still more distinctive than the italic variants of most sans-serif fonts).
Meanwhile, the weight of Warnock Pro used for ‘bold’ text on the left is fairly heavy compared to the regular text weight. That makes the bolding work very well for emphasis, but can also generate the “people only read the bold text” effect. On the other hand, the bold weight of Charter is distinctive, but not distractingly so.
Finally, as in point (1), the larger the font size, the less distracting bold type is.
Here, for reference, is a brief list of reasonably readable sans-serif fonts with not-too-heavy boldface and a fairly distinctive italic variant (so as to be suitable for use as a comments text font, in accordance with the desiderata suggested in my previous comment):
One thing that’s worth noting here is there’s an actual difference of preference between me and (apparently a few, perhaps most) others.
When I use bold, I’m specifically optimizing for skimmability because I think it’s important to reference a lot of concepts at once, and I’m not that worried about people reading every word. (I take on the responsibility of making sure that the parts that are most important not to miss are bolded, and the non-bold stuff is providing clarity and details for people who want them)
So, for my purposes I actually prefer bold that stands out well enough that my eyes easily can see it at a glance.
Musings on ideal formatting of posts (prompted by argument with Ben Pace)
My thoughts:
1) Working memory is important.
If a post talks about too many things, then in order for me to respond to the argument or do anything useful with it, I need a way to hold the entire argument in my head.
2) Less Wrong is for thinking
This is a place where I particularly want to read complex arguments and hold them in my head and form new conclusions or actions based on them, or build upon them.
3) You can expand working memory with visual reference
Having larger monitors or notebooks to jot down thoughts makes it easier to think.
The larger font-size of LW main posts works against this currently, since there are fewer words on the screen at once and scrolling around makes it easier to lose your train of thought. (A counterpoint is that the larger font size makes it easier to read in the first place without causing eyestrain).
But regardless of font-size:
4) Optimizing a post for re-skimmability makes it easier to refer to.
This is why, when I write posts, I make an effort to bold the key points, and break things into bullets where applicable, and otherwise shape the post so it’s easy to skim. (See Sunset at Noon for an example)
Ben’s Counter:
Ben Pace noticed this while reviewing an upcoming post I was working on, and his feeling was “all this bold is making me skim the post instead of reading it.”
To which all I have to say is “hmm. Yeah, that seems likely.”
I am currently unsure of the relative tradeoffs.
I pushed Oliver for smaller font size when I first saw the LW 2.0 design (I’d prefer something like the comments font), partly for the words-in-mind reason. I agree that bigger words work against complex and deep thinking, and also think that any time you force someone to scroll, you risk disruption (when you have kids you’re trying to deal with, being forced to interact with the screen can be a remarkably large negative).
I avoid bold and use italics instead because of the skimming effect. I feel like other words are made to seem less important when things are bolded. Using it not at all is likely a mistake, but I would use it sparingly, and definitely not use it as much as in the comment above.
I do think that using variable font size for section headings and other similar things is almost purely good, and give full permission for admins to edit such things in if I’m being too lazy to do it myself.
The current plan is to allow the authors to choose between a smaller sans-serif that is optimized for skimmability, and a larger serif that is optimized for getting users into a flow of reading. Not confident about that yet though. I am hesitant about having too much variance in font-sizes on the page, and so don’t really want to give authors the option to choose their own font-size from a variety of options, but having a conceptual distinction between “wiki-posts” that are optimized for skimmability and “essay-posts” that are optimized for reading things in a flow state seems good to me.
Also not sure about the UI for this yet, input is welcome. I want to keep the post-editor UI as simple as possible.
FYI it’s been a year and I still think this is pretty important
Hmm. Here’s the above post with italics instead, for comparison:
...
Musings on ideal formatting of posts (prompted by argument with Ben Pace)
My thoughts:
1) Working memory is important.
If a post talks about too many things, then in order for me to respond to the argument or do anything useful with it, I need a way to hold the entire argument in my head.
2) Less Wrong is for thinking
This is a place where I particularly want to read complex arguments and hold them in my head and form new conclusions or actions based on them, or build upon them.
3) You can expand working memory with visual reference
Having larger monitors or notebooks to jot down thoughts makes it easier to think.
The larger font-size of LW main posts works against this currently, since there are fewer words on the screen at once and scrolling around makes it easier to lose your train of thought. (A counterpoint is that the larger font size makes it easier to read in the first place without causing eyestrain).
But regardless of font-size:
4) Optimizing a post for re-skimmability makes it easier to refer to.
This is why, when I write posts, I make an effort to bold the key points, and break things into bullets where applicable, and otherwise shape the post so it’s easy to skim. (See Sunset at Noon for an example)
I think it works reasonably for the bulleted-number-titles. I don’t personally find it working as well for interior-paragraph things.
Using the bold makes the document function essentially as it’s own outline, whereas italics feels insufficient for that—when I’m actually in skimming/hold-in-working-memory mode, I really want something optimized for that.
The solution might just to provide actual outlines after-the-fact.
Part of what I liked with my use of bold and headers was that it’d be fairly easy to build a tool that auto-constructs an outline.
For what it’s worth, my feeling is pretty much the opposite. I’m happy with boldface (and hence feel no need to switch to italics) for structural signposts like headings, but boldface is too prominent, relative to ordinary text, to use for emphasis mid-paragraph unless we actively want readers to read only the boldface text and ignore everything else.
I would probably not feel this way if the boldface text were less outrageously heavy relative to the body text. (At least for me, in the browser I’m using now, on the monitor I’m using now, where the contrast is really extreme.)
Some comparisons and analysis:
(1) Using bold for emphasis
When the font size is small, and the ‘bold’ text has a much heavier weight than the regular text (left-hand version), the eye is drawn to the bold text. This is both because (a) reading the regular text is effortful (due to the small size) and the bold stands out and thus requires greatly reduced effort, and (b) because of the great contrast between the two weights.
But when the font size is larger, and the ‘bold’ text is not so much heavier in weight than the regular text (right-hand version), then the eye does not slide off the regular text, though the emphasized lines retains emphasis. This means that emphasis via bolding does not seriously impact whether a reader will read the full text.
(2) Using italics for emphasis
Not much to say here, except that how different the italic variant of a font is from the roman variant is critical to how well italicizing works for the purpose of emphasis. It tends to be the case that sans-serif fonts (such as Freight Sans Pro, the font currently used for comments and UI elements on LW) have less distinctive italic variants than serif fonts (such as Charter, the font used in the right-hand part of the image above)—though there are some sans-serif fonts which are exceptions.
(3) Skimmability
Appropriate typography is one way to increase a post’s navigability/skimmability. A table of contents (perhaps an auto-generated one—see image) is another. (Note that the example post in this image has its own table of contents at the beginning, provided by Raemon, though few other posts do.)
(4) Bold vs. italic for emphasis
This is a perfect case study of points (1) and (2) above. Warnock Pro (the font you see in the left-hand part of the image above) has a very distinctive italic variant; it’s hard to miss, and works very well for emphasis. Charter (the font you see in the right-hand part of the image) has a somewhat less distinctive italic variant (though still more distinctive than the italic variants of most sans-serif fonts).
Meanwhile, the weight of Warnock Pro used for ‘bold’ text on the left is fairly heavy compared to the regular text weight. That makes the bolding work very well for emphasis, but can also generate the “people only read the bold text” effect. On the other hand, the bold weight of Charter is distinctive, but not distractingly so.
Finally, as in point (1), the larger the font size, the less distracting bold type is.
Here, for reference, is a brief list of reasonably readable sans-serif fonts with not-too-heavy boldface and a fairly distinctive italic variant (so as to be suitable for use as a comments text font, in accordance with the desiderata suggested in my previous comment):
Alegreya Sans
FF Scala
Frutiger Next *
IBM Plex Sans
Merriweather Sans
Myriad Pro
Optima nova *
(Fonts marked with an asterisk are those I personally am partial to.)
Edit: Added links to screenshots.
One thing that’s worth noting here is there’s an actual difference of preference between me and (apparently a few, perhaps most) others.
When I use bold, I’m specifically optimizing for skimmability because I think it’s important to reference a lot of concepts at once, and I’m not that worried about people reading every word. (I take on the responsibility of making sure that the parts that are most important not to miss are bolded, and the non-bold stuff is providing clarity and details for people who want them)
So, for my purposes I actually prefer bold that stands out well enough that my eyes easily can see it at a glance.