Typography and its jargons

While learning about Typography and building the site, I learn few things I didn't know.

• Letter Case (aka case): The difference of upper case vs. lower case in any written language. Letter Case is neat concept and very foreign concept to me. When I first learn English, I was surprised that there are two versions (upper and lower case) for every letter in alphabet.

text-transform and line-height help with readability.

• text-transform is css property that converts casing of text.

header {
  // transforms love -> Love
  text-transform: capitalize;
}

• line-height property, use unitless ratio value for responsiveness. It is ratio of font size to line-height.

footer {
  line-height: 1.5;
}

• Two types of font-family:

  1. <family-name> - may not preset in your computer ex: "times", "courier", "arial"
  2. <generic-name> - preset in your computer so use this as a fall-back. Do not use quotes for generic names. ex: serif, sans-serif, cursive, fantas, monospace

• In order use to locally save fonts: import it in stylesheet using @font-face style rule and place it on top of your css file.

Syntax on how to refer to font-face locally saved and find your fonts at fontsquirrel:

@font-face {

  // name of font
  font-family: "Lovato";

  // relative link where your font is saved and its 'format'
  src: url(downloaded-fonts/Lovato.woff2) format('woff2'), 
       url(downloaded-fonts/Lovato.tff) format('truetype');
}

• Web Open Form Format(WOFF) and Web Open Form Format 2(WOFF2) are future of fonts. True Type Font (TTF) is more widely used.