How should I set fonts?

What is the proper place and way to set fonts for your web pages?

Come to think of it, I’m not even sure where I have set these.

All I know is that when I am creating new styles in CSS, I use EMs because I read that they are better.

Now that I am preparing for responsive development, I want to make sure that I have a better handle on this topic.

For instance…

1.) Where should I define the fonts for my website?

2.) Should I be using em’s, px’s, pts, or something else?

3.) Do I need to do anything special for mobile?

Hope I am making sense?

Hi there UpsytateLeafPeeper,

I use this…

body {
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

coothead

@coothead,

So that takes whatever the user has defined at the default font-size in their browser and uses that?

And the “/ 1.5em” is the line-height I am guessing?

I think long ago when I set up my website I used something like: font: 12px/16px noral, Arial, sans-serif but who knows.

A solution was proposed by a blog from the largest (?) international online booking company that shared their experience.

What did you not understand?

I read that article and it has nothing to do with what I said in my OP nor does it answer my original questions.

What I don’t understand is how you think that article answers my questions. :wink:

The research article results apply to about 40 countries and “particularly given our frequent rendering of type at small sizes where these fonts can offer the biggest improvements.”.

The fonts are automatically scaled when used with the following meta tag:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Experimenting with modified URLs and taking note of Google’s Mobile Friendly results should achieve the desired result.

If you are unable to upload and test a web page then please supply a sample and I will upload to my site and test to see if the page is Mobile Friendly

@John_Betong,

Before getting into your comments, what about my original questions?

1.) For instance, where/how do you define fonts for your website? Is that something you set in your HTML? Or should it be done in something like a “main.css” file?

2.) In the past on SitePoint, I have seen people do things like this…

body{
    font: 12px/16px normal, Arial, Verdana, sans-serif;
}

Why should you use PX vs PT vs EM??

I believe PX and PT are “absolute” definitions, right?

And I believe EM is a “relative” definition, right? (If so, relative to what??)

Right, but first I need help with my questions above.

That sounds rather vague…

How are they scaled?

And where can I read up more on that tag? (Not sure what to search on since it contains several things?)

Once I have a working website maybe I can then try that out?

But for now I am just trying to get off to a good start and code things the proper way! :slight_smile:

All your comments read and understood and I am not qualified to supply in depth solutions.

Please supply a demo web page and I will upload to my site and paste the link into the Google Mobile Friendly online web page validation tool. Their results are comprehensive and where necessary they also supply links to even further information.

I think this is the easiest way to proceed in order to “code things the proper way”.

Also because the page is mobile friendly Google will slightly increase their “Seo Brownie Points” and not penalise for having an invalid mobile friendly web page.

@John_Betong,

As mentioned, I am messing around with responsive design on the last few pages of my website, but I haven’t implemented anything yet. I will check out Google’s mobile validator once I have some pages done and online.

Just trying to gather insight right now so I don’t totally fubar things.

1 Like