HTML/CSS font-size best practice?

HTML & CSS
1

Hi,

Really quick question. Right now whenever I start a new site I do font-size like this; I set a :root font-size in PX then use REM for everywhere else regarding font-size. Is this the best practice or is there a better way? Pros cons in using percentage, responsive design conflicts etc. Many Thanks

Update: Is it bad practice to place the font-size in the root? A model css example would be amazing, I’d be extremely grateful. Thanks

:root {
    font-size: 20px; /* is % better??? */
}

h1 {
    font-size: 2rem; /* 40px */
}

p {
    font-size: 0.8rem; /* 16px */
}

HTML:

<h1>hello i'm 40px</h1>
<p>hi</p>
<span>hi</span> <!-- 20px root -->
1 Like
2

@PaulOB would probably be the best person to answer it but I’ve always set the base font size (applied to body) to a percentage, then all other font sizes to rems. That allows the user to control the font-size that is comfortable to them and the rest of the font sizes will scale accordingly.

I’ve seen some people who’ve used font size scaled to the viewport width, but you have to be careful to set a minimum/maximum to those as well, which hurts my head sometimes, hence why I use the previous approach.

3 Likes
3

Thanks very much for your quick response. That percentage logic makes sense, so basically the entire site is based on what the user has set their browser settings to and the then as you said it all adjusts accordingly.

On Google I keep seeing these examples where they do this, but then i see others with 100%, some putting it in the body, some html some :root so i just need to get some clarity haha:

html {
  /* 62.5% of 16px base font size is 10px */
  font-size: 62.5%;
}

You mentioned how you place the base font-size in the body, is that better practice than setting in the :root?

Thanks

1 Like
4

For me personally, it’s semantics or personal choice. I limit :root to css variables and put normal declarations within the appropriate scope, hence why I put a base font size for the site in body.

1 Like
5

Setting a px for the root disrespects the users preferences so I either leave it alone completely or set it in percent.

From : https://css-tricks.com/accessible-font-sizing-explained/

My recommendation is to avoid setting font-size on the :root , <html> or <body> elements in favor of letting the browser’s default size serve as a baseline from where we can cascade our own styles. Since this default is accessible, the content will also be accessible. The WACAG 2.2 working draft states that:

When using text without specifying the font size, the smallest font size used on major browsers for unspecified text would be a reasonable size to assume for the font.

For all purposes you can assume the root is 16px and then size the rest of your page accordingly which allows users to adjust their own base size accordingly. .

More info here.

4 Likes
6

Note that rems refer to the html or :root settings (or defaults) and setting a size on the body will not affect the size of a rem unit used elsewhere. :slight_smile:

Try this:

body{
  font-size:500%;
}
p{font-size:1rem}

Then try this to see the difference. :wink:

html{
  font-size:500%;
}
p{font-size:1rem}
4 Likes
7

I knew that and was just allowing you the opportunity to show off :tongue: :shifty:

I’d blame it on being Monday, but it’s Tuesday :cry:

4 Likes
8

It’s helpful to remember that REM stands for Root EM. Using REMs anywhere in the doc is basing a font size on the root, HTML, or default font size.

3 Likes
9

It’s clicked. Thanks so much @PaulOB @WebSteve @ DaveMaxwell

All your input together has given my brain clarity again… yay!!!

The key bit i was missing is by doing nothing… REM unit simply goes back to basing the font-size on the default browser font size which is usually 16px. If the user sets the browser font-size to 20px everything adjusts accordingly.

I’ll save :root just for the variables :slight_smile:

Also a side note, this article. He’s using REM throughout for font-size but for the :root section he is using PX for font-size. Using this method from the link attached that would count as disrespecting the users preferences right? How I Organize My CSS for Websites Without a Framework | by Stephan Romhart | Oct, 2021 | Medium

Thanks again!!!

1 Like
10

Yes that’s not something I would do.

There seems to be some outdated code in that article but I don’t really like to criticise other peoples methods as everyone has their own way of working and bending the rules sometimes is ok if you take care.

3 Likes
11

[off-topic]
I noticed the Medium linked article which only has two free article views per month :slight_smile:

The article has a GitHub link which I really like because GitHub is designed to be ongoing and to be updated as and when innovations or standards change.

Perhaps @PaulOB could create an ongoing GitHub Repository for a basic page layout especially since articles quickly become outdated!

Edit:

GitHub is free, does not insist on membership before source code Zips can be downloaded and also has an abundance of other features. Designed by Linus Torvalds for his Linux Operating System source code… which was created over twenty years ago…
[/off-topic]

3 Likes
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

13

I’m not keen on putting code out there that people can (permanently) copy and paste as CSS changes so fast these days that practices are only best practices for a short time before the next new shiny thing comes along. :slight_smile:

There are some basics of course but I would rather authors define their own rules based on the design in hand rather than continually copying and pasting without thinking about what they are doing.

Although the original (Eric Meyer) CSS reset from many many years was great at the time it ended up being included in thousands (if not millions of sites) and although mentioned in the code itself that the author should set suitable :focus styles (as they were removed) virtually no one did. In the end it just encouraged the copy and paste approach and a lot of authors didn’t actually learn anything.

There are many resets and boiler plates around (written by people more experienced than me) that are good to look at and study and work out why code is included and what it does but I would not include them all by default. I would look through them and pull out the pieces that suit the project in hand. At least I would ensure that I understood what the code was doing and why it was included.

That will remove all the margins from everything and then when you use the element you have to set your own margin as required. That would seem to make it a little pointless. Why not set the margin on the elements you use as you use them. Its good that you removed padding from it as that breaks some form elements (although its not as much of an issue as it was in the olden days ;)).

That’s only needed for 100% height layouts which is not that often (and we do have 100vh height now if needed anyway - although there are issues in ios with that). When you set the body to height:100% you are effectively capping the height at viewport height and then the layout overflows. This is not a problem but just not clearly understood by those that copy and paste and wonder why they can’t use height:100% everywhere.

If I look at some basic styles I included a little while ago in a site I see something like this.

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #fff;
  color: #000;
}
h1,h2,h3,h4,h5,h6 {
  margin: 0   0 1rem;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
a img {
  border: none;
}
img {
  max-width: 100%;
  display: block;
}

If I look at that rule then I see that I have included a img{border:none}. That was originally for IE6 that set images inside links to have blue borders. Does that still happen? Is that code still needed. Copy and paste stops you thinking for yourself and checking if the code is still necessary.

You can lose the trailing closing slashes as they are not needed in html5.

e.g.

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

4 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.