Big question: Baseline grid or modular scale?

Shane Mielke
Creative director
www.shanemielke.com

Every solution, both old and new, has a place in the bag of tricks we use to design and develop sites.

We shouldn’t get too caught up in using just fixed widths, baseline grids or modular scale when delivering solutions for our clients, because they aren’t the best option for every situation. The key is looking at each project individually and evaluating all of the goals and limitations like budget, timing, costs associated and skill sets of the people involved. Use the solution that gets the job done within the limitations of the moment, rather than forcing every project into a singular development style.

Shane is a designer and creative director
 

Laura Kalbag
Freelance designer
www.laurakalbag.com

I use a baseline grid for my layouts. First of all, I choose a typeface that's appropriate for my content. Once I've settled on the ideal size and measure for that typeface, I choose a unit for my baseline grid based on that font size, line height and measure.

I use this unit as a loose guide for all the measurements in the layout. It's just a loose guide because, with the fluidity and responsiveness of web designs nowadays, it's unrealistic to stick to strict measurements, particularly horizontally. Despite this, I still think that just the presence of a consistent unit used across a design system creates uniformity and structure.

Laura is a freelance graphic and web designer
 

Mark Boulton
Founder
www.markboultondesign.com

For every project, I use a grid system that's designed around the content needs of the project. These are always designed from scratch, rather than using any type of framework.

I don't use baseline grids as they're too fragile on the web – in fact, they're not really baseline grids anyway, as the browser can't read those metrics from the font. It's probably more accurate to call them ‘line-height grids’. Either way, they're just too fragile, and we don't really have the need for creating horizontal relationships between columns, as we tend to read content vertically.

Recently, I've been applying some older, more 'traditional' grid design practice to what I do on the web. I've been exploring the use of compound grids (different grids overlaid at the same breakpoint), which were in pretty heavy use in the 1960s in magazine design; and good hierarchical grids for small screens (whereby hierarchy takes importance over columns).

For all of these, I'm using Gridset to give the measurements and CSS for the responsive layouts.

Mark is founder and creative director at Mark Boulton Design and co-founder of Five Simple Steps
 

Paul Falgout
Co-owner
www.otterball.com

If you start your design with a grid system, you’re not really designing, you’re colouring by numbers.

The grid should emerge from the content. My process is simple: start without a grid, implement a pleasing measure and baseline rhythm, and let the content dictate the grid. By working this way, I find that my grids are simpler (with fewer columns), more semantic (as my code isn’t littered with generic column names), and optimised for the content.

Paul Falgout is web antagonist and co-owner of Nashville-based design firm Otterball.com
 

Ryan Morgan
Senior designer
www.strawberrysoup.co.uk

At Strawberrysoup, we've built a modular grid system that ties in with our bespoke ecommerce platform and is heavily influenced by the emergence of responsive web design.

Although you could see this as a restriction, it allows us to safeguard the compatibility of sites on mobile devices, which is massively important. It also makes the transfer between design and development far more fluid.

Ryan Morgan is senior designer at Strawberrysoup
 

Jonathan Smiley
Designer
www.zurb.com

At ZURB we build a lot of client layouts, so we developed a whole frontend framework called Foundation to quickly build responsive layouts.

We've used it now for over a year for our projects and our clients, and we've been lucky enough to see it have a lot of success in the open-source community. As far as efficiency goes, nothing we've done in the past few years has been quite so effective.

Jonathan is a design lead at ZURB
 

Mark Kirby
Director
www.thisishatch.co.uk

I set typography layouts on a case-by-case basis, but on my latest project I've been using the Compass Vertical Rhythm plug-in (http://netm.ag/verticalrhythm-237).

You establish your baseline and then set each font size in px. The mixin then converts these to ems based on a calculation stemming from that baseline. It means you don’t need to perform many complex calculations that lock you into your baseline. You do, however, become reliant on using Sass and you lose some understanding of what’s going on behind the scenes.

We are using Vertical Rhythm in a company in-house project, so forcing use of Sass is not an issue, and we understand the calculations, so we have found it to be a great time-saving device.

Mark is a director at Hatch
 

Trent Walton
Founder
www.paravelinc.com

Luke Skywalker did just fine when he switched off his targeting computer. Whether we choose to implement a baseline grid or not, we should always be willing to override its guidance.

Part of me loves the notion that we'd put such care into our designs—that every decision is truly calculated. Then there's this nagging concern that when implementing a baseline grid, I'd be afraid to trust my own intuition when grid rules contradict situational decisions I make based on the layout, context and the typeface(s) involved. If that's the case, has the baseline grid become something different, like a crutch?

Trent is founder of Paravel
 

Rachel Shillcock
Freelance web designer
www.rachilli.co.uk

I think it is infinitely more important that we have a consistent experience and visual output, instead of ensuring that our designs and code stick perfectly to a baseline that isn’t really necessary or required.

I recently asked a similar question on Twitter and was surprised to hear that most people are against strict baselines for the web: instead most prefer to just work with a vertical flow. Instead of sticking to a strict baseline and how to implement it in your CSS, you look at how the content on the page flows visually and how cohesive this is: particularly important now, considering the decisions we have to make with responsive design.

That isn’t to say that just because we don’t use a baseline, we abandon all that makes the site – for example, I work with a more modular, consistent number or scale that relates to all of the measurements I design. This can include padding, margins, typography (sizes and spacing) and much more.

I find that most of the layouts I create come about from sketching and playing around with wireframes. Then I start trying to refine these messy scribbles into something a little more substantial and meaningful – though this is usually still done on paper. I love Gridset for creating my grids; then I start dropping these into my CSS for prototyping and development (the very new Sass features are also brilliant).

Rachel is a freelance web designer
 

Gavin Elliot
Designer
www.gavinelliott.co.uk

I do like to use grids, but the choice of which grid I use is left until the full spec has been looked over and the content has been defined.

I apply whatever is needed, whenever it is needed, for the job at hand. You can't really say you'll use Grid X on every project, as the content often defines the approach, and each individual project is vastly different.

Gavin Elliott is founder of the Industry Web Conference