①このフォントサイズはどういう計算で出てきたのでしょうか？　②htmlで設定するフォントサイズと、bodyで設定するフォントサイズの違いは？それぞれどこのもの？

前提・実現したいこと

XDから模写コーディングする際に、htmlのフォントサイズが62.5%となっているのですが、この数値がどこから来たのか、またもし計算して求めるものだとしたらどうやって導き出したのかわかりません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=divice-width,initial-scale=1">
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <link rel="stylesheet" href="css/responsive.css">
10 <title>模写テイク2</title>
11</head>
12
13<body>
14 <header>
15  <div class="header-wrapper">
16   <h1 class="site-title"><a href="./">クリ★スタ</a></h1>
17   <!--   <a href="#" class="header-title">クリ★スタ</a>-->
18   <ul class="header-menu">
19    <li class="header-item"><a href="#">About</a></li>
20    <li class="header-item"><a href="#">Service</a></li>
21    <li class="header-item"><a href="#">Contents</a></li>
22   </ul>
23  </div>
24  <div>
25   <div class="main-visial">
26    <h1 class="kv-copy">Cresta.design</h1>
27   </div>
28  </div>
29 </header>
30
31
32 <main>
33
34  <!-- アバウト-->
35  <section class="about wrapper">
36   <h2 class="section-title">About</h2>
37   <h3 class="sub-title">ミニマルで<br>洗練されたデザインを。</h3>
38   <p class="section-text">近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
39  </section>
40
41  <!-- サービス-->
42  <section class="service wrapper">
43   <h2 class="section-title">Service</h2>
44   <div class="content-wrapper">
45    <div class="content-item">
46     <div class="content-img"><img src="img/service-image@2x.jpg" alt="一眼レフ"></div>
47     <div class="content-text-section">
48      <h3 class="content-title sub-title">リリース時のサポートで<br>サービスのブランディングを</h3>
49      <p class="content-text">弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
50     </div>
51    </div>
52    <div class="content-item reversi">
53     <div class="content-img"><img src="img/service-image02@2x.jpg" alt="アイフォン"></div>
54     <div class="content-text-section">
55      <h3 class="content-title sub-title">リリース後のサポートで<br>効果を最大化させる</h3>
56      <p class="content-text">弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
57     </div>
58    </div>
59   </div>
60  </section>
61  <!--ニュース-->
62  <section class="news wrapper">
63   <h2 class="section-title">Contents</h2>
64   <div class="news-list">
65    <div class="news-card">
66     <div class="news-img"><img class="card-img" src="img/card-image1@2x.jpg" alt="アイフォン"></div>
67     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
68    </div>
69    <div class="news-card">
70     <div class="news-img"><img class="card-img" src="img/card-image2@2x.jpg" alt="アイフォン"></div>
71     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
72    </div>
73    <div class="news-card">
74     <div class="news-img"><img class="card-img" src="img/card-image3@2x.jpg" alt="アイフォン"></div>
75     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
76    </div>
77   </div>
78  </section>
79  <!-- お問い合わせ-->
80
81  <div class="contact wrapper">
82   <h2 class="contact-title">お問い合わせ</h2>
83   <ul class="contact-list">
84    <li class="contact-form mei">
85     <p>担当者名</p><input type="text">
86    </li>
87    <li class="contact-form tel">
88     <p>電話番号</p><input type="tel">
89    </li>
90    <li class="contact-form mail">
91     <p>メールアドレス</p><input type="email">
92    </li>
93    <li class="contact-form mail">
94     <p>お問い合わせ内容</p><textarea></textarea>
95    </li>
96   </ul>
97   <input class="btn" type="submit" value="送信">
98  </div>
99 </main>
100 <footer>
101  <p> ©︎crest.design all rights reserved</p>
102
103 </footer>
104</body>
105
106</html>
107

該当のソースコード

CSS
1@import "va";
2
3
4/*共通レイアウト*/
5
6html {
7 font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif;
8 font-size: 0.8rem;
9 /*letter-spacing: 30px;*/
10 color: $text-black;
11
12 img {
13  max-width: 100%;
14  vertical-align: bottom;
15 }
16
17 a {
18  text-decoration: none;
19  colo: $white;
20 }
21
22 .wrapper {
23  margin: 0 auto;
24  padding: 0 10% 20px;
25  text-align: center;
26 }
27
28 .section-title {
29  font-size: 36px;
30  font-weight: bold;
31  margin-top: 150px;
32  margin-bottom: 72px;
33 }
34
35}
36
37/*ヘッダー*/
38header {
39 padding: 0 120px;
40 background-color: $black;
41 /*color: $white;*/
42
43
44 .header-wrapper {
45  display: flex;
46  justify-content: space-between;
47  line-height: 21px;
48  border-bottom: 2px solid $white;
49
50
51  .header-title {
52   font-size: 26px;
53  }
54
55  .header-menu {
56   display: flex;
57
58   .header-item {
59    padding-right: 55px;
60   }
61  }
62 }
63
64
65
66 /*メインビジュアル*/
67 .main-visial {
68  background-image: url(../img/fv-bgi@2x.jpg);
69  background-size: cover;
70  bgposition: center;
71  padding: 300px 0;
72
73
74  .kv-copy {
75   color: $white;
76   font-size: 20px;
77   border: 2px solid $white;
78   text-align: center;
79
80  }
81 }
82}
83
84
85
86/*アバウト*/
87.about {
88 text-align: left;
89 display: inline-block;
90
91 .sub-title {
92  font-size: 24px;
93  font-weight: bold;
94
95 }
96}
97
98/*サービス*/
99.service {
100 .content-title {
101  font-weight: bold;
102  text-align: left;
103
104 }
105
106 .content-wrapper {
107  .content-item {
108   display: flex;
109
110   .content-img {
111    width: 480px;
112    margin-bottom: 67px;
113   }
114
115   .content-img:last-of-type {
116    margin-bottom: 0;
117   }
118
119   .content-text {
120    width: 480px;
121    text-align: left;
122   }
123  }
124
125  .rebersi {}
126 }
127}
128
129/*ニュース*/
130.news {
131
132
133 .news-list {
134  display: flex;
135  justify-content: center;
136
137  .news-card {
138   box-shadow: 0 0 6px $glay;
139   width: 320px;
140   padding-right: 35px;
141
142   .news-text {
143    width: 255px;
144    text-align: center;
145    line-height: 25px;
146    margin: 25px auto;
147   }
148  }
149
150  .news-card:last-of-type {
151   padding-right: 0;
152  }
153 }
154}
155
156/*お問い合わせ*/
157.contact {
158 display: inline-block;
159
160
161 .contact-title {
162  font-size: 24px;
163  font-weight: bold;
164  margin-top: 150px;
165  margin-bottom: 72px;
166 }
167
168 .contact-form {
169  width: 700px;
170
171  p {
172
173   text-align: left;
174
175  }
176 }
177
178
179 /*ボタン*/
180 .btn {
181  background-color: $black;
182  color: $white;
183  font-size: 20px;
184  border-radius: 51px;
185  margin: 50px;
186 }
187}
188
189/*フッター*/
190footer {
191 background-color: $black;
192
193 p {
194  color: $white;
195  text-align: center;
196  line-height: 30px;
197  font-size: 14px;
198  padding: 29px auto;
199 }
200}
201
202/**/
203