How to increase font-size for the whole ionic 4 app?

Ionic Framework ionic-v3
1

Hi everyone,

I am developing an mobile tablet PC(Android) application with ionic 4. Everything works great, except the default font size is too small for our users.
Is there any way to increase the scale of font size for whole application? For example, 200% font-size of original.

If no, I would just enforce users to change the ‘Font Size’ setting in Android - Setting - Font Size, setting it as ‘Huge’ instead of ‘Normal’…

Any help would be much appreciated!

2

If you’re on Ionic 4 then add

body
{
    font-size:2.8rem;
}

to variables.scss. It should work

1 Like
3

Hi geshjosh,

Thanks for you reply : )

I added font-size attribute to veriables.scss, but its not working. I inspect the css in browser via ionic serve, and I founded something called “:host{ }” on the element also have a ‘font-size: 14px’ style and it has a higher priority than the one I just add to veriables.scss.

Finally, I specify the font-size for each element one by one in veriables.scss and it works now.

:root{
ion-item{
font-size: 20px;
}

ion-tab-button{
font-size: 16px;
}

ion-button{
font-size: 16px;
}
}

I also saw something called ‘Overriding Ionic Sass Variables’ but it is for ionic 3, seems not working at ionic 4.

4

I guess this is true for ionic 5 aswell, isn’t it?

Is there no other option than styling each and every possibly used element if one would like to have a overall smaller appearance?

5

Aaah, the following seemed to help, not sure if completely wrong (i’m not a css pro…).

I guess these defines a 1rem globally which the :root can then refer to.

* {
  font-size: 1.0rem;
}

:root {
  font-size: 0.8rem;
}
1 Like