[2019 design] Page content styles

[james-geiger]

I'm new to BookStack and am really impressed with the project and it's wide range of use cases. I'm currently evaluating it's use within a large university enterprise, and would like to get involved with the development community, especially if we decide to implement it.

I was hoping to get some feedback on a possible PR to address the look-and-feel of the page content portion of the book pages. I'd be interested in adjusting the size/weight of the h-level text, increasing the default size of the paragraph text, and other improvements to increase readability and accessibility of page content.

The reason that I'm interested in a PR is that currently all font and line sizes are in em units, which could easily be refactored into rem units to avoid nesting issues.

I'd be happy to mock up some of my thoughts for feedback.

[james-geiger]

This is a possible starting point, outlining a larger overall font-size, utilizing weights to provide some visual levels.

[c0shea]

I think it would be great to be able to customize the heading styles. I find the font sizes to be rather large for headings. Being able to vary the size and weight would be a nice configuration option.

[ssddanbrown]

Hi @james-geiger,

Thanks for the suggestions. The trouble with styling is that it's very subjective. We offer the custom head HTML content option as a way to alter such styles.

By default all headings are non-bold so the editor bold option remains functional.

In regards to em units, although rem units are often better practice due to nesting problems as you mentioned, em units do allow users to easily target a specific section, such as page content, to apply size adjustments within so there is some utility in their function.

[james-geiger]

Thanks for the feedback, @ssddanbrown.

I hear you about the subjectivity of design in general, and the easy head injection is a great solution to address those concerns. My thought was to try to align the Shelf/Book/Page content with themselves and other parts of the site. As a for instance, the top-level headers on the Shelf are smaller than on the book/page layouts, while the settings pages are smallest.

It seems to me that this can have the effect of degraded readability and, as a default, this could be important to address. If a local admin wanted then to customize the weights of the different levels, they could do so with custom injection. However, it might be worth further conversation to make sure the 'out-of-the-box' configuration is easy to read and well-aligned with contrast/accessibility best-practices.

My main consideration with rem units is that they respond to the browser's default font-size setting and can allow for per-user customization as well. The site default could therefore be smaller, allowing for more content to be displayed at a time, while still allowing the end-user to increase the size of their text to their preference (#462, some points in #1148).

[ssddanbrown]

Since there's been no further development on this chain I'll close this off.

If there are specific inconsistencies within the interface I don't mind those being specifically discussed and addressed. Any changes that impact anything that could be classed as "page content" would need to be much more considered.