Web_Dev_Grad

One of the most obvious differences between different websites you go to and even sections within the website can be the typeface. The difference between typeface and font, is that the typeface is the name of the “font” you are using, such as arial or times new roman. Font refers to the combined characteristics of the typeface, size of the letters, spacing between them, colour, and any decoration such as underlines or strikethroughs.

The font family is the typeface and for all the examples we will be applying them to a paragraph with the ID of font-example. This is how you change the typeface of an elements. The syntax for changing the font family is:

#font-example {
	font-family: 'primary font', secondary, third;
}

The font-family property takes values as a comma separated list of font families. If a font family has multiple words in it, such as Times New Roman, these are to wrapped in single quotation marks. If the font family is only one word, such as Arial, it does not need to be wrapped in single quotation marks. It takes a list of typefaces so that if the primary one is unavailable to the browser it will fall back to the secondary and then the tertiary in that order.

For sans-serif typefaces, I include these 3 back up font families: Arial, Helvetica, sans-serif.

For serif typefaces, I include these 3 back up font families: Georgia, "Times New Roman", serif.

All the standard typefaces are already included and able to be implemented on many browsers, but you can add extra ones to meet the brand of your website. I generally rely on Google Fonts for my extra typefaces because it is free, open source, and they have a huge selection to choose from.

The easiest way to add them to your project is to @import them at the top of your CSS file. You can also download the fonts or link them in the HTML header if you are not using a CSS file (not recommended).

• Go to google fonts and pick a font such as Roboto, this will direct you to the individual font page here. Here you can play around testing how the font will look at different weights and sizes.
• If the font looks good to you, click on the blue “Get font” button towards the top right of the page, this will direct you to the selection page. This lists all your currently selected fonts. If you want more than one in your project, go and add others and come back to this page.
• Click the blue “<> Get embed code” to take you to the embed page. Here the page is split into two columns.
  • In the left column, you can select which styles you want to have. If you don't need some of the weights you can unselect or only select “one value”.
  • In the right-hand column make sure “Web” at the top is selected and then toggle “@import” instead of “<link>”. “<link>” is for linking in the head of your HTML file, whereas “@import” is for linking in your CSS file.
  • Copy the first code snippet from @import to the ; (leaving out the <style> element) and paste it into the top of your CSS file. For Roboto with one value of “Roman” for the italic options and a font weight of 400, this would be: @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');.
  • Now you can access the Roboto font family (at weight 400 and non-italics) in your project. Selecting “full-axis” instead of “one values” will just result in a longer @import detailing all the options.

If you did want to download the font, which would be good to ensure that the fonts display correctly if Google Fonts were ever to go down (or if you want to create your own typeface or download from another service) the process would look like:

• Download the fonts files.
• Convert the font files to multiple filetypes, as different browsers will have different compatibility. I recommend CloudConvert to do this. Ideally you would have the following file formats:
  • >OTF (OpenType Font)
  • >TTF (TrueType Font)
  • >WOFF (Web Open Font Format)
  • >WOFF2 (Web Open Font Format 2)
• Save these in a file in your project such as static/fonts.
• Use @font-face to load these into CSS, you will need to do this for each font you have. The syntax for this is:

  @font-face {
  	font-family: 'MyFont';
  	src: url('filepath.woff2') format('woff2'),
  	src: url('filepath.woff') format('woff'),
  	src: url('filepath.tff') format('truetype');
  }
  

• Whatever name you define as your font-family is how you will access this font in your CSS.
• Each of the urls are the relative filepath from the CSS file to the specific format file. For example you might have to go a folder or two up to start to get to the root level before getting to static/fonts.

The color declaration determines the colour of your text. It can be applied to your text or paragraphs by targeting them directly or to a parent container such as a div. This is because the default value is inherit, so the paragraph will inherit the colour rule from its parent.

#font-example {
	color: green;
}

How big or small you want your font to look will depend on the defined font-size, these can be defined in various ways, some of which I have outlined outlined here. The rule for this syntax is:

#font-example {
	font-size: 26pt;
}

The font-size property can take many size values. It can take pt and px values, which I would not recommend as they can be inconsistent across browsers and are not responsive. em and rem are much better (rem being the best option) as they change depending on the browser or user-defined font settings and are responsive.

It can also take some keyword values:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large
• smaller
• larger

How bold your font looks depends on its font-weight ranging numerically from 100 at the lightest to 900 at the boldest in steps of 100 (e.g. 150 is not a valid value). Some of these also correspond to keyword values but these may not be available for all fonts.

#font-example {
	font-weight: 500;
}

Adding italics to your font is done with the font-style parameter. It can take values of normal (which is the default), italic (the designed italic font with different letter shapes) or oblique (just slants the font and mimics italic if no italic option is available).

#font-example {
	font-style: italic;
}

Aligning your text takes the same values as if you were to do it in Microsoft Word with the same results ( ). These value are left, right, center, justify.

#font-example {
	text-align: center;
}

Text-transform allows you define the text to be all uppercase, lowercase, or to capitalise the first letter of each word with the respective values: uppercase, lowercase, capitalize.

#font-example {
	text-transform: uppercase;
}

You can also define the spacing between the letters, words, and lines in your font and the properties take the same values as the font-size property.

#font-example {
	letter-spacing: 0.2rem;
}

#font-example {
	word-spacing: 0.5rem;
}

#font-example {
	line-height: 1rem;
}

The text-decoration property defines how a line is added to the font, either above, through, or below. These values respectively are overline, line-through, underline.

#font-example {
	text-decoration: underline;
}

This can be further defined by the type of line with text-decoration-style (solid, wavy, or dashed), the colour with text-decoration-color, and thickness with text-decoration-thickness (best to use px here).

#font-example {
	text-decoration-style: wavy;
}

#font-example {
	text-decoration-color: blue;
}

#font-example {
	text-decoration-thickness: 3px;
}

These can also be combined in shorthand into one text-decoration rule.

#font-example {
	text-decoration: underline wavy blue 3px;
}

A complete rule for some text may look something like:

#font-example {
	font-family: Roboto, Arial, sans-serif;
	color: navy;
	font-size: 2rem;
	font-weight: 700;
	font-style: oblique;
	text-align: justify;
	text-transform: uppercase;
	text-decoration: underline solid red 1px;
	letter-spacing: 0.2rem;
	word-spacing: 0.5rem;
	line-height: 1rem;
}