KAMİS
Text Design
Text Formats
Principle
Text formatting applied to text elements should be used only to draw the user's attention to what is considered important.
Description
Incorrect and unnecessary use of text formatting makes it difficult to read texts. Moreover, the excessive use of text formatting within the text can unnecessarily burden the user's perception, negatively affecting text readability.
Guidelines
- Excessive use of underlined, bold or italic text formattings should be avoided.
- When emphasizing an expression on a single page, underline, bold, or italic text formatting should not be used simultaneously; only one text formatting should be preferred.
- Since underlined text in websites can be perceived as a link, this text formatting should be used for links as much as possible.
- Italic text is a traditional approach for displaying quotes. The use of italic text is preferred in places where it refers to quotes.
- Text formatting should not be used excessively to the extent that it arouses an advertisement perception in users.
References
- –
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, bold and italic text formatting have been used together. Instead, it is recommended to use only bold or only italic text formatting.
Text Size
Principle
The text size should be legible on screens with different resolutions and adjustable by users.
Description
On websites, it is well known that text sizes between 9-12 points (12-16 pixels) are suitable for text readability. Especially in recent times, some widely used CSS libraries have started to use a 16-pixel size as the standard font size.
Guidelines
- Text sizes should be legible on high-resolution screens.
- The font size used should be larger than 9 points.
- For users with reading difficulties, the option to change the font size should be offered.
- Entire short texts that are meant to be skimmed should be in uppercase letters for better readability.
- Short texts meant for skimming should use larger font sizes.
References
- ISO 9241-151 / 9.6.6 – Making text resizable by the user
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, the text used is displayed small in the browser, making it difficult to read.
Text Appearance
Principle
The text used in web pages should be readable, clear, and consistent in terms of design.
Description
Typography is a significant part of web design. Good typography plays a crucial role in how websites are perceived by their users. The content presented to the target audience on websites is usually conveyed through text. Therefore, the appearance of text significantly affects the usability and accessibility perception of websites.
Guidelines
- To enhance text readability, methods such as breaking content into headings, creating lists with bullet points, emphasizing important statements with attention-grabbing techniques, and providing explanations should be employed.
- For websites with long textual content, to enhance readability, a concise and understandable summary of the content can also be provided to users.
- Visual consistency should be maintained regarding font size, text color, font style, background formatting, and text layout for text elements found on different pages of the website.
- Uniform text formatting should be used across all pages of the website to maintain consistency.
- The font used for a page should not differ from the font used on another page. Text formatting for headings, links, and content should be standardized across all pages.
- To emphasize content in non-linked text, underlines or colours that may create the perception of a link should not be used.
- The text used should be not only visually consistent but also grammatically correct and consistent with language, spelling, and punctuation rules.
- To provide comfortable readability, line spacing should be approximately 30% greater than the line height.
- Sufficient contrast should be provided between text and background color. A contrast of 4.5:1 is generally considered sufficient for small text, while 3:1 is adequate for large text.
- To accommodate color-blind users, the use of red and green colors in text should be avoided.
References
- ISO 9241-151 / 9.6.1 – Readability of text
- ISO 9241-151 / 9.6.2 – Supporting text skimming
- ISO 9241-151 / 9.6.3 – Writing style
- ISO 9241-151 / 9.6.4 – Text quality
Useful Resources
Significance Level
★★★★★ 5/5
Example
In the example website, it is observed that text colors and styles vary within the same page. To ensure consistency, a standard structure should be used.
Text Color and Background
Principle
In texts that require users to read quickly and understand content, black text color on a simple, high-contrast, and patternless background should be preferred.
Description
In general, the contrast between text and background color enhances text readability. It is known that texts written on a simple background with black text are more easily readable compared to texts written in other text colors and background types. Texts written in light colors on dark backgrounds tend to slow down reading.
Guidelines
- Text font color should be selected to have contrast with the background color.
- Patterned backgrounds and background images that impede text readability should be avoided.
- Colour combinations such as green on red, red on green, red on brown, red on blue or blue on red should not be used. Texts should be written in dark contrasting fonts on light or white backgrounds.
- Sufficient contrast should be provided between text and background color. A contrast of 4.5:1 is generally considered sufficient for small text, while 3:1 is adequate for large text.
- To accommodate color-blind users, the use of red and green colors in text should be avoided.
- Colors should not be the sole means of conveying a message; color-blind users should also be considered.
References
- ISO 9241-151 / 9.3.9 – Using color
Useful Resources
Significance Level
★★★★★ 5/5
Example
In the example website, a light, simple background with black and blue text colors is used to make the text more easily readable.
Font Type
Principle
Common font types should be used on websites to ensure that the text is read more quickly and easily.
Description
Selecting text from common font types for use on websites is important for users to read text more quickly and easily.
Guidelines
- Using serif fonts for long texts and sans-serif fonts for short text and headings enhances readability.
- A font that looks neat and legible in different sizes and weights should be selected.
- The use of all capital letters should be avoided, especially in long texts, as they make it difficult to read and may cause the message to be perceived negatively by users.
- In websites displaying content in languages with special character sets, the chosen font should be compatible with the respective language. For example, the same font can appear very differently in different character sets when displayed in bold, affecting readability.
- There should be no incorrect character appearance in case of access with different tools.
References
- ISO 9241-151 / 10.1.5 – Designing presentation of text in different languages
Useful Resources
Significance Level
★★★★★ 4/5
Example
In the example website, easily readable font types are preferred for menu headings.
Text Highlighting Techniques
Principle
Attention-grabbing techniques should only be used when necessary and in a non-exaggerated manner.
Description
In order to draw the user's attention and emphasize the intended message, techniques such as adding motion or animation to text elements, changing font type, color, or size should be used sparingly. Some texts are more important for users to perceive easily, such as having different colors, lowercase and uppercase letters, and the use of bold or italic fonts.
Unnecessary and excessive use of attention-grabbing techniques can lead to user confusion and a lack of understanding of the content. For example, adding animations to text is one of the most effective attention-grabbing methods. It is known that users generally pay attention to moving objects. However, if animations do not interest or provide useful information to users, they can become annoying over time. Continuous animations can hinder user focus on the page content.
Guidelines
- Unnecessary animation and animated content should be avoided. It should also be kept in mind that excessive use of animated content and animation will not be compatible with corporate seriousness.
- Text should not be excessively formatted in a way that makes them drastically different from each other for the purpose of drawing attention.
- Text highlighting should not rely solely on color, taking into account color-blind users.
- Simple highlighting techniques (such as bold fonts, etc.) should be used on text where attention is required.
References
- –
Useful Resources
- –
Significance Level
★★★★★ 4/5
Example
In the example website, the section above the "Announcements" area features moving images for news, and large icons and attention-grabbing colors are used throughout the site. This distracts from focusing on the site's content.