March 8, 2016

All About That Baseline

Virakri Jinangkul
Associate Product Designer

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.

fig_03
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?

fig_06
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.

fig_10
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.

fig_09
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.

Share Button
  • yashrg

    Very informative article. You mention extracting attributes from Sketch. Was wondering if you have discovered a way to get spacing between text Baseline and elements in Sketch using the smart guides for measuring? https://www.sketchapp.com/learn/documentation/10-canvas/3-measuring.html In my experience smart guides measure from the bounding box in V4.0.1

All About That Baseline

Associate Product Designer

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.

n

n

The anatomy of type

n

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.

n

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.

n

fig_03
nUse of baselines in a graphic design application

n

From Design to Development

n

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.

n

However, there are a few issues with this convention.

n

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.

n

n

Bounding boxes arbitrarily wrap around the letters

n

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.

n

n

The padding in bounding boxes varies by software

n

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.

n

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.

n

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.

n

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?

n

fig_06
nConstraints allow the layout to adapt to different screen sizes

n

An Alternative to Bounding Boxes

n

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.

n


nBounding boxes as constraints versus baselines as constraints

n

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.

n


nWhere the first baseline and the baseline sit

n

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

n

fig_10
nChanging spacing properties between bounding boxes to baselines in Xcode

n

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.

n

fig_09
nUsing baselines as vertical constraints and bounding boxes as horizontal constraints

n

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.

n

Baselines at Prolific

n

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.

n

Share Button

nn

n n

nnn

nn

nn

n n

n rn

rn

rnrnrn

    rn

  • rn
    rn rn yashrgrn rn

    rn

    rn

    Very informative article. You mention extracting attributes from Sketch. Was wondering if you have discovered a way to get spacing between text Baseline and elements in Sketch using the smart guides for measuring? https://www.sketchapp.com/learn/documentation/10-canvas/3-measuring.html In my experience smart guides measure from the bounding box in V4.0.1

    n

    rn

    rnrn

  • n

rnrnrn

rnrn

rnrn

nnnn

Share Button

Comments are closed.

All About That Baseline

Associate Product Designer

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 typeThe 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.

fig_03
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 lettersTo 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 softwareWhen 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?

fig_06
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 constraintsIn 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 sitAfter designers extract these attributes from a program like Sketch, developers will set vertical constraints in Xcode as baselines.

fig_10
Changing spacing properties between bounding boxes to baselines in XcodeNote 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.

fig_09
Using baselines as vertical constraints and bounding boxes as horizontal constraintsIf 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.

Share Button

Comments are closed.

'