typography implemented

Author: rameskum

practice/05 - Design/index.html

@@ -4,7 +4,9 @@
 	<meta charset="UTF-8"/>
 	<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
 	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 	<link href="style.css" rel="stylesheet"/>
 	<title>Lisbon Chair Shop</title>
 </head>

practice/05 - Design/style.css

@@ -6,7 +6,9 @@ FONT SIZE SYSTEM (px)
 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 */
 
-* {
+*,
+*::before,
+*::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -16,7 +18,7 @@ FONT SIZE SYSTEM (px)
 /* GENERAL STYLES */
 /* ------------------------ */
 body {
-    font-family: sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
 .container {
@@ -31,6 +33,9 @@ section {
 
 h2 {
     margin-bottom: 48px;
+    /*24 / 30 / 36*/
+    font-size: 36px;
+    letter-spacing: -0.5px;
 }
 
 .grid-3-cols {
@@ -57,10 +62,15 @@ header {
 
 h1 {
     margin-bottom: 24px;
+    font-size: 44px; /* 44 / 52 / 62 */
+    line-height: 1.1;
+    letter-spacing: -1px;
 }
 
 .header-text {
     margin-bottom: 24px;
+    font-size: 18px;
+    line-height: 1.7;
 }
 
 img {
@@ -73,9 +83,12 @@ img {
 
 .features-title {
     margin-bottom: 16px;
+    font-size: 20px;
 }
 
 .features-text {
+    font-size: 18px;
+    line-height: 1.7;
 }
 
 /* TESTIMONIAL */
@@ -89,11 +102,14 @@ img {
 
 .testimonial-box h2 {
     margin-bottom: 24px;
+    font-size: 24px;
 }
 
 .testimonial-text {
     font-style: italic;
     margin-bottom: 24px;
+    font-size: 18px;
+    line-height: 1.7;
 }
 
 /* CHAIRS */
@@ -103,6 +119,7 @@ img {
 
 h3 {
     margin-bottom: 24px;
+    font-size: 20px;
 }
 
 .chair-details {
@@ -127,8 +144,10 @@ h3 {
 .chair-price {
     display: flex;
     justify-content: space-between;
+    font-size: 20px;
 }
 
 footer {
     margin-bottom: 48px;
+    font-size: 14px;
 }