scaled heading sizes

[ntno]

Describe the problem you'd like to have solved

All the heading tags (h1, h2, etc.) are rendered as the same font size. This is different than how most browsers render the tags. Usually h1 is larger than h2 which is larger than h3 etc. Scaled heading sizes can make the page easier to read.

Describe the ideal solution

Add a new feature which can be enabled/disabled. The feature could be named style.headings.scaled

Alternatives and current work-arounds

• override the theme and extend the extrahead block: Override Theme Example mkdocs-demo#37
• use the extra_css option: Override CSS Example mkdocs-demo#36

Additional context

W3 recommended heading sizes

[ntno]

hacky MVP - grabbed these configurations from W3
in an extra_css file:

h1 {
    display: block !important;
    font-size: 2em !important;
    margin-top: 0.67em !important;
    margin-bottom: 0.67em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}

h2 {
    display: block !important;
    font-size: 1.5em !important;
    margin-top: 0.83em !important;
    margin-bottom: 0.83em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}

h3 {
    display: block !important;
    font-size: 1.17em !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}

h4 {
    display: block !important;
    font-size: 1em !important;
    margin-top: 1.33em !important;
    margin-bottom: 1.33em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}

h5 {
    display: block !important;
    font-size: .83em !important;
    margin-top: 1.67em !important;
    margin-bottom: 1.67em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}

h6 {
    display: block !important;
    font-size: .67em !important;
    margin-top: 2.33em !important;
    margin-bottom: 2.33em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: bold !important;
}

or

h1 {
    font-size: 2em !important;
}

h2 {
    font-size: 1.5em !important;
}

h3 {
    font-size: 1.17em !important;
}

h4 {
    font-size: 1em !important;
}

h5 {
    font-size: .83em !important;
}

h6 {
    font-size: .67em !important;
}

[ntno]

i think 2em is too big for h1 though so i'm gonna try out other scales
should the user be able to configure the levels?
ex:

style.headings.scaled:
  h1: 2em
  h2: 1.5em 

or maybe not because this is what the extra_css MkDocs feature is for

[ntno]

h5 .83em looks smaller than the regular font size which is 15px

[ntno]

these don't look distinctive enough:

h1 {
    font-size: 1.4em !important;
}

h2 {
    font-size: 1.3em !important;
}

h3 {
    font-size: 1.2em !important;
}

h4 {
    font-size: 1.1em !important;
}

h5 {
    font-size: 1em !important;
}

h6 {
    font-size: .9em !important;
}

[ntno]

further reading:

• https://www.wix.com/studio/blog/font-size