Font

Synonyme: Letters, characters, numbers, font

Siehe auch: Text , contrast , label , heading

The font is used for the presentation of text information.

contrasts only apply as long as the users have not adjusted the colors to their requirements. | Must | EN 301 549:
11.7 und 12.1.1

• The foreground and background colors can be adapted to the user requirements without adjusting the other colors of the application.
• The length of a line of text can be limited to 80 characters.
• The justify text setting can be disabled.
• The line spacing can be increased to 150% of the standard line spacing.
• The paragraph spacing can be increased to 1.5 times the line spacing.

Note: With large font (from 24 px and/or from 18.7 px in the case of bold font), a contrast ratio of at least 3:1 is sufficient.

See

Colors and contrasts.

Practical tip: color coding).

Note: This applies if the colors themselves have no meaning, but only the color difference does.

Note: This applies when the color itself has a meaning, such as “green” for correct and “red” for incorrect, or “black” for a positive number and “red” for a negative number.

Note: This applies to the following spacing:

• line spacing up to 1.5 times the font size,
• paragraph spacing up to 2 times the font size,
• character spacing up to 0.12 times the font size,
• word spacing up to 0.16 times the font size.

Note: Justify is the orientation of the text to the left and right margins.

Practical tip: special characters).

Note: This does not apply if the hyphenation has to be perceptible, e.g. in a dictionary in which the possible hyphenations are specified.

Note: For example, an important piece of text which is highlighted in bold can also be preceded with “Note: ” or given a separate heading.

When using special characters, different use cases must be distinguished between in terms of the communication of the characters to the Accessibility API:

Purely decorative special characters are marked so that they are not communicated to the Accessibility API. The same rules apply to them as to layout graphics .

Examples:

• Button with the label “Next »”: The two forward arrows are purely decorative. The button should have the Accessible Name “Next”.
• Form field label “- - Location - -”: The dashes are purely decorative. The form field should have the Accessible Name “Location”.

Special characters which are not used according to their meaning are to be accompanied by an expressive alternative text. The same rules apply to them as to graphics .

Examples:

• Button with the label »: The two forward arrows visually convey the information “Next”. The button should have the Accessible Name “Next”.
• Button with the label x: The multiplication symbol visually conveys the information “Close”. The button should have the Accessible Name “Close” (possibly with an indication of what is being closed, e.g. “Close window”).

Note: If used as a required field label , the asterisk (“*”) is not considered to be non-purpose-related.

Special characters which are used according to their meaning can be used, provided the character is output correctly using the assistive technology. Otherwise, it should be accompanied by expressive alternative text.

Examples:

• Mathematical formula “3+5 > 5-3”: The two arithmetic operators as well as the larger character are output correctly by the assistive technology and can therefore be used.
• Text with the ordinal characters “ª” and “º”: The assistive technology does not output the two characters at all and/or does not do so correctly, and therefore the two characters require an alternative text.
• The word “guest” with a ligation of s and t. Most screen readers do not know the ligation, and instead of “guest”, only state “gu” and a space.

Special-purpose characters should be used sparingly. It is recommended to use a character which is output in concise form by the assistive technology.

Examples:

• A quote can be given different quotation marks. The “ character is output by the assistive technology, for example, as “typographical quotation mark, top” or “typographical quotation mark, right”. The " character, by contrast, is output as “inverted commas” or “quotation mark”, and is therefore to be preferred.
• The sentence “I prefer the character »#« to “#”” (see the following figure) is output by the screen reader, for example, as “I prefer the double bracket black hashtag with white X double bracket character to lower typographical quotation mark 3D narrow right-pointing arrow head inverted commas”.

To make texts easy to read, a legible font style and text formatting should be chosen. In this respect, the following should be taken into account:

• The most readable fonts are those from the humanist sans serif category.
• Ligations should be avoided.
• The minimum font size for text blocks should be 22px.
• The minimum font size for additional text (e.g. footnotes) should be 17px.
• Narrow and wide fonts should be avoided.
• Small and large character spacing should be avoided.
• Thin and thick font styles should be avoided.
• The line spacing should be at least 120% of the font size.
• Upper and lower case lettering should be used according to the orthography rules. The exclusive use of upper or lower case lettering should be avoided.
• Upper and lower case lettering should be used according to the orthography rules. The exclusive use of upper or lower case lettering should be avoided.
• Small caps should be avoided.
• Highlighting should be used sparingly. A bold font style should be used for highlighting.
• Italic font styles or underlining should be avoided. Note: Links should be underlined.
• The text should be left-aligned. The use of justify should be avoided.

You can find more information at: https://www.leserlich.info (External Link).

Information about this article

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!