Docusaurus: improvement(v2): typography

[kripod]

🚀 Feature

The default settings for Infima provide tight line heights, which is hard to comprehend, especially on desktop. Also, the root font size is overridden by a small, pixel-based value, which is bad for accessibility.

Have you read the Contributing Guidelines on issues?

Yes.

Motivation

Improve legibility and accessibility of the default theme.

Implementation

:root {
  --ifm-font-size-base: 100%;
  --ifm-code-font-size: 93.75%; /* 15/16, one px smaller than the base font */
  --ifm-line-height-base: 1.75; /* Instead of 1.5 */
  --ifm-leading-desktop: 1.25; /* Instead of 1.5 */
  --ifm-list-margin: var(--ifm-leading); /* Keep consistent with the leading */
}

Comparison

[yangshun]

Agreed. Will fix in Infima.

[kripod]

Also, please inherit the color of links for <code> elements, e.g. with:

a code {
  color: inherit;
}

New vs. flawed approach:

[yangshun]

• [x] --ifm-font-size-base: 100%; - Why?
• [x] --ifm-code-font-size: 93.75%; /* 15/16, one px smaller than the base font */
  
  
  
  • I'll change to 90%
  
  
• [x] --ifm-line-height-base: 1.75; /* Instead of 1.5 */
  
  
  
  • I like this.
  
  
• [x] --ifm-leading-desktop: 1.25; /* Instead of 1.5 */
• [ ] --ifm-list-margin: var(--ifm-leading); /* Keep consistent with the leading */
  
  
  
  • I believe this is already done in .markdown
  
  

[kripod]

• --ifm-font-size-base: 100%; – Users like to specify the preferred font size in their browsers. Bigger is okay, but anything smaller than 100% for body text should raise accessibility concerns.
• --ifm-list-margin: var(--ifm-leading) doesn't seem to be done in [email protected]:
  

[lex111]

--ifm-font-size-base: 100%; – Users like to specify the preferred font size in their browsers. Bigger is okay, but anything smaller than 100% for body text should raise accessibility concerns.

I agree about this, it's really best not to override the default font size.

[yangshun]

--ifm-list-margin: var(--ifm-leading) doesn't seem to be done in [email protected]:

In markdown.css there's .markdown ul which adds a bottom margin of --ifm-leading already, so this doesn't do anything.

Closing this issue as we've implemented the changes in Infima and will release a new version soon.