Designers and Frontend coder tend to think more about columns than rows. That’s not surprising. As most devices are designed to scroll vertically, our page width is more limited than our page height, so dividing up the horizontal space seems like a natural place to start.
Vertical Baseline Rhythm
The vertical baseline rhythm – sometimes called the ‘vertical measure’ – is a grid of horizontal lines that you can use to hang your typography in. It’s not unlike the light-blue lines on a grade school work book.
Richard Rutter describes it like this:
Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.
The Elements of Typographic Style Applied to the Web
Often, even though we can’t see the actual underlying grid, we’re aware of it through a feeling of balance and ease in the layout. We might not know why it feels ‘right’, but we know it does.
But does that mean every page element has to bow to the grid?
No. Not necessarily.
How does Wallpaper roll?
Wallpaper is a magazine that grew up in print. Their print layouts have always been neat, airy and classy with emphasis on attractive type and low ornamentation. Wallpaper’s online presence honors that approach.
At first glance there isn’t an obvious grid – to my eye anyway.
But roll a 25px line-height grid across it and things becomes clearer. Elements aren’t always locked to each line – though some are – but many float inside the lines provided.
Applying a Baseline Grid to any page
I’ve often found it useful to be able to apply a grid to a live webpage. It helps with the early stages of development and gives you consistent units to talk about with your dev team. It’s also a nice way to get some insight into why the layout of a site you like is working.
Here’s how I do it on Chrome, but it should work on most browsers.
1). Install Stylebot. and go to the page you want to add the grid to. Stylish will work fine too.
2). Click on the Stylish button and ‘Open Stylish’. Copy the CSS below and paste it into the empty Stylebot panel.
body { position: relative; } body:active:after { display: none; } body:after { background: linear-gradient(0, rgba(200,225,255,0.6) 1px, transparent 1px); background-size: 17px 25px; bottom: 0; margin-top: 0px; content: ''; display: block; height: auto; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; width: auto; z-index: 9999; }
You should immediately see light horizontal lines overlaying your page (see image).
3). You’ll probably want to adjust the grid. Change the second number in background-size to change the line-height of your grid.
background-size: 17px 25px;
Change the color and opacity in the grid by editing the RGBA color in `background’.
background: linear-gradient(0, rgba(200,225,255,0.6) 1px, transparent 1px);
4). When you’re happy with it, hit SAVE, and your grid will be applied to any page you visit under that domain. Click ‘Cancel’ and then ‘X’ to close the StyleBot editor.
5). You can deactivate your grid (or any other CSS you’ve applied to the page) by clicking on the StyleBot button, selecting ‘Options’ and then ‘Styles’. You can switch your grid on and off any time you like.
Here’s quick screen grab showing it. http://ift.tt/2lp1h5C
Vertical Baseline Rhythm is not a religion
Vertical Baselines are a handy tool but they shouldn’t take over your design. There was a time where I spent too much sweat trying to bend every page element to obey my mighty grid rules.
I was battling typographic percentages and margins and ‘hitting the grid’ became a goal in itself, rather than a tool to help me design better. That’s not fun or very useful.
Continue reading %Web Layout 101: Vertical Rhythm is a Drummer%
by Alex Walker via SitePoint
No comments:
Post a Comment