improvement(v2): typography

🚀 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]

–ifm-list-margin: var(–ifm-leading) doesn’t seem to be done in infima@0.2.0-alpha.8:

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.

[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.