There are only a handful of fonts that you can guarantee to be available across all common systems and these are commonly referred to as Web-safe fonts. They make reading your website's content an effortless experience, where a poor web font or font pairing can drive readers away.

Color Contrast

Selecting the appropriate colors for both the background and text is crucial for an effective and readable design. Therefore, carefully contrasting the text and background colors can boost the legibility of texts, boosting visibility and visual appeal.

Webaim Contrast Checker

Font Pairing

Each font have their own style and impression, that’s why it’s important to only choose 2 typefaces for the whole project for the purpose of keeping it clean and consistent. The more fonts used, the more it’ll look messy and inconsistent. A serif and sans-serif webfont are the two most typically aligned.  

Variable Fonts

Variable fonts are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. 

Mozilla Guide

Favicons and Touch Icons

A “favicon” (short for favorite icon) is a file containing one or more icons associated with a website or web page. Browsers that provide favicon support typically display a page's favicon in the browser's address bar  and next to the page's name in a list of bookmarks. The favicon should provide a simple and straightforward visual cue to help a user quickly identify your website amongst other websites.

The Web Standards Group recommends creating a favicon.ico file and placing it in the root directory of your website (this particular icon does not need to be specified with a meta tag in the HTML). This favicon.ico file should contain (at minimum) two images of different sizes: 16x16 and 32x32.

To create a better user experience across a number of platforms, including varying pixel densities, devices, and operating systems, refer to the open-source favicon cheat sheet. For developers, there are a number of frameworks and tools available to help package the varieties of sizes needed to satisfy every type of device width on today's market.

 

ucsb icon library sample page with thumbnail icons

*Example usage of UCSB icon library

 

Font Libraries

Operating system fonts come for free and can provide a noticeable performance boost. Each platform differs in the fonts it offers, but fallbacks can be specified as well as the generic font family names of serif, sans-serif, monospace, cursive, fantasy and system-ui, etc.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Alternatively, a CSS @import can be used:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Make your own font? All modern browsers support WOFF format, so any font file can be used on your webpage!

Custom CSS properties using :root or CSS Preprocessors like SASS and LESS are additional ways to add webfonts into your project. An open source repository, like Google Fonts or _________, is also a great option, and one of the most easiest. Consider the amount of fonts you select as well as the load time estimation when choosing a font pair. 

To embed a font in a page, use the standard <link> tag in the HTML head, e.g:


<link href="https://webfonts.brand.ucsb.edu/webfont.min.css" rel="stylesheet">

 

Icon Libraries

Icons are some of the most-used graphics in web and application design. Icon collections and libraries are where you can find the best in icons for their website and app project. Listing out common interactions like profile or settings and starting to build out this list will help you to start sketch out what icons you think you’ll need, especially with the variety of options that both the university and open source libraries provide.

 
ucsb icon library sample page with thumbnail icons

 

UCSB Icons​