Best practice for font-size

I created an app that is like a site so it has many html contents so I want to give user ability to change font-size of content as desired, I created font-size as range element that user can set font-size from 12 to 20 and when user increase font-size, I wrote a code that sets font-size: (selected)px; to content text but it damages text display and styling, and content shown very bad. How can I fix this problem? Another question is that what is best size for each of different sizes because I want to do media query for user device and use good font-size for content?

1 Like

This was a question in my mind too! Not sure if using “em” instead of “px” is a better practice.?
Waiting for better answers :smile:

1 Like

Personally I’ve always just let the framework set the font-sizes for things such as headers, footers, tabs, and if I need to, change the font size for the content.

The key isn’t that just making the font bigger, but changing the font-weight as well

As for ems vs px vs rems, I’ve always stuck with pixles, just for simplicity.
Trying to figure out what 24px mean in rems and ems just doesn’t seem worth it to me.

2 Likes

@naveenkarippai1 Thank you for your participation, I checked em and % but they have same problems.
@mhartington Thank you for your answer.
One another question can Ioinc framework set content font based on device size? In another words should I use media query to displaying content as good as possible or not?

Since we’re working in a webview, you can use media queries to change the font size based on a screen width.

2 Likes

I use rather the rem unit for font-sizes, defining the base size in the html style.

 html{
    font-size:18px;	
  }
  input{
    font-size: 1rem;
  }
  h1{
    font-size:1.2rem;
  }

Thus you can easily change all font sizes and keeping proportions.

3 Likes

I strongly agree with Eusebe and I cannot understand why the css font size base is fixed with pixels. Sure I can redefine all tags with media queries, but it would be easier to work from a relative font size.
Does it worth a pull request ?

We went with pixels so that way we can have better control of what size our fonts are. Sure you could use rems and have sizes cascade down, but you loose some precision control.

We’re probably going to stick with pxs and not switch to rems/ems.

2 Likes

I got my app to fit and look good on phones and tablets, then to my horror I discovered that if the Android accessibility Font Size was increased my app wouldn’t fix on some phones.
How to fix this?

2 Likes

Hey I am facing the same issue. Did you resolve this?

any ways to set root font-size dependent of media max-device-width and platform details or just platform details?

1 Like

To add to the question, i have an app which uses pixels. On honor 6x it looks fine but on one plus 6, the font is too small. In this case will a relative unit be a better option or i should stick to px?