How to set font-size to "larger" or 140% of system default

Question

I want to provide to my users a possibility to display certain <Text/> elements with a larger font-size, than a system default. The documentation provides a number only for that style.

I want to display texts either with web-css "large" or "larger" values or maybe with 140% of the original font size.

I found couple of questions on SO and 3rd party libs, like responsive-fontsize, but they all seem not relavant to me.

What's the easiest way to do what I want?

Could you elaborate more on _why_ the others don't suit your needs? — yunzen, May 14 '21 at 12:17

score 1 · Answer 1 · answered May 12 '21 at 10:00

You define styles for each component, such as <Text /> you described. Here is an article
You can set your fontSize as kind of formula, example: style={{fontSize: 10*1.4}} or style={{fontSize: x*1.4}} where x is your global variable.

P.S. Normally, you can't just make font bigger in %

score 1 · Answer 2 · answered May 12 '21 at 16:20

You can use em for a relative size.

With em, you can say how many times bigger or smaller you want your text to be. For example:

0.5em will be half of your initial size, 1em will be the same size, 2em will be twice the size.

<Text style={{fontSize: `${relativeSize}em`}}>
      I am {relativeSize} times bigger than I was supposed to be
</Text>

Here is a working example: https://snack.expo.io/@andrpr/bigger-text-example

If you want to use percentages, you can convert them to how much bigger you want the text to be:

const percentage = 140;
const relativeSize = percentage/100;

https://snack.expo.io/@andrpr/percentage-bigger-text-example

doesn't work on a device. Throws an exception `java.lang.String cannot be cast to java.lang.Double` — injecteer, May 12 '21 at 17:00

score 1 · Answer 3 · answered May 13 '21 at 12:16

I think what you're looking for is PixelRatio which let you more control on your fonts sizes. Or else it could help someone who reached your post.

PixelRatio gives you access to the device's pixel density and font scale.

So after you got the informations you want you can play with it.

You can find exemples on this answer

For exemple :

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

score 1 · Answer 4 · answered May 16 '21 at 20:18

I would create a custom Text component that translates the defined textSize style to the adjusted scale. The scale you can get from a Context-Provider, Redux or Recoil, etc.

something like this (untested):

export function MyText(props) {
  const { fontScale } = useContext(TextContext);

  return (
    <Text {...props} style={[...style, { fontSize: style.fontSize ? style.fontSize * fontScale : undefined }] />
  );
}

score 0 · Accepted Answer · answered May 18 '21 at 20:09

After some experimenting I figured out that the default font size - if not set and for Android at least - corresponds to 14.

From that base one can increment the size to 18 to get roughly 140% of the original size.

Good thing is the font is scaled depending on system-wide font size.

How to set font-size to "larger" or 140% of system default

5 Answers5