We can safely conclude that Figma centers the area between ascent and descent inside the line-height. So let's increase the Figma line-height to 1000 and look at the result: Figma adds 269 points - which is (1000 - 462) / 2 - to the top and the bottom (adding more to the bottom when the amount is not even). But your designer might want to have a larger line-height than what Figma picks.

So that's a great success! We are now aware of how Android and Figma place text and can account for that. A quick calculation confirms that numbers add up as well: 115,50 - (-346,50) = 462,0 462 is exactly the line-height chosen by Figma. The visual comparison suggests that Figma uses 'ascent' and 'descent' as the limits of the text box. The main reason for this is Androids includeFontPadding property which can't be turned off in Compose currently. This means that the height of our 'TextView' / 'Text Composeable' for a single line of text will be ceil(bottom - top), in our case this amounts to ceil(93,94 + 381,15) = 476. That area extends between the 'top' and the 'bottom' line. The yellow background shows the area of the text composable or the size of the TextView. Let's have a look at the values of the 'Nationale' font on Android (I wrote a small tool to visualize these, you can get it here): I use an OpenType font, and other font formats may lead to different results.

See this Skia documentation of FontMetrics. So if you call 'Paint.fontMetrics' you essentially ask Skia to give you the Font Metrics. Essentially the Android Canvas is a wrapper for the Skia Canvas. Note that these metrics are a property of the font, thus independent of the string! Leading: This value is chosen by the font designer and represents the recommended distance between two lines. Top: This value is computed by Skia and is the topmost point of all glyphs in the font.īottom: This value is computed by Skia and is the bottommost point of all glyphs in the font.Īscent: This value is chosen by the font designer and represents the recommended distance above the baseline for any text.ĭescent: This value is chosen by the font designer and represents the recommended distance below the baseline for any text. Essentially the Android OS extracts 'FontMetrics' from each font, which describes the following values: This iconic article from 2017 lays the foundation to understand Android typography. Let's try to understand the behaviors of each first to achieve our goal! I wanted to get to the bottom of the differences and systematically understand what both platforms are doing to fix the issue. I didn't want to admit to the other platforms that we needed two more tokens in platform-agnostic code per text style to fix a shortcoming on the Android side. However, I had a use-case where we wanted arbitrary line-heights and font sizes derived from shared design tokens. This advice is fantastic and probably satisfies the need of most. There is this article from Eduardo Pratti, which suggests comparing the placement and adding paddings to the top and bottom of the Android view (via 'firstBaselineToTopHeight') to make up for the different arrangements. The result is having two lines resulting in a total size of 'line-height + text height' (instead of 2x line-height). The line-height specified in Android is only considered for texts with more than one line.The placement inside the text box is different (Android is a little more 'down' than Figma).The line heights are different (Android bigger than Figma, although slightly).The following problems appear when comparing Figma with Android behavior: The Android screenshot has a yellow background the Figma screenshot has a blue one. Let's quickly pick up the Font 'Nationale', draw a Text in Jetpack Compose and the same Text in Figma and compare them: Welp, since I got to work on setting up the typo yet another time, I decided it should have a little more foundation this time. Getting the typography right compared to a Figma design was always something I winged without getting a more profound understanding as to how and why one is different from the other. I have been working on Android UI for quite some time now.

TL DR: If you want to attain 100% Figma fidelity wait for the new Text API to be released with Compose 1.2.0 or scroll down to the gist at the end if you need it earlier.

Figma fonts not available