What's your best practice for fonts and responsiveness?

[WoodlandCoyote]

I’m stuck in the mud on this. I just read a blog post here on using ems for fonts. I came across it when I was searching for information on people’s expectations of font behavior on smaller screens.

I read other articles elsewhere, too, and can’t seem to pull together a best practice to use as a new web designer.

Genesis seems to favor pixels. It’s not something I ever considered changing because I just assumed everyone uses pixels. But I’m learning that’s not true.

It does seem that responsive fonts could present some problems. Do you really want small fonts on a small screen? But some are saying they selectively scale fonts. Headers, for example, don’t make sense at a size intended for computer screens.

I just don’t understand the hierarchy of fonts people keep talking about, or how to get a font to be responsive. In Firebug I changed post titles from pixels to ems and then dragged my browser down to the smallest size. The font size didn’t change.

Do I need to keep pixels and add ems as a backup to post titles? Or do I only add ems in the media query section? I care about the user experience and would welcome your feedback on how to approach this.

Thanks!

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

[Author]

Posts