CODEWITHSUNDEEP
cssfont-size
brent
brent

Reputation: 403

Getting the right font-size on every mobile device

In my mobile app I use kind of big fonts for example:

<b style="font-size:100px; font-family:Segoe UI">text</b>

When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.

What css settings should I use to get the same size on every phone?

Upvotes: 34

Views: 114743

Answers (7)

theking2
theking2

Reputation: 2793

The answers are all correct but I find the combination of viewport size related but limited to between two values ideal by using clamp() For example:

font-size: 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);

This will smoothly size the text but not under 1rem (typical 16px) or over 1.25rem (typical 20px). It can be used on the size of icons or font-awesome chars or svg vectors. I use one of the many online clamp calculators to spare me the maths. For instance this one.

Upvotes: 1

Colin
Colin

Reputation: 31

I have started using REM and EM to achieve this.

I don't know whether a phone browser's default font size changes based on screen size or specific to device. So what I do is I set the HTML to a font size relative to an average of the height and the width of the device using vw and vh like so

HTML{font-size: calc((1vh+1vw)/2)}

By using REM and EM from here you get a more consistent layout and font size across the board.

This works well for mobile devices as they all tend to be the same sort of aspect ratio. I would recommend changing how you implement this for tablets and desktops as their screen ratios tend to be quite different. Of course, use media queries to have separate styles for these.

I would like to say that I just started using this method so would love to hear reasons why I totally should not be using it!

Upvotes: 3

Caner
Caner

Reputation: 59148

Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.

Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.

There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.

Upvotes: 32

Capsule
Capsule

Reputation: 6159

Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass

It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.

Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.

Upvotes: 0

mehmet
mehmet

Reputation: 8144

Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.

For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.

If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header): 

    <meta name="viewport" content="width=device-width, initial-scale=1">

If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.

Upvotes: 34

Mr. Alien
Mr. Alien

Reputation: 157284

Use @media Queries and set different fonts for different resolutions

Example

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

Good Read On Media Queries

Upvotes: 0

drip
drip

Reputation: 12943

You should be using Media Queries for different device widths. 

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

And so on...

Upvotes: 18

Related Questions