I’d like to share with you some insights of our decision making process about the typography of the new editor. An image is worth more than a thousand words:
Our goal is to keep the spacings and the alignments as consistent as possible, this provides a better visual and reading experiences.
The grid is based on the “tab size”, which is around 2em, and the default spacing we’ve picked is 1/3 of that size (the white columns between the colored ones).
Text accessories (list marker, checkboxes, etc…) are center aligned in the first 2/3 of the column size and spaced from the text by the remaining 1/3. Ordered list numbers are an exception to that, as they are text, those are aligned to the right.
All of this allows the text to be correctly aligned even when laid out in different kind of paragraph stylings (lists, blockquotes, headers, etc…).
Typefaces and Fonts
Thanks to the way we have structured the new editor, you can use any font you like, and you’ll be able to pick the font of your choice from the ones provided by the Operating System, or use any custom font.
We’re working on bringing the header icons back into the gutter, so the header text will be aligned once again with the body, as it currently is in Bear.
While the old editor was placing list bullets in the gutter, in the new editor those will stay inside the body. We’ve got a lot of feedback on the matter and decided to change it to be more “standard”.
If you have any question or suggestion about typography please let us know!!!