Personal Site Interactive Type

To get familiar with additional CSS proporties, we'll personalize our class site with animation and typography.

While the web used to be limited in its typography options, access to fonts on the web today is as rich as in any other medium. Gone are the days of low-resolution screens with limited rendering capabilities, and restrictive ‘system-font’ library limitations. Today we can use almost any font in print online, with many new forms of expression being enabled by interactions (and innovations in technology such as variable fonts).

In order to get a better understanding of typography on the web, and its interactive potential, we will use the CSS @fontface property, and/or a web font service, to add a web font to our personal class sites. Then we will add typographic animation to our sites via interaction.

Instructions

First, we’ll download an open source web font and link it to our websites using the @fontface CSS property. Go to one of the following sites, and locate an open source web font you are interested in using one of the following:

Follow their instructions to download their web font files.

Copy your downloaded font files into the assets folder in the "root" of your class wbesite. You can identity web fonts by their extensions, which are “woff”, “woff2”, and “eot”. These are determined by the computer and font companies to maintain security and work with various OS. However, these days, companies like Google distribute "ttf" (Truetype fonts) for the web since they don't worry about copyright and it's easier to maintain. If you have multiple web font formats for your selected font, copy them into your fonts folder.

Your folder should have something like the following files inside:

FragmentMono-Italic.ttf
FragmentMono-Regular.ttf

Now that you have your font files, you’ll need to load them into your CSS. Open your class site CSS file add the following code to the very top:

@font-face {
  font-family: "font-name";
  src: url("the-path-to-your-font");
}

Replacing font-name, the-path-to-your-font, and font-format (if applicable) with the appropriate information (what you’d like to call your font, where it is in relation to your CSS file, and its format). For more information on these attributes reference @fontface on MDN and @fontface on W3Schools. You can give your font-name whatever name you like, you’ll use it to reference your web font later in your doc.

Next, let’s use your typeface. Adjust the body tag to use your font-family like so:

body {
    font-family: ‘font-name’, Arial, "Helvetica Neue", Helvetica, sans-serif;
    … your other css...
}

Note: the fonts in the font-family value are backups if your font-name, or the previous listed font, can’t be loaded – read more here.

Finally, we'll make our typographhy interactive by adding a :hover state to your personal websites which activates a transition in order to create an animation. If you wanted to add an animation to links, try the following:

a, a:visited {
  transition: all 500ms ease;
  color: blue;
}

a:hover {
  color: red;  
}

Experiment with applying custom fonts and hover/animation states to your website and once you’re happy with the result, upload your changes to Github and share a link to your updated class site on the class Google doc.

There are many resources that make using web fonts even easier to use. Try following the instructions on Google Fonts, or Adobe Fonts to use a web font they host on your class website.

Font Resources

CSS Resources

CSS Animation Resources

Optional: Test the potential of variable fonts on the web. See this tutorial by DINAMO, and get started by downloading the trial version of Danfo and adding it to your assets folder, and the following code in your CSS:


/* Variable font */
@font-face {
  font-family: "Danfo";
  src: url("Danfo-Regular-VariableFont_ELSH.ttf");
}

h1 {
  font-family: "Danfo";
  font-variation-settings: "ELSH" 0;
  transition: font-variation-settings 1.3s ease;
}

h1:hover {
  font-variation-settings: "ELSH" 100;
}