Thursday, 29 September 2011

Tips For Setting Up A Baseline Grid | Van SEO Design

Tips For Setting Up A Baseline Grid | Van SEO Design

Tips For Setting Up A Baseline Grid

Posted: 29 Sep 2011 05:30 AM PDT

When people talk about typographic grids it often revolves around the horizontal and aligning elements to columns of precise widths. The vertical gets slighted at times due to the dynamic heights of web pages.

However, we shouldn’t ignore the vertical. We should set the vertical to a baseline grid.

The last few days while working on a redesign for this site I’ve been putting a lot of time into setting up a baseline grid and refining that baseline across different responsive breakpoints. I thought I’d share some of what I’ve learned.

I’ve also set up a simple demo where you can turn the baseline grid on and off to see the difference.

Baseline: A real or imaginary line that the letters of a word rest on so the characters appear to line up evenly

Why Use a Baseline Grid

Baseline grids set your type and create vertical rhythm through your design. They make your text easier to read and they make the whole of your type feel more cohesive, helping give unity to your design.

Setting up a baseline grid is about controlling the vertical space in your design. Like the intervals in music the space and scale in design creates rhythm.

Without rhythm readers can get lost. With rhythm they are guided through your copy.

A baseline grid simply makes for a better reading experience.

Screenshot of the baseline grid demo for this post

How to Create a Baseline Grid

Creating a baseline grid comes down to paying attention to a select few properties, however it’s important to be consistent with these properties across your design.

  • font-size
  • line-height
  • top and bottom margins
  • top and bottom paddings
  • top and bottom borders

Your line-height (your leading) is what sets the grid. Imagine a lined notebook. Each line is a grid line and each line of your text would sit on one of those lines. Occasionally you’ll skip a line and then your text once again sites on a baseline.

The space between each pair of lines, the baseline, is your line-height.

Even though your line-height sets the grid you’ll want to start by choosing a typeface and a font-size and then set a line-height based on both. This is designing from the content out.

These choices are up to you and your design, but once set everything else will follow from these choices.

In the spirit of flexibility I recommend setting vertical units in ‘em’s as opposed to ‘px’s. Your line-height can be set as a unitless number or in ‘em’s.

 body {   normal font: 1em/1.5 "Georgia", "serif"; }

Here I’ve used the font property shortcut and set Georgia at 1em (which defaults to 16px) and a line-height of 1.5, which corresponds to 24px. This becomes the baseline unit.

Of course not every element in our design is going to have the same font-size. That’s ok as long as we compensate with line-height, which needs to remain some multiple of our baseline unit.

 h1 {   font-size: 2.5em;   line-height: 1.2; }

Above I’ve set the font-size of the h1 to be 2.5em or 40px (16 × 2.5 = 40). 40px doesn’t sit on a baseline, though. Neither would 60px which is what we’d get with the basic line-height of 1.5 that we set on the body above.

However, setting the line-height to be 1.2 leads to a line-height of 48px (40px × 1.2 = 48px) or twice our baseline unit, ensuring we stay on the grid.

CSS box model

The Box Model

A consistent line-height is the first step, but there’s more to setting type to a baseline grid. You’ll probably want to set some kind of margin between paragraphs and headings for example.

Divs, sections, and other block level elements will probably get top and bottom padding as well as margins. And how about the occasional border above or below an element? All affect the vertical space in your design.

If you look at the image above of the css box model there are 4 areas that get measurements — content, padding, border, and margin, each with a vertical component.

When we set the line-height to be some multiple of the baseline unit we ensure the height of the box’s content will be a multiple of the baseline unit. That still leaves the three other measurements

Let’s add a couple more elements to the mix.

 p {   margin: 0 0 1.5em 0; } h2 {   font-size: 1.5em;   line-height: 1;   margin: 1.5em 0 0.5em 0; }

I like setting either the top or bottom margin on paragraphs, usually the bottom margin. At 1.5 em it corresponds to the 24px of the baseline unit ensuring that anything that follows remains on the grid.

Here I’ve set the h2 to be larger than the text. 1.5em corresponds to 24px, which is our baseline. Because the font-size has been changed other ‘em’ measurements will refer to it. So the line-height of 1 here is again the same 24px.

I want the h2 to have some space around it and following the principle of proximity I prefer to have more space above than below.

Neither the top or bottom margin is equal to a multiple of the baseline unit, but together they are.

1.5 × 24px = 36px

0.5 × 24px = 12px

36px + 12px = 48px = 2em = 1.5em + 0.5em

Because of the way the margins are set, the h2 itself won’t sit on a baseline, but that’s ok, since the combinations of margins assures that whatever follows will be back on the baseline grid.

While I haven’t specifically used paddings or borders in the examples above, hopefully you get the idea. You’d do the same thing with both as I did above with the margin.

Ultimately you want to make sure the total height of the box is a multiple of your baseline unit. The line-height will take care of the content part of the box model and padding, margin, and border take care of the rest.

None of the above is difficult, but it does require consistency and attention to detail. Add a little border and you need to remove it’s width from margin or padding. Sometimes the math isn’t fun, but it’s not exactly difficult.

Book cover and spine for html and css reference

Remember Your Elements

Even with a little math this is still pretty simple when you’re looking at two or three elements, but remember you need to think of all of your elements.

You need to consider all your hx elements, paragraphs, unordered and ordered lists, blockquotes, images, divs and other block level elements, etc.

You may want to look through one or two css reset files to get a feel for all the elements you’ll need to think about. If you forget to account for one of them it’ll throw the rhythm of your grid off, assuming you use that element on the page.

Fortunately by setting the line-height on your body you cover a lot. If you add a basic margin and padding to typical elements in a reset you cover most everything you don’t commonly use.

Just be careful with the elements you do use and particularly those where you alter the size of the font or plan on using one of the vertical properties of the box model.

Images and Other Non-Text Elements

Not every element is going to contain text and so line-height alone won’t keep the height of its content a multiple of the baseline unit.

For images you’ll want to keep your basic unit in mind when creating the images to make sure their height is a multiple of your basic line-height.

For any image that can’t be created this way, you’ll need to adjust margin, padding, or border to get what follows back on the grid. Similar for other non-text elements.

Baseline grid image

Working with a Visual Grid

Trust me when I say this is all easier when you can see the grid. Here or there while in development you’re going to have elements off the grid and it’s going to be hard to spot them looking at the math in your css.

Much better is to set a background image on your html or body element that shows the grid. Seeing the grid will quickly let you know where something has gone astray.

There are different ways to create the image or create a Photoshop pattern for the grid. Some people like to create rows of alternating colors. I prefer to create a simple image in Photoshop as follows.

  • Create a blank canvas equal in height to your baseline unit. I typically make the entire canvas a square.
  • Set the background in the canvas to be transparent
  • Add a 1px line of color at the bottom. I like using a medium gray color, but any color will work.
  • Save the image as a transparent .png
  • Add the image as a repeating background image to your html or body element

I turn this baseline image on and off while developing depending on whether or not I’m working on the baseline grid.

When I see something has fallen off the grid I check the element in the Webkit Inspector (or Firebug, Dragonfly, or other) and look at the computed values for font-size, line-height, and top and bottom margins, paddings, and borders.

I fix whatever is off and work further down the page. It pays to have a calculator nearby too.

Imaginary line between bases on a baseball diamond

Summary

You may wonder if a baseline grid is worth it. It can be a lot of math and it does require paying attention to detail across a variety of different elements. It is worth it.

The first time you set one up and compare the page on the grid to the same page without a baseline grid you’ll immediately notice the difference and agree.

You’ll feel the rhythm of space and positive elements as they pull you down the page and you’ll enjoy how text and other elements aligns across columns, even as their font-size varies.

If you’ve never set a baseline grid I highly encourage giving one a try. If you have used them do you agree they’re worth it?

Wednesday, 28 September 2011

iCan't Internet

iCan't Internet

Android OS – Deciding If It Is the Right OS for You

Posted: 28 Sep 2011 12:01 AM PDT

Find out whether the Android OS is a good fit for you There are many Smart Phone users who have their own theory developed around the use of an Operating System inside their mobile devices. Nowadays...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]


Tuesday, 27 September 2011

iCan't Internet

iCan't Internet

5 Ways To Increase Revenue On Your Blog

Posted: 26 Sep 2011 11:05 PM PDT

Find out 5 interesting tips on how to increase revenue on your blog Many people start their Internet business, only then to give it up, because they do not start seeing the flavor of money. It is...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]


Monday, 26 September 2011

How To Use Structural Pseudo Classes and Pseudo Element Selectors | Van SEO Design

How To Use Structural Pseudo Classes and Pseudo Element Selectors | Van SEO Design

How To Use Structural Pseudo Classes and Pseudo Element Selectors

Posted: 26 Sep 2011 05:30 AM PDT

The last couple of weeks we’ve been looking at different types of css selectors. First we looked at the simple and attribute selectors and then we looked at combinators and some pseudo class selectors.

This week we’ll finish up with structural pseudo-classes and pseudo elements. I think you’ll find both have some practical applications for styling web pages.

Note: Once again a reminder that the numbers in parenthesis represent which level css the selector was introduced in.

Structure, Saint Jean Cap Ferrat, France

Structural Pseudo-Classes

Structural pseudo-classes were introduced as a way to target html elements based on information in the document tree that aren’t easily represented by simple selectors or combinators. Most were introduced in css3.

You may already be using a few of these. If you aren’t you likely find yourself wanting to target the elements they select. Without them we generally have to add a class or id to the element we’re targeting.

E:root (3) — matches an element E that’s the root of the document. In html this is always the html element.

 :root {background: blue;} html {background: blue;}

The lines of css above are functionally equivalent. Perhaps not the most useful structural pseudo-class, but the easiest to explain.

E:nth-child(n) (3) — matches an element E that’s the nth child of its parent.

Assuming we have a table with a large number of rows.

 tr:nth-child(4) {background: #ccc;}

The css above says to find the 4th row and give it a background color that’s a light gray.

A common use of the nth-child pseudo-class is coloring alternate rows of a table.

 tr:nth-child(2n+1) {background: #ccc;} tr:nth-child(2n) {background: #eee;}

2n+1 represents odd numbered rows and 2n represents even numbered rows. Special odd and even values can also be used.

 tr:nth-child(odd) {background: #ccc;} tr:nth-child(even) {background: #eee;}

You aren’t limited to 2 though. Any number can be used.

 tr:nth-child(10n+1) {background: #ccc;}

Here the 11th, 21st, 31st, etc rows would be given a light gray background.

E:nth-last-child(n) (3) — matches an element E that’s the nth child of its parent, counting from the last child.

nth-last child works similarly to nth-child, except that the count starts from the last element in the list as opposed to the first. Again assuming a table with a large number of rows.

 tr:nth-last-child(1) {background: #ccc;}

Here the last row is the one to get the background color.

 tr:nth-last-child(4) {background: #ccc;}

Here the 4th last row gets the background color.

All the same values can be used

 tr:nth-last-child(2n+1) {background: #ccc;} tr:nth-last-child(2n) {background: #eee;} 
 tr:nth-last-child(odd) {background: #ccc;} tr:nth-last-child(even) {background: #eee;}

Both of the above would result in all odd and even rows getting different background colors. While you probably wouldn’t use nth-last-child for these, you could.

More typical use of nth-last-child is to target a specific or few specific items at the end of the list.

Numbers

:nth-of-type and :nth-last-of-type

The rest of the structural pseudo-classes are plays on the above two so if you understand how the above two work all you’ll need to understand the rest is how they differ.

E:nth-of-type(n) (3) — matches an element E that’s the nth sibling of its type

E:nth-last-of-type(n) (3) — matches an element E that’s the nth sibling of its type, counting from the last one

nth-of-type() and nth-last-of-type() work the same way nth-child() and nth-last-child() work, the difference being that what we’re targeting has to be a specific type of element as opposed to any child element.

You’d use the of-type classes when the parent of the element you’re targeting has different types of elements as children.

 <div>  <p></p> < img src="" alt="" / >  <p></p>   <ul>     <li></li>     <li></li>   </ul>  <p></p> </div> 
 p:nth-of-type(2) {font-size: 1.2em;} p:nth-last-of-type(1) {font-size: 1.2em;}

I’m sure you can figure out which paragraphs are targeted by the css above Again we’re using the of-type pseudo-classes because the elements inside the div are of mixed type.

:first-child and :last-child

These two pseudo-classes are shortcuts for nth-child(1) and nth-last-child(1). Like the two nth classes these require all the children to be of the same type.

E:first-child (2) — matches an element E that’s the first child of its parent

E:last-child (3) — matches an element E that’s the last child of its parent

A common use is in navigation bars when you want to style either the first, last or both menu items in the list differently than those in the middle of the bar.

Often I’ll add a border between menu items in navigation bars by setting either a left or right border. However that necessitates either adding a border to one end or removing it from the other. li:last-child and li:first-child come in handy for this.

:first-of-type and :last-of-type

These two elements are the functional equivalent of nth-of-type(1) and nth-last-of-type(1). They work the same as first-child and last-child except that they only target an element of a specific type.

E:first-of-type (3) — matches an element E that’s first sibling of its type.

E:last-of-type (3) — matches an element E that’s last sibling of its type.

Styling the first of last paragraph inside a div, article, or section might be a common use for the first and last of-type classes.

only-child and only-of-type

These next two elements are again similar except that they only target elements with a single child.

E:only-child (3) — matches an element E that’s the only child of its parent.

E:only-of-type (3) — matches an element E that’s the only sibling of its type.

With only-child you’d have only the one element inside the parent. With only-of-type you could have multiple children, but only the one type of element you’re targeting.

:empty

E:empty (3) — matches an element E that has no children (including text nodes)

:empty is a way to target empty tags. For example it wouldn’t match

 <p>Some text</p>

It would match

 <p></p>

Ideally you won’t leave any empty tags in your html so I’m not sure how useful this one is. Perhaps as a way to find and remove any empty tags you’ve accidentally left behind.

Pseudo Elements

There are some things we want to style in practice, but have no way at all to select based on information in the document tree.

Normally to select these items we’d have to add an element like a span and also give it some kind of class. Pseudo elements are a way to target these items.

We have 4 pseudo elements we can target

::first-line pseudo element

E::first-line (1) — matches the first formatted line of an element E.

 p:first-line {tex-transform: uppercase;}

The above changes the first line in all paragraphs to uppercase. Of course the first line of text can be somewhat dynamic if you’ve created a flexible layout and the browser width is varied.

::first-letter pseudo element

E::first-letter (1) — matches the first formatted letter of an element E.

Similar to first-line, first-letter styles only the first letter differently. An obvious use is to create drop caps.

 <p class="intro">This is the first paragraph</p> 
 p.intro::first-letter {font-size:4em; font-weight:bold; color: #f00; float:left;}

::before and ::after pseudo elements

E::before (2) — matches generated content before an element E.

E::after (2) — matches generated content after an element E.

The ::before and ::after pseudo elements are ways to add content before or after an element. Common uses are to add a quote image before and after blockquotes or to use your own special bullet in front of a list.

 <blockquote></blockquote> 
 blockquote::before {content: "&lsquo;"} blockquote::after {content: "&rsquo;"}

The above adds a single left quotation mark before the blockquote and a single right quotation mark after it.

While there will be times when you don’t specifically want to add any content you still need to include the content property with ::before and ::after. Leaving it blank is allowed, but it must be included.

 blockquote::before {content: "";}

You can do quite a lot with these two pseudo elements as seen in the video above or this demo for building a css solar system.

Double or Single Colon?

One note about all 4 pseudo elements is their use of a double colon out front.

This is technically the correct syntax however browsers that accept pseudo elements also allow a single colon and the double colon doesn’t work in all browsers.

For practical purposes you’re better off using the single colon for now so:

  • :first-letter
  • :last-letter
  • :before
  • :after

Browser Support

Generally browser support for pseudo elements is better than the structural pseudo classes, though it varies some. The elements will work as far back as IE8 and with first-letter and first-line support goes back to IE5.5. Yep, you read that right.

Most of the structural pseudo classes don’t start working until IE9, though support for first-child goes back to IE6.

Summary

Like the other selectors we’ve covered you may have already used some of these in practice, while others may be completely new to you.

You’ll find more support for the pseudo elements than the structural pseudo classes, but you can likely find practical uses for most everything mentioned here.

I hope this walk through of css selectors has been useful and brought to light a few selectors you may not use or be familiar with. I know that’s been the case for me and hopefully these posts will serve as a reminder for both of our development practice.

iCan't Internet

iCan't Internet

Installing WordPress – Understanding the Nuances

Posted: 25 Sep 2011 11:01 PM PDT

A guide to getting WordPress installed One of the main characteristics of installing WordPress is the ease and convenience with which it can be done. There is a step by step guideline provided that...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]


Subscribe to: Posts (Atom)