...

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

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

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

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

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

Accessibility

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

For accessible header, you should also follow these additional requirements:

• Not skip HTML heading hierarchy levels in order to comply with screen reader guidelines.

• Use title case capitalization (see the Capitalization section below).

Labels

Effective form labelling helps users to understand which information to enter into a form input.

• A common method of space saving is using placeholder text as a label. However, this is not recommended because it hides context and can present accessibility issues. The use of placeholder labels should be restricted to forms where the field purpose is a universal standard, and where accessibility can be guaranteed, e.g. login forms.

• Provide a text label, above or next to its associated field and left aligned to its associated field. Checkboxes 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.

...

Accessibility

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...