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