I taught a hands-on workshop called Basics of Web Typography on 28 Jan 2020, as part of the 2D Visual Studies course for B.Des. students at IDC School of Design.

The workshop used an HTML/CSS blog template that students could use to set up their own GitHub pages hosted website. I am using this page to document some of the things I covered during the course.

Class photo

Photo courtesy of Samanda

Aims

This presentation will cover CSS typography, and by the end of the presentation you’ll have your own website.

Presentation

Here’s a link to the presentation.
Web Type - January 2020.pdf

Prerequisites

1. Sign up for Github
Join GitHub
Use your personal email ID to create your account.

2. Add your IITB email as a secondary email

Add email
Your IITB email will give you free access to the Github Student Dev Pack.

3. Sign up for GitHub Student Developer Pack

Sign up for Student Dev Pack
This gives you a bunch of paid stuff for free while you are a student.

4. Download Atom
Download Link
Atom is a free text editor for code.

5. Download Web Server for Chrome
Download Link
This Chrome app is a quick and easy way to start a server on your computer, and allows you to test your website on your computer or any other device on your network.

Steps for using Github Pages to host your website

  1. Fork https://github.com/gyanl/web-starter
  2. Rename your fork of web starter to yourgithubusername.github.io.
    For eg. My username is gyanl, so I will rename the repository to gyanl.github.io
  3. Download the repository as a zip.
  4. Make changes.
  5. Upload changed files, commit.
  6. Your website is now live at yourgithubusername.github.io

CSS Properties

Font name

The font-family property specifies the font you want to use.

p {
  font-family: "Roboto Condensed";
}

Font Stack

If the first font in the stack is not available, the second one is used and so on. It is good practice to specify ‘serif’ or ‘sans-serif’ as a fallback in case your custom font doesn’t load.

body {
  font-family: Georgia, Times, "Times New Roman", serif;
}

Font weight

The weight of the font you want to use. Typical nomenclature is:

  • 100 Thin
  • 200 Extra Light
  • 300 Light
  • 400 Normal
  • 500 Medium
  • 600 Semi Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 Ultra Bold

If the font family doesn’t provide the requested weight, it will use the closest available one.

p {
  font-family: "Roboto Condensed";
  font-weight: 800;
}

Font size

The size of the font you want to use.

p {
  font-family: "Roboto Condensed";
  font-size: 12px;
}

Text alignment

Left, center, right or justify alignment.

.center{
  text-align: center;
}

.left{
  text-align: left;
}

.right{
  text-align: right;
}

.justify{
  text-align: justify;
}

Text indentation

The text-indent property indents the first line of a text block.

p {
  text-indent: 50px;
}

Tracking

The letter-spacing property controls the tracking between characters. It is convenient to use em as em is dependent on the current text size.

p {
  letter-spacing: 0.1em;
}

Leading

The line-height property can be used to control the leading of the text. It is convenient to use em as em is dependent on the current text size.

p {
  line-height: 1.5em; //1.5 em is 150% of text size.
}

Text Decoration

Add an underline, overline or strikethrough to text. You can specify the type and color of the line.

p {
  text-decoration: underline;
  text-decoration: underline overline wavy red;
}

Text Transform

Capitalise first word, convert to upper or lowecase.

p {
  text-transform: capitalise;
  text-transform: uppercase;
  text-transform: lowercase;  
}

Color

The color of the text in the block.

p {
  color: #ff4343;
}

Background color

The background color of the block.

p {
  background-color: #ff4343;
}

Pseudo classes

:hover

Add this to a class and these rules will be activated only when the mouse pointer is hovering over the class.

p:hover {
  background-color: #ff4343;
}

:first-letter

Affects only the first letter of the div.

p::first-letter {
  font-weight: bold;
  text-transform: uppercase;
}

:first-line

Affects only the first line of the div.

p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}

Links can be styled using the following properties

a:link { color: #666666; text-decoration: none; }
a:visited { color: #333333; }
a:hover { text-decoration: underline; }
a:active { color: #000000; }