New Editor Typography

Panda typography

Hello everyone!

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.

Headings

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.

Lists

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!!!

10 Likes

This is incredible and very well thought out. Very excited for this to be rolled out to the alpha!

Don’t bring back the old header icons - the new headings look amazing and the new heading icon is much more aesthetic. perhaps these new heading icons in the gutter??

Should be a user option. Bullets in the gutter are non-standard, but they also are very useful for drawing attention to certain content — I use them like notes in the margin. Changing this will screw up hundreds of Bear documents for me. I know the Bear philosophy is to not have too many settings, but that’s what an “Advanced” tab is for in Preferences. Give power-users the option.

And if you’re not giving users that option, at least allow users to make the gutters as narrow as possible. There’s a LOT of wasted white space on the sides of Bear windows. If I can’t “write in the margins” with bullets anymore, don’t waste space that space with huge gutters.

1 Like

And with that I will say goodbye to an old friend, Scrivener, and move all my belongings into the house of Bear.

Beautiful! Love the updates to the bullet gutters. Makes switching between Bear and other “work related apps” much more consistent experience as an end user.