Using custom fonts on the web is standard practice now. It is still best practice to be conscious of the number of fonts and font variants used. The more fonts and variants used, the longer it will take for the page to render for a first time visitor. We can embed web fonts directly from several online sources, including fonts.com (paid subscription), Google Fonts (free), and we can generally use downloaded fonts from a variety of other services, assuming they are properly licensed for use on the web. The discussion about which fonts are used on a project and whether they can be used on the web should happen early in a project.
Developers: The primary font family is set in the
$font-family-base variable in the
The default font size is
16px, and is often referenced as
1rem. The default font size is inherited by all non-heading elements, including unordered and ordered lists. It is not recommended to use font smaller than this default for anything other than the items mentioned below.
The default line-height is
1.5, which 1.5 x the font size of any given element. A paragraph with the default font size of 16px would have a line-height of 24px.
Meta copy, footnotes, and captions are used for styling ancillary content which represents additional details about the “main”content and not the main content itself and should be declared using
Hyperlinks should be used whenever we’re referring to something on the actual site, and external resource, or a document such as a PDF. Use links to point users to relevant content and trusted external resources.
Don’t include preceding articles (a, an, the, our) when you link text. For example:
- GOOD: Read our services page for more details.
- BAD: Read our services page for more details.
If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark.
Avoid saying things like “Click here!” or “Click for more information” or “Read this.” Links should only link to relevant keywords through the natural flow of the content structure.
Links should have it’s own distinctive style that separates it from the body copy, strong, and emphasis text. They should have a hover state that communicates to the user that it’s interactive and requires the user to click to view the additional resource. Links should also have a distinct active/visited/focus state.
All external links and files should be accompanied by a
All internal links should not open in a new window or tab.
Use lists to present steps, groups, or sets of information. Give context for the list with a brief introduction. Number lists when the order is important, like when you’re describing steps of a process.
If one of the list items is a complete sentence, use proper punctuation and capitalization on all of the items. If list items are not complete sentences, don’t use punctuation, but do capitalize the first word of each item.
Use an unordered list
<ul> when the list’s order doesn’t matter.
- If list items are not complete sentences
- If list items are complete sentences.
Use an ordered list
<ol> when the list’s order does matter.
- Do this first
- Do this second
- Do this last
Color consistency is extremely important to every client project! It’s how we represent our clients and should be consistent no matter who’s designing or developing the project during its lifetime.
Each client project will have a style guide and a color palette section that will provide color values for you to reference.
See the Pattern Library colors section for more details about a site’s color scheme and how to set it up.
Background colors and font colors should contrast. Text should be easy to read and shouldn’t cause eye strain for users. There must be a high contrast between the text color and the background color. Choose either a dark font color on a light background, or light text on top of a dark background.
Good contrast ensures that we’re following web accessibility standards for users with vision impairments.
Buttons should always contain actions. The button language should be clear and concise. Capitalize every word, including articles. It’s OK to use an ampersand in button copy.
Standard web buttons include:
- Log In
- Sign Up
- Read More
- Email Us
- Contact Us
It’s important to maintain consistent button styles throughout an entire web application, so users will be able to identify web elements with less confusion. Place buttons where users can easily access them throughout the design process (mobile users).
Call-to-action buttons are the most significant to any web page and their design should separate their distinction from less significant buttons.
It’s generally a good idea to use tabs when there’s multiple categories of content for a particular section. Tabs can help consolidate content more efficiently by reducing the amount of scrolling a user has to do.
Tabs Best Practice:
- Tab category names should be short and concise.
- Tabs should fit nicely in a single row.
- Tabbed category content should be similar in nature. It should make logical sense that they’re tabbed together.
- BAD Nesting tabs within tabs creates jumping UI elements and is considered bad practice. It also creates an excessive level of complexity and visual hierarchy issues. The purpose of the tabbed navigation is to allow people to compare content simultaneously in a seamless manner by clicking on adjacent tabs to read relevant content.
- Active tab color should be the same color as the background color of the open content. This provides clarity to users that the content is associated with the current tab in its active state.
- Inactive tab colors should be either be a lighter or darker version of the active state color. The colors need to consistent with the active state. Tabs should not be all different kinds of colors.
Modal windows are a great way to save screen real estate and grabbing a user’s attention to important information throughout a site, but it should be used sparingly. Modals have become today’s version of a pop-up window and can create bad user experience if used excessively.
When to use a modal window:
- To get a user’s attention when you want to interrupt a user’s current task to catch the user’s full attention to something more important.
- Getting the user’s input (Ex. Sign up or login form).
- Use when you want to show additional information without losing the context of the parent page (Ex. Larger images or videos).
- Use when you want to show information that is not directly related to the parent page or other options that are “independent” from other pages (Ex. notifications).
All modals should include a close button and a descriptive title.
Parallax & Animations
Parallax: Is the apparent displacement of foreground objects (content) from its relative background object (background image) based on users scrolling interaction.
Example Sites of parallax usage:
Animations: Animations makes it possible to animate transitions from one CSS style configuration to another. Animations can be a pleasurable user experience on many applications, but it can also become a nuisance and deter users from engaging with your site if done excessively.
Web Image Optimization
Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen. Ilya Grigorik