...
In LUX, all headers should be the same size as its corresponding section text using the matrix below. Headers one stop higher (two at most) than the section text may be used when no exact match or extra emphasis is required for that specific section. For example, if your section copy text is set at 12px, use the small, medium or large header depending on how much emphasis is needed. If your section copy text is set at 14px, only the medium or large headers should be used.
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> |
| 2 rem | 32 px |
| 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.5 rem | 24 px |
| 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> |
| 1 rem | 16 px |
| 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.75 rem | 12 px |
| 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.5 rem | 8 px |
Image RemovedAccessibility
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
...