Тонкий и толстый шрифт

$(window).on("load resize", function() { 
  var width = $(this).width(); 
  var height = $(this).height(); 
 
  $(".width").text(width); 
  $(".height").text(height); 
})

* { 
  margin: 0; 
  padding: 0; 
  max-width: 100%; 
} 
 
html, 
body { 
  font-family: 'Nanum Gothic', sans-serif; 
  font-size: 20px; 
} 
 
header, 
section, 
.col { 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
} 
 
h1, 
h2, 
h3, 
h4 { 
  font-weight: 100; 
  padding: 10px 0; 
} 
 
section.row { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: flex-start; 
  height: 100vh; 
} 
 
section.row div { 
  width: 100%; 
  text-align: center; 
  padding: 10px; 
} 
 
section.row div img { 
  border-radius: 50%; 
} 
 
section.row div p { 
  font-family: 'Amatic SC', cursive; 
  font-weight: 100; 
} 
 
.panel { 
  position: fixed; 
  top: 10px; 
  left: 10px; 
} 
 
@media screen and (max-width:600px) { 
  section.row { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    width: 90%; 
    margin: auto; 
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
 
 
 
<header> 
  <h1>Hi , i am junior front end developer</h1> 
</header> 
<section> 
  <h2>I decide every day what are the tasks</h2> 
</section> 
<section> 
  <h2>apply ScrollMagic and Gsap</h2> 
</section> 
<section class="row"> 
  <div> 
    <h2>scills</h2> 
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sed fugit cumque debitis rerum beatae distinctio sunt voluptatum, reprehenderit repellendus! 
    </p> 
  </div> 
  <div class="col"> 
    <h2>profile</h2> 
    <img src="http://placehold.it/120x120/#ffcc00" alt=""> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vitae.</p> 
  </div> 
  <div> 
    <h2>portfolio</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iure, explicabo eaque. Similique nulla modi facere cum at optio alias, ipsa quia quae animi, unde rem illo, saepe, repudiandae aliquid.</p> 
  </div> 
</section> 
 
<div class="panel"> 
  <span class="width"></span> 
  <span class="height"></span> 
</div>