Consistent font line height rendering

Rendering of the fonts differs on Android and iOS.

Even on iOS before version 7.

Recently I had to use the same font on the React Native project for both platforms. The difference was just too big.

Styles I’ve used:

{
  fontSize: 12,
  lineHeight: 18
}

On Android the line height rendered <Text /> component:

• 1 line of text, text object height: 18 units
• 2 lines of text, text object height: 43.333... units

Expected value was 46. iOS on the other hand rendered text object 46 units height.

Few hours later, many app uninstalls, react-native link commands & app reloads later.

Solution

1. Download Font Tools for Xcode
2. In Terminal run $ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf
3. Edit dumped pathtoyourfont.hhea.xml and set lineGap="0"
4. If lineGap was 200 and ascender="800", set ascender to the sum ot these two 1000
5. In Terminal run $ ftxdumperfuser -t hhea -A f pathtoyourfont.ttf

Done. Your new values are fused back the font file.

Repeat steps 4 and 5 until the rendering is OK. Do not change other values. Those should be OK.

Value that finally worked for me was ascender="1050". Try to change the sum until Android and iOS render the <Text /> component the same height.

Note: includeFontPadding had no impact on rendering, nor textAlignVertical as suggested in the official React Native Text docs.

Many kudos to the tips from StackOverflow. Some of them were dead ends, hence this post.