HTML/CSS font-size best practice?

HTML & CSS
12

That’s actually a really good idea and I’m sure would help a lot of people out. @PaulOB

A kind of up to date HTML/CSS boilerplate featuring the latest standards expected of websites. Accessibility, semantics to help give people who want to produce follow industry standards from the get-go a proper good visual example of what their HTML bare-minimum should look like and include.

Right now i start every site with this HTML. Works for me but is it the best initial setup?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>

    <meta name="author" content="" />
    <meta name="description" content="" />

    <link rel="icon" type="image/svg+xml" href="" />

    <link rel="canonical" href="" />

    <link rel="stylesheet" href="" />

    <script type="module" src=""></script>
  </head>
  <body>
    <div class="wrapper">

      <header></header>

      <main></main>

      <footer></footer>

    </div>
  </body>
</html>

and then for CSS i use a reset with bits taken from other resets:

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* html {
  font-size: 62.5%;
} */

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

pre {
  white-space: pre-wrap;
}

[hidden] {
  display: none;
}

Recently made the font-size additions but that’s my HTML/CSS starter kit. Any improvements/things that i shouldn’t be doing pls let me know! Thanks