Font Size Issues

[MrGrinst]

Okay I’m really new to CSS and web development in general. I’m working on revising my boss’s website and am having some issues. The site was designed somewhat poorly and I’m making it my first goal to make it more responsive.

I’d like to implement rems but ran into an issue with my boss. I had the font size looking great on both _my_ laptop and dual-monitor desktop, but _his_ computer seems to upsize that font. I think this is because he has the font size on his screen set to “large” (under monitor settings in Windows). I’d like for the site to look good on both computers but rems just doesn’t seem to do it.

Any suggestions? Has anyone else run into issues developing for people with that setting on?

Thanks guys,
MrGrinst

[sloveland]

Setting the initial font-size in pixels might work? Here’s a bit of an example.

http://codepen.io/sloveland/pen/Eizfs

Since I believe REMs get their initial size from the body, this should work, but I’m not certain how it works against the browser-override issue.

[ChrisP]

@MrGrinst, I’m not really sure what you’re after. What about the upsized font makes the site not look good? Large font sizes is just something that you have to consider, and not restrict the end user to a specific font size.

What you _could_ do, is put your layout elements and media queries into em and % based sizes to scale with the font sizes.

[sloveland]

Well, testing on resizing fonts in chrome, setting the body size in pixels seemed to work….

[MrGrinst]

@sloveland Yeah I’ve set the font-size in the body directly. Here’s what I’ve got now:

http://codepen.io/anon/pen/Hhoyn

@ChrisP Yeah at some point I do plan on having the layout elements all scale but for now I just need a quick fix on the fonts.

Thanks guys!

[sloveland]

Yeah, now that I test it again in the browser, it still upscales. In Ems it works, but seemingly not with Rems.

Someone else here may know more, but at this rate I would either use Ems with the initial body-sizing in order to prevent the problem on your boss’s browser, or try up-selling your boss on the accessibility that Rems provide (which admittedly may mean more work on your part making the containers more fluid).

Tough situation though…

I forked your pen and tried !important, didn’t work. Then I replaced rems with ems and it did…
http://codepen.io/sloveland/full/LvarF

[MrGrinst]

Okay cool I’ll try switching it to ems and see if that corrects the issue.

Thanks again

[Author]

Posts