Reply To: What's your best practice for fonts and responsiveness?

[Robby]

EM’s are tricky to understand at first. Basically, assuming you have font-size: 100% set, 1em = the user/browser text size setting. By default its set to 16px.

You want to use EM’s for almost everything, not just font-size. Things margins, paddings, widths, heights, etc.

You’ll want to break the habbit of thinking in PX’s, but rather percents/em’s, but ill talk in px’s for now so it makes more sense to you.

So say you set h2 to 2em it would be equal to 32px. It’s not going to make your font’s shrink an expand depending on window size, you’ll still have to do that in the media queries.

By using EM’s for everything if a user has his text setting up higher, or is on a higher dpi screen, your entire layout will adjust not just the text sizes. It also makes for less code in the media queries. You wont have to change all your margins/paddings, only the font size and the rest will play off that size.

As for mobile font-size, its up to you. I’d say most people go between 14-16px’s . I prefer 14pxs.

I can’t explain everything to well, I’d suggest doing to research on how EM’s work and why we use them.

I would dump all the framework stuff and just learn to code websites from scratch.