How should I set fonts?

[UpstateLeafPeeper]

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?

[coothead]

Hi there UpsytateLeafPeeper,

I use this…

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

coothead

[UpstateLeafPeeper]

@coothead,

@coothead

I use this…

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

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.

[John_Betong]

@UpstateLeafPeeper

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

Minimum font-size for mobile?

@John_Betong, I didn’t follow your response - especially the second link. In my OP I included two screenshots in an attempt to show how small the font that Amazon uses is at the 320px width. It seems to me that their font-size choice would be too small for a lot of people - especially older with poor eyesight and with disabilities. So I am asking what is a safe minimum font-size to use for mobile. Not sure if I should be using EMs or PX or PT.

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

What did you not understand?

[UpstateLeafPeeper]

@John_Betong

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.

[John_Betong]

@UpstateLeafPeeper

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.

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

[UpstateLeafPeeper]

@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??)

@John_Betong

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.”.

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

@John_Betong

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">

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?)

@John_Betong

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

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!

[John_Betong]

@UpstateLeafPeeper

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

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.

[UpstateLeafPeeper]

@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.