Text structuring - Web design
All texts should be well structured, easy to read, clear and understandable.
- Use clear and simple headings
- Use paragraphs and subparagraphs to structure texts
- Use lists to avoid unnecessary enumerations
- Do not use fonts and effects that are too fancy; legibility is important
- Avoid emojis; display and their meaning can be misleading
Text color & text highlighting - Webdesign
Text colors and text markings in the CI/CD of the website; as close as possible to the standard (black text on a white background or vice versa; dark mode)
- Use highlighting (bold, underlining) only for important key points
- Do not use too many different colors (as harmonious as possible and not too bright, matching the CI/CD)
- If possible, do not use flashing colors, texts, etc.
- If possible, do not use underlining; this is often misunderstood as linked content (links)
- Avoid emojis; display and their meaning can be misleading
Texts - Example
This text is displayed in the standard font.
This text is displayed in a font.
This text is displayed in italics.
This text is displayed in bold font.
This text is displayed in underlined font.
This text is displayed in double underlined font.
This text is displayed in a strikethrough font.
This text is displayed in an underlined (wavy) font.
This text is displayed in upper and lower case letters.
This text is displayed entirely in small capital letters, regardless of whether small or capital letters are used.
This text matches upper case letters to lower case letters.
Hint: Loading or embedding web fonts (including icon fonts) from other sites is not data protection compliant (GDPR) because, among other things, user data (IP address, browser data, etc.) is transferred to the provider without the user's consent. Therefore, host all fonts yourself.
Text effects - examples
This text has a text shadow.
This text is made with contours.
Text in retro style.
Text with color gradient.
Text with luminous or glow effect.
Text with engraved effect.
Text with embossed effect.
Text with neon effect.
Text with reflection effect.
Text with image effect.