V Jinangkul Design Technologist

All About That Baseline

Baseline is a commonly used term among designers, but for everyone else it can be a mysterious concept. What it refers to is the horizontal, usually invisible, line where the letters of a word sit.

The anatomy of type

The term “baseline” was coined at a time when typesetting systems were being developed. Before the days of computers and graphic design, typographers had to meticulously draw straight lines across a sheet of paper to ensure that the text was aligned and the line-height was consistent across the entire piece of writing.

Now that we’re digital, this process is much easier because design software can compose the baseline automatically to ensure perfect spacing between lines. Although we no longer have to manually create baselines, we still need to communicate these designs to developers.

Use of baselines in a graphic design application

From Design to Development

The majority of software we use binds text into a rectangular container, or a bounding box. Designers and developers alike can refer to the width, height, and x- and y-coordinates of these containers in order to move from one program to another.

However, there are a few issues with this convention.

Bounding boxes can only refer to where the letters will roughly be, since text never completely fills the rectangular space. Unlike images or buttons, bounding boxes for text are invisible, making it difficult to predict how it will look in different situations. In the case of dynamic content, it’s impossible to see how it will appear when implemented.

Bounding boxes arbitrarily wrap around the letters

To further complicate this, a bigger issue is that there is no consistency in the way these boxes are set; different programs have different ways of generating bounding boxes. Some have more padding within the box, some have less.

The padding in bounding boxes varies by software

When developers implement designs, they usually measure the bounding boxes and the spaces between them. Because of the invisibility of bounding boxes and the lack of standardization among them, it is difficult and time-consuming to accurately translate the positioning of text elements.

We should remember that bounding boxes are dynamic in our responsive, adaptive landscape. Elements must change size and position in order to fit within a certain screen size, from iPhone 4 to 6 Plus to iPad; from landscape to portrait. Absolute measurements are not enough to explain the location and look of the elements.

For iOS, Xcode’s Auto Layout is a constraint-based layout system that allows developers to create designs that can adapt to external changes such as different screen sizes and orientations, as well as internal changes such as dynamic content displayed by the app.

Developers use attributes such as the vertical and horizontal centers of bounding boxes as constraints. This works well for buttons, images and lines, since the boxes reflect the actual area of those elements. But is there a better way when it comes to working with typography?

Constraints allow the layout to adapt to different screen sizes

An Alternative to Bounding Boxes

Referencing the baselines of text instead of bounding boxes can vastly improve accuracy when implementing designs. Instead of measuring the space between bounding boxes in Xcode, developers can use baselines as coordinate points that are not dependent on arbitrary spacing between invisible bounding boxes but rather the baseline of the actual text.

Bounding boxes as constraints versus baselines as constraints

In Xcode, there are actually two baseline attributes we designate: the first baseline and the baseline. The first baseline attribute indicates the vertical position of the first line of text, and the baseline attribute indicates the vertical position of the last line of text.

Where the first baseline and the baseline sit

After designers extract these attributes from a program like Sketch, developers will set vertical constraints in Xcode as baselines.

Changing spacing properties between bounding boxes to baselines in Xcode

Note that baselines are vertical attributes. This means that only vertical constraints can be applied to baselines. To indicate horizontal space, e.g., the width of a container, bounding boxes are still needed.

Using baselines as vertical constraints and bounding boxes as horizontal constraints

If done correctly, using baseline measurements will take an extra step to set up but can significantly reduce the time spent fixing alignment post-implementation. We can cut out tedious back and forth between designers and engineers during the design QA process if the implementation already looks identical to the design.

Baselines at Prolific

Using baselines to position text in Xcode is a technique that we’re exploring on some of our current projects and the results have been promising. As we continue to sharpen our tools, the methods with which we build products are bound to change. This is an example of an improvement in our process that affects not just one discipline, but the design and development process as a whole. We’re always looking for new ways to optimize our workflow and prevent designs getting lost in translation.