MMP 240 Web Design
MMP 240 Web Design
CSS In-class Information Typography

Class 6: Typography

by |Published |1 comment

CLASS 6 on Monday 9/16/2019

Today we are going to look into typography and how to implement it on the web using CSS.

Typography Basics

We will start with looking at typography basics. This post covers that and more. Don’t worry if you don’t pick it all up right away. It takes time and pracice.

CodePen Follow Along Example

Speaking of which we will use this codepen as a way to practice as we go along: https://codepen.io/profstein/pen/oPKzML?editors=1100

Fonts

Fonts are at the heat of typography and are the visual style of the text that people see on the page.

Web Fonts

Before web fonts came along, as a designer you never know which fonts a person had installed. As a result it was hard to know exactly how your type content would appear to each user. Web fonts are downloadable fonts that allows the viewer of your page to download the font you want them to use.

LONG list of web fonts: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/web-fonts/

Google Fonts

Many of the fonts in the long list above are Google Fonts. This is a service that Google provides for free to help you embed fonts on your web pages. This post has more information about how to choose and use Google Fonts: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/using-google-web-fonts/ .

Example for use in our CodePen

/* CSS to include web fonts from Google  */
 @import url('https://fonts.googleapis.com/css?family=Lato:400,700');
 @import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400i,700,700i');

Font Pairing

This is the art of picking two or more fonts that will go together and work in harmony to display your content and fit the look and feel you’re going for. More information in this post: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/font-pairing/

Typographic Hierarchy

The overall way in which you use type elements like color, size and spacing to show the user what text is important and which blocks of text are related to each other is the typographic hierarchy. Getting this right is a key component of good web design. This post has more information and a short video we will watch: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/typographic-hierarchy/

CSS Properties for Typography

This post has more information on some of the basic properties you can use to style text: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/css-properties-for-typography/

Typography Resources

You may also like