Good typography on a website enhances readability, aesthetics, and user experience. Key practices include using clear, readable fonts, differentiating text with varied sizes and styles, maintaining consistency, ensuring contrast, utilizing ample white space, aligning text uniformly, and keeping line lengths and spacing reasonable. These practices lead to a more engaging and user-friendly website.

Within the Sitefinity Content Management System we’ve adopted a consistent use of the same fonts, sizing, color and formatting options so as users are building the website content, there is a cohesive, recognizable brand-standard.

Every content module is carefully crafted to support and reflect these styles.

UTMB has a long-standing history and a recognizable brand. In 2010 the current logo and brand standards were adopted by the institution. The fonts chosen as a brand standard were not supported by web browsers and would not render online.

So, the web branding team began the search for font faces which would look similar to the brand “print font” yet also meet the needs specific to good typography use on our digital channels.

The team chose Roboto as our primary (sanserif) font! Using Roboto as the font on our websites offers several advantages:

• Legibility: Designed with geometric forms and open curves, Roboto provides excellent readability on both small and large screens.
• Versatility: Roboto includes multiple weights and styles, making it suitable for various uses, from body text to headings.
• Modern Aesthetic: With its clean, contemporary look, Roboto is ideal for modern web design.
• Google Fonts: Available for free on Google Fonts, it's easy to implement and ensures consistent rendering across different browsers and devices.
• Performance: Optimized for web use, Roboto loads quickly, enhancing site performance.
• Compatibility: Pairs well with other fonts, allowing for flexible design options.
• Wide Adoption: As a popular choice, it benefits from familiarity and a professional appearance.

Using the proper HTML element (or tag) is essential for several reasons. They provide semantic clarity and improve readability by differentiating different content types.

These tags also enhance accessibility, as assistive technologies can accurately interpret the material. Additionally, they allow for consistent styling and formatting via CSS, and contribute to better SEO by helping search engines understand the content structure.

Overall, HTML tags ensure a clear, accessible, and well-structured presentation of all website content.

Using HTML headings involves placing the appropriate heading tags around the text you want to designate as a heading.

1. Choose the Correct Heading Level: Decide which level of heading is appropriate for your content. Use <h1> for the main title, <h2> for main sections, <h3> for subsections, and so on.
   • Always begin a page with Heading 1
   • Each page should have only one Heading 1, serving as a page title that is descriptive and relatively short
2. Maintain Hierarchical Order: Make sure to use the headings in a hierarchical order. Do not skip levels (e.g., do not jump from <h1> to <h3> without using <h2>).
   • Headings indicate meaning, a change in section or topic, and illustrate the information hierarchy or grouping by section
3. Use Headings for Structure, Not Styling: Headings should be used to structure your content logically, not just to make text bigger or bolder. Use CSS for styling purposes.

Paragraph tags (<p>) are crucial in HTML for defining paragraphs, enhancing readability with automatic spacing, improving accessibility for assistive technologies, allowing consistent styling via CSS, aiding SEO through better content structure, and organizing content for easier management and updates.

Quote tags (<q> or <blockquote>) should be used instead of paragraph tags (<p>) when indicating quotations. They provide semantic meaning, default styling that distinguishes quoted text from regular paragraphs, and enhance accessibility and SEO. For example, <blockquote> often adds indentation and may apply a different font style. Using the appropriate tags ensures clean, well-structured HTML that is easier to manage and maintain.

Use the <em> tag to emphasize text, typically rendering it in italics. It provides semantic meaning, indicating that the enclosed text should be stressed or given importance, which enhances accessibility and SEO. It is ideal for highlighting key words or phrases within a paragraph.

Use the <strong> tag to indicate text that is of strong importance or urgency. It typically renders the text in bold. This tag provides semantic meaning, enhancing accessibility and SEO by emphasizing the significance of the enclosed text. It's ideal for highlighting critical information within content.

The <u> tag, which underlines text, is generally discouraged because it can be confused with hyperlinks. Instead, use CSS for underlining when linking or opt for other tags like <em> or <strong> for emphasis. This approach improves clarity and maintains better accessibility and usability.

Use the <small> tag to indicate text that is less significant, such as disclaimers, legal text, or fine print. It typically renders the text in a smaller font size, providing a way to de-emphasize certain content while still keeping it readable.

The <strikethrough> tag, often represented as <s> in HTML, is used to visually strike through text, indicating that it is no longer valid or has been removed, while keeping it visible. It's commonly used in editing, price changes, correcting information, showing rejected ideas, and crossing out errors in documents and web content.

Using the <strikethrough> tag excessively or inappropriately can clutter your content and confuse readers. It's important to use it judiciously and in contexts where clarity and readability are maintained. Overuse can make your text harder to follow and diminish its overall impact. It's generally discouraged to use <strikethrough> for stylistic purposes or in situations where it may distract from the main message of your content.

The <code> tag in HTML is used to display snippets of computer code within web content. It's essential for presenting code examples clearly, highlighting commands or variables, and improving accessibility in technical documentation and tutorials.

Use the <pre> tag to display preformatted text with preserved spaces and line breaks. It’s ideal for showing code snippets, maintaining text formatting (like in poems or ASCII art), displaying tabular data, and presenting logs or error messages. This tag ensures the text appears exactly as written in a fixed-width font.

Applying the subtitle class will enhance the visual presentation of a heading or paragraph with a subtitle, ensuring the underlying information remains semantically integrated within the heading. This approach improves clarity and maintains better accessibility and usability.

Balancing the aesthetic appeal with readability and accessibility considerations is key when using colored text on a website.

Here are the benefits and drawbacks of using colored text on a website:

Use the <hr> tag in HTML to visually separate sections of content, improve readability, and enhance the structure of web pages. It acts as a thematic break or horizontal rule, useful for organizing content and creating clear distinctions between different blocks of information.

Content modules create collections of content that can be displayed on web pages and in templates. The following modules allow users to manipulate the typography on the websites through either the WYSIWYG editor, writing HTML or applying pre-written classes to the widgets or content items: Content Blocks, Lists, Blogs and Events modules. Learn more about adding content and classes to each of these modules by clicking on the provided links.

The WYSIWYG editor helps keep websites in-brand by allowing users to add html tags and classes to text without needing to edit the HTML by using the formatting options in the dropdown. Learn how to use the WYSIWYG editor.

Manipulating the pre-written styles requires a solid knowledge of HTML and CSS and is discouraged unless you have spoken with a member of the web branding team. The fonts are to never be overridden with different fronts, and any changes made must pass AAA compliance for web accessibility.

Custom work can be applied to any content type which provides a WYSIWYG editor or has a “more options” area where a custom class can be added and has a display option of full HTML given the changes are not conflicting with other work on the page.