running words around
design education and visual communication
authored by chris m hughes

Underline Styling

Thursday, 25 September 2014

The phrase 'concept is king' is one of the defining ideas in design education, and it is a tenet that really does hold up. Production, execution, craft - these aspects of the discipline are 'emergent' once the problem contained within the brief has been identified, and the concept has been formulated.

But lots of the creative thinking is still bound up in the production part of the design process, where design choices, techniques and nuances are all driven by the concept. So very often, a simple design technique can be the inspirational spark that pushes the concept.

Minor design techniques related to typography are a good example, specifically the ways in which software tools can themselves be improvised to create effects and forms that may well not have been intended. One great example of this is the use of underline styles in InDesign to create stylish and classic type effects that always look good in print, and are increasingly finding their into digital design. The effect looks like this -

This is achieved by tweaking the underline properties in the character styles palette. Once you've got the settings you want, you can apply it to any piece of text. You can also set the underline and the type to the same colour, to produce typeset copy that just looks like horizontal, ragged lines - a technique popularised by Neville Brody in the 1990s (a slightly lazier way to get this effect is to use the rather beautiful typeface Blokk).

Here's the technique -

1. In InDesign, create a text box for your type and type in any phrase. I've used a carriage return for each word, left-ranged, and set to Helvetica Neue Condensed Bold, then set solid at 30pt/30pt.

2. Select the text, then in the Character Styles palette, create this setting as a style, and name it appropriately e.g. h1, and apply to the selection.

3. In this new h1 style, we choose the underline option, and switch preview on in the panel.  This allows you to see each change you make. Now tick underline on and you'll see an underline appear for each word.

4. Now we add some weight to the underline, offset it using a negative value, and then colour it. The trick is to make the underline weight equal to or just greater than, the pointsize. The offset then needs to be negative, and you just click it up until the underline evenly covers the word. You can tweak the leading to control the size of gap you want between what are now blocks of colour under the type. Change the underline colour and that's it done. The process will look a bit like this -

This visual style is being seen now in web design too, but the technique to achieve it is different.   Instead of using 'underline' (a text-decoration property),  CSS styling requires the font to be given a background-colour, and the gaps are controlled by padding and line-height.  A recent example of this can be seen in the excellent new redesign for London's Design Museum website, which combines fullscreen photography with left-ranged type featuring the aforementioned typographic texhnique, like so -