CSS: Fonts

-

 

CSS Fonts

I. Font family

To change the font, we use the font-family property.

  • If the name of a font family is more than one word, it must be in quotation marks, such as: “Times New Roman”.
  • More than one font family is specified in a comma-separated list
h2 {
  font-family: Garamond, sans-serif;
}

In the code above, sans-serif is a fall-back font if Garamond is unavailable.

II. Google Fonts

Google Fonts offers thousands of open-source fonts for free use.

We can link a single font or multiple fonts with the font-weight and font-style properties.

To use Google Fonts, we need to link it in the <head> section of the HTML.

<head>
  <link rel="stylesheet" href="styles.css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
    rel="stylesheet"
  />
</head>

and use it in CSS:

h2 {
  font-family: "Playfair Display", serif;
}

III. Font weight

We can style bold text in CSS with the font-weight property. If we want to ensure that the text is not bold, we can set the font-weight to normal.

p {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

The font-weight property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Values are multiples of 100.

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

IV. Font style

font-style property is mostly used to specify italic text. It also has a normal value which is the default.

p {
  font-style: italic;
}

V. Word spacing

We use word-spacing to increase the spacing between words in the text. The default amount of space between words is usually 0.25em.

p {
  word-spacing: 0.05em;
}

VI. Letter spacing

To increase the spacing between individual letters, we use letter-spacing property in CSS.

h2 {
  letter-spacing: 0.2em;
}

VII. Line height

To modify line height, we use line-height property. 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 the font size ratio.
  • A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.
p {
  letter-spacing: 10px;
}

Comments

Post a Comment

Popular posts from this blog

JavaScript: How to create an array of unique values using Set?

-
  How to create an array of unique values using Set? ES6 introduces Set, which returns unique values This article will go through how to remove duplicates and create an array of unique values ES6 Set. What is ES6 Set? The Set object is a data type that can store unique values without any particular order. We can pass in a parameter, and all of its elements will be added to the new Set. const result = new Set (parameter); How to create an array with unique values? For example, we want to create a new array with unique category values. const food = [ { name : "egg" , category : "breakfast" , }, { name : "burger" , category : "lunch" , }, { name : "steak" , category : "dinner" , }, { name : "chicken" , category : "lunch" , }, { name : "eggs" , category : "breakfast" , }, { name : "spaghetti" , category : ...
Read more

JavaScript: Constructor Function in Objects

-
  Constructor Function In this article, we will learn the constructor function and its usage. I. What is the constructor function? A constructor function is a function to create an object. II. How to create a constructor function? When we create a constructor function, we should capitalize the function’s name. Then, we pass in the properties we want to set in the parameters. We use the keyword  this  to set them as the object’s properties. Avoid using  arrow functions  when using  this  in a method. function Person ( name, birthDay, color ) { this .name = name; this .birthDay = new Date (birthDay); this .color = color; } III. Create an object instance Once we have an object constructor, we use the  new  keyword to create new objects of the same type. const p 1 = new Person( "Anna" , "3-25-1995" , "green" ); const p 2 = new Person( "Joe" , "10-12-1990" , "blue" ); console .log(p 1 ); // Person {name: "Anna...
Read more

JavaScript: Basics

-
  Basics I. Syntax 1. semi-colons; In Javascript, every expression needs a semi-colon at the end. An expression is a line of code that returns a value. Statements that are not expressions don’t need semi-colons. // variable is an expression. const x = 2 ; // function is a statement. function hello ( ) {} if (x > 1 ) { // if is statement console .log( "Hello World" ); // console.log is expression } 2. { curly braces } Curly braces identify JS objects and code blocks such as functions, conditional statements, and loops. // function function hello ( ) {} // if if (condition) { // code... } // loop for (condition) { // code... } // JS object const obj = { key : "value" } 3. console.log The console is a panel that displays important messages. Data can be printed or logged to the console with  console.log() . > console.log ( 'hello' ) hello 4. Comments Comments can explain the purposes, leave instructions for other develo...
Read more