...
In LUX, all headers should be at the same size as its corresponding section text or the next stop higher using the matrix belowusing the matrix below. Headers one stop higher (two at most) than the section text may be used when there is no exact match or extra emphasis is required for that specific section.
Header | rem | px |
|---|
| Html macro |
|---|
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter' !important; }
</style>
<h1 style="font-family: 'Inter', arial; margin: 0; font-size: 32px;">Huge Header</h1> |
| 2rem | 32px |
| Html macro |
|---|
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter' !important; }
</style>
<h2 style="font-family: 'Inter', arial; margin: 0; font-size: 24px;">Large Header</h2> |
| 1.5rem | 24px |
| Html macro |
|---|
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter' !important; }
</style>
<h3 style="font-family: 'Inter', arial; margin: 0; font-size: 16px;">Medium Header</h3> |
| 1rem | 16px |
| Html macro |
|---|
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter' !important; }
</style>
<h4 style="font-family: 'Inter', arial; margin: 0; font-size: 12px;">Small Header</h4> |
| 0.75rem | 12px |
| Html macro |
|---|
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter' !important; }
</style>
<h5 style="font-family: 'Inter', arial; margin: 0; font-size: 8px;">Tiny Header</h5> |
| 0.5rem | 8px |
...
Accessibility
A few key factors to follow for an accessible headers:
...