Menu
I am a UX architect working with a team of Android developers that are mostly junior. We are having issues properly setting line height in Android.
We are using the Material Design spec as our guide for our app. In particular, you can see line height specs here:
https://material.google.com/style/typography.html#typography-line-height
Let's use Body 2 as our example. The spec says the type is 13sp or 14sp, and the leading (line height - same thing) should be 24dp.
Here's the problem: these devs are telling me there is no such way to set line height like that in the code. Instead, they are telling me to measure the distance between the two lines of text and give them that measure - let's say it's 4dp. They want this for each style of text we are using.
We are using a Sketch > Zepelin flow for spec.
It seems odd to me to be able to create a font style (which could easily be class/style in the code) that is 13sp with 24dp leading, and not be able to set the leading, but instead have to add a 3rd measure to the mix. There is no place in Sketch or Zepelin for such a measure "between lines."
Is this really the way it is done, or is there a proper way to set line height?
919
The perfect line height depends on the design and size of the font itself. There is no magic number that works for all text. A line height of 1.5 times the font size is a good place to start from, and then you can adjust accordingly. Using an 8 point grid system works well when using 1.5 line height.
Just we need to add an attribute with your TextView that give the spacing with lines. These are –android:lineSpacingExtra, android:lineSpacingMultiplier – use these two attributes with your TextView in XML file. or Programatically call setter method of that attribute textView. setLineSpacing().
Line height usually means text size + "padding" top/bottom. So, if your designer write line height 19sp and text size 15sp, it means you need to have extra padding 4sp. 19sp - 15sp = 4sp. To implement it in your layout, use lineSpacingExtra attribute.
Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.
I'll explain this from Android Developer perspective.
Line height usually means text size + "padding" top/bottom.
So, if your designer write line height 19sp and text size 15sp, it means you need to have extra padding 4sp.
19sp - 15sp = 4sp.
To implement it in your layout, use lineSpacingExtra attribute.
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15sp" android:lineSpacingExtra="4sp" android:fontFamily="sans-serif" tools:text="StackOverflow is awesome" /> Another way to achieve line height is using scale. For example, 1.2. It means, the spacing is 120% of the text size.
In example above, the line height is 19sp and the text size is 15sp. If we translate it into scale, it become.
19/15 = 1.26
To implement it in your layout, use the lineSpacingMultiplier attribute.
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15sp" android:lineSpacingMultiplier="1.26" android:fontFamily="sans-serif" tools:text="StackOverflow is awesome" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
