When a custom designed UI is first implemented in an Android build, I often find the styling and nuances of the typography gets lost in translation. Adjusting some basic but often overlooked type characteristics can help preserve some of that appeal. Type characteristics can be easily adjusted by targeting a few attributes in the code; however, honing in on the right values for those attributes can be tricky since design software uses units of measure that are not compatible with Android type attributes.

In a recent project, our developers whipped up a simple tool that streamlined designer and developer communication when it comes to Android type attributes. Before we take a look at that I’d like to break down just a few aspects of type and get specific about how they can be manipulated in the code.

Font Size

Font size translates easily from design to development: One point (pt) is equal to one scaleable pixel (sp). Scaleable pixels take into account the user’s Font Size setting (which changes their font size globally on their device), so it is a best practice to use them rather than a fixed type size. Android’s textview has the attribute textSize and the method setTextSize.

That being said, when defining some particularly large type styles in our recent app, we opted to specify their size in fixed dp (density-independent pixel) units instead of relative sp units. Most users modify their size settings in order to improve readability. Since readability was not an issue with such large type, we opted to assure that this text didn’t get too overly large and unwieldy in the interface. Note that while this made sense in this instance, it’s usually a best practice to measure type size in sp so that any system-wide accessibility settings will be applied.

Leading

The typography term ‘leading’ refers to the vertical space between lines of text. This is synonymous with ‘line spacing’ and ‘line height’ and is also defined in pt/sp units. A base amount of leading is built into the font files themselves. To make things interesting, that amount of leading can vary from one font to the next.

In Android a TextView’s leading can be defined by the lineSpacingExtra and lineSpacingMultiplier attributes. The lineSpacingExtra attribute will increase (or decrease in the case of a negative value) a TextView’s leading, by a specified value and unit of measure, “3dp” for example. Alternatively, lineSpacingMultiplier can be used. This attribute accepts a floating point value (such as “1.3”) which adds additional spacing between lines as a multiplier. In code one would use the method setLineSpacing, which requires both extra and multiplier inputs in pixel units, so make sure to scale your attribute values accordingly.

Tracking

Tracking (or letterspacing) refers to a uniform amount of whitespace between characters in a given block of text. The term is often used interchangeably with kerning, although kerning refers to the space between two specific characters, not a group of characters as a whole. In the design program Sketch, tracking is measured in fractions of points. In Android, it can be adjusted using the letterSpacing attribute (available in API level 21 and above) which is measured in fractions of em units.

The Android Typesetter

Like I mentioned before, on our recent project’s early stages, we built a tool that allowed us to produce exact attribute values to match the finely tuned type styles in our UI designs. We embedded a temporary screen directly into the app that allowed me to adjust various values and style text on the fly. I was able to hone in on some precise attribute values without having to go back and forth continuously with the developer.

My goal was to get the styled text rendered by Typesetter to match perfectly with the UI mockup. To achieve this, my workflow would begin by uploading a font and setting the size. I would then adjust the Line Spacing and Letter spacing values, eyeballing the rendered text until it roughly matched the UI design. Next, I would import a screenshot into my original UI design in Sketch, placing it a layer behind the styled text.

Back in Typesetter I would adjust values as needed based on the comparison and repeat the process until I got the type to match. In this manner I was able to quickly produce a very accurate set of specs for each text style in the app.

Result

Typesetter helped preserve the integrity of the UI design and saved us a chunk of time in the process. Developers were able to input the values listed in the Line Spacing Addition and Letter Spacing columns above directly into the code. It avoided a more time consuming trial and error process between designers and developers, and allowed us to fully address type styles once in the project rather than encountering them at multiple times during the build.

We have since created an open source standalone version of Typesetter, so feel free to use it for your own projects. Stay tuned to this blog for more on Android development and design as Android O promises to improve the process of using custom typography in your apps.