Lesson 4 | Web Aesthetics

For lesson 4, I learned how to utilize typography, color, and a balance of websites that follow trends. Just like everything, in web design what is popular now may not be popular later. This is a career that is constantly changing and designers need to be able to adapt with it.

Choosing a type for your website can be just as important as layout and color scheme for the site. It needs to be readable above all, but it also needs to have personality, especially one that fits the personality of your website.

There are web-safe fonts and web fonts to choose from. Web-safe fonts are very limited in their use, because these have to be common fonts that are already saved on the viewers computer, and mac and Windows users don’t always have the same kind. Here are a list of 24 common web-safe fonts:


Web fonts are platform independent and do not need to be installed on visitor’s device leaving you with hundreds of options. Two common ways to use web fonts is through Google fonts or Adobe’s Typekit.

Google fonts requires two elements to work, a simple rule in your CSS, along with a link in the head to the web fonts source.


They also offer an option for using the at import rule, or JavaScript instead of the standard link.

In Typekit, you create kits to configure the fonts you want to use, which gives you some script tags to add to your head, and provides the selectors to add to your CSS. The good thing about both of these options is that they do not require you to install, or host, these fonts since they are hosted elsewhere.

Here are some links to popular sites to find web fonts: Google FontsTypekitAdobe Edge Web FontsFontShopfonts.com, and Font Squirrel.

There are also a few categories for font types like serif and san-serif for the two most common. As well as display fonts like slab serif, cursive, handwriting or script, decorative and typewriter.

One important pro tip when finding font pairings is to look for contrast like below:


Google fonts has already come up with some font pairings with their web fonts if you’re having trouble. Simply click on the font you want to choose, Click on “See Specimen” and then scroll down till you see a list of popular pairings. You can click on each one to see the pairings with the font.

Adding videos to your website has also become a trend because it can make your site more active, provide a sense of movement, engage the viewers, and make the webpage “sticky.”

Going back to choosing a great typeface for your web, can also apply to choosing a great typeface for your video on the webpage. Video + Text + Call to Action (CTA), meaning the text should call your viewers to action to subscribe or register to an event.

Text over a video should be legible and readable, and one way to do that is creating contrast. Below is an example of not using enough or any contrast between the text and video.


The sunlight through the window and the white typeface competes too much and makes the text illegible. We could change the color of the typeface, but there are other ways to help make the text readable for viewers. You could create drop shadow for the typeface. You could put background color behind the type. You could also add a CSS background to the div holding the text with alpha transparency or without it, which is my personal preference.


What I liked about this lesson is that it helped me really look at how choosing, not only, the correct typeface when creating my own webpage, but also the right color schemes, patterns, adding more form versus flat design, all while creating a balance to my webpage and even adding other effects (such as video) can effect my sites readability and appeal for viewers.