Responsive design & font sizes

ok, so everything has to be so “fluid”, right? :wink:
(like I mentioned in another thread, this resp design approach is really what we should have been doing all along…:wink: now we’re learning the lessons the hard way…:wink:

so what about font sizes?

the correct approach for resp design would be to not set a default font-size at all? then everything else (headers, footer nav, etc) do in percentages?

what do you think is the best approach for setting font sizes in responsive design?

thank you…

A good practice for any web design is to set a % font-size on the <body> element. I prefer

body {font-size: 100%}

but others prefer 85% etc.

You don’t really want fonts to get too small on small devices, so I prefer not to change font sizes on smaller screens. Responsive design is more about the layout responding rather that the text size.

font-size:100% is not the default? :wink:

thank you Ralph…

It’s probably not necessary now, but without that, some older browsers used to go haywire.

If you wish, you can use media queries to change the font size per device, such as larger size font for mobile devices and smaller size for desktop.

One article suggested:

body {
font-size: 100%;
@media (min-width: 40em) and (max-width: 55em) {
font-size: 87.5%;
}
// we go back to 100%.
@media (min-width: 70em) {
font-size: 110%;
}
}

there are some font size that can depends only for the screen. I think the best you can do is not to change the design also it is better you to have or make your own design so that it can give more attraction.