Codecademy - CSS 7: Typography

What i've learnt from the typography lesson of Codecademy's CSS course.

• Typography is the art of arranging text on a page.

Font-family

• This property changes the font of a particular element.
• Default font is Times New Roman if none is specified.
• When the typeface (font) is more than one word you must put it in quote marks.

h1 {
  font-family: "Courier New";
}

Font-weight

• This property can make text bold if you set it to:

p {
  font-weight: bold;
}

• The default is usually 'normal' but if you definitely don't want something to be bold or if you want to make something not bold, you can set the value to normal instead.

• Alternatively, some fonts can be given a numeric value for their font-weight. The values are in multiples of 100 from 100 up to 900.

• It is useful to note that:

  • 400 is the default font-weight of most text.
  • 700 signifies a bold font-weight.
  • 300 signifies a light font-weight.

Font-style

• You can use font-style to italicise text. Values can either be italic or normal(which is the default)

h3 {
  font-style: italic;
}

Word-spacing and letter spacing

• You can increase the spacing between words and letters with these properties.
  • word-spacing -The default amount of space between words is usually 0.25em.
  • letter-spacing - technical term for adjusting this is called tracking.

h1 {
  word-spacing: 0.3em;
  letter-spacing: 0.01em
}

• You can also use pixels (px) for word-spacing and letter-spacing.

Line-height

• Line heights can take one of several values:

  • A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size.
  • A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.

• Generally the unitless number is preferred as it is based on the font size so if that is changed, the line height would readjust itself accordingly.
  
  

.banner p {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  line-height: 1.4;
}

Text-transform

• You can make text all uppercase or all lowercase using this property. Values are either uppercase or lowercase.

h1 {
  text-transform: uppercase;
}

Text-align

• You can align text on a webpage using this property. As a default all text is aligned to the left.
• Values for this property are:
  • left - aligns text to the left hand side of the browser.
  • center - centers text.
  • right - aligns text to the right hand side of the browser.

h1 {
  text-align: right;
}

Serif and Sans-serif

Fallback fonts

• For fonts to show up on a webpage they need to be installed on a users computer. If they're not, you can set fallback fonts that are more likely to be available as a back up option.

h1 {
  font-family: "Garamond", "Times", serif;
}

• The rule above says, to use garamond for the h1, but if that isn't available use times and if that isn't available, use any serif font. The times and serif fonts are the two fallback fonts.

Linking fonts - google fonts

• Google has a huge library of free fonts for you to use.
• Go to fonts.google.com and search for what you want.
• Click the little plus button for the detail and customise to select which styles you want.
• You can minimise the little window to add other styles to your list (it's a bit like adding things to a shopping cart)
• Or you can go back to the embed tab.
• Copy and paste the html link into the header of the html file as in the example below.
• You will then be able to use the font in your css file.

• Alternatively, you can link to the fonts in your CSS file. You need a different link for this.
• To get the link, put the direct url of the font into your browser e.g. https://fonts.googleapis.com/css?family=Space+Mono:400,700/
• Copy the /* latin */ @font-face link to the top of your CSS file for each font style that you want. Like this:

Hosting a font

• As an alternative, we could host the font with our site files instead of depending on another site.
• Plenty of font sites now help to do this e.g. Font Squirrel
• You need to have the font saved in your directory.
• You still add the links to the top of your CSS file, instead this time they're relative links to the font file in your directory.
• You add a format for each file to specify which font to use. Different browsers support different font types, so providing multiple font file options will support more browsers.

@font-face {
  font-family: "Glegoo";
  src: url(../fonts/Glegoo-Regular.ttf) format('truetype');
}

• In the example above, the font-family is given the name Gleegoo for you to refer to in your CSS.
• You can then link to multiple formats of the same font to support different browsers.
• Truetype fonts are older so support older browsers.
• WOFF2 (Web open font format 2) is currently the best as it offers small file sizes and better performance so if you can, include a woff2 file.
• In the example below, lots of different browsers have been supported.
• (I'd like to know if there is an order that these files are chosen by the browser or do they automatically load the best one they can handle?

Comments

[Lúcás Meier]

text-align: justify can be used too, although I've rarely seen it in the wild, because justified text just doesn't look very good on the web, left usually works better.

But in real life, justified is what you'll see in books, newspapers, etc.

Go figure...

[Nicholas Stimpson]

The order that the font files are chosen follows the process: from first to last in the "src" property, try each entry in turn. For each one, skip it if the browser knows it's a format that it can't handle. Otherwise the browser tries to load it. If it loads, and the browser can parse it properly, then the browser is done. Otherwise it tries the next entry from the "src" property.

I have to say that what you've learnt contains a number of inaccuracies. Just little things, like line-height isn't actually taken from baseline to baseline. Nothing to worry about, just don't take it as absolute truth.