...
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 Removed Image Added |
Accessibility
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
...
Provide a text label, left aligned to its associated field. Check boxes and Radio Buttons are exceptions to this rule.
In situations where horizontal UI space is limited, or responsive design is used, render the label above its associated field.
Ensure that all labels and associated fields are vertically aligned as columns in a table.
...
Required fields
All required fields should be marked with an asterisk in close proximity to its associated label.
...
Title Case (Most Words Are Capitalized)
...
Use title case for menu labels, buttons, navigation, and section headers.
...
Sentence Case (Most words are lowercase)
...
Use sentence case for all body copy, image captions, and secondary editorial subheadings.
...