DEV Community

Cover image for Typography and its jargons
Heggy Castaneda
Heggy Castaneda

Posted on • Updated on

 

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.

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.