...

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

...

• Use the appropriate HTML <label> element and label for attribute.

• Labels must remain visible when an input is focused.

• Labels must be announced to the screen reader on focus.

• Ensure the help text which appears underneath an input is read when an assistive technology user stops at an input using ARIA.

• Use sentence case capitalization (see the Capitalization section below under Text Formats).
  

Capitalization

• We use different capitalization styles for different types of content to improve scannability, organize information, and guide users to key actions.

• When building new LUX applications, also align capitalization practices with platform conventions to match user expectations (e.g. specific iOS conventions).

...