responsive scaling of letters

Question

I am trying to make scaling of the letters responsive. I used a tutorial to create what I have so far. I want your advice and opinions if the following code is right and useful enough regardsto responsive lay out. Are there any errors and so on.

Also I have the CSS in the webpage and not external as a own .CSS file. I then wondering if the code below is correct with . (dot) before main-title, main-title cite, caps and article-body and so on. Is it also just to paste the code into the stle area and it will work?

 body {
    margin:0;
    background-image: url("proffinfo/img/fishing2.jpg");
    background-color: grey;
    font: normal 100% adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
  }
  
.main-title {
  font: normal 1.875em/1.2 abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18; 36 / 30 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
}

.caps,
figure,
footer {
  font-size: 14px;
}
.article-body {
  font-size: 1.125em;  /* 18 / 16 */
}

/* figure and .caps are children of .article-body, so their context is 18px */
figure,
.caps {
  font-size: 0.777777778em;  /* 14 / 18 */
}

/* The footer's context is the body element, so we'll use 16px here */
footer {
  font-size: 0.875em;  /* 14 / 16 */
}