We can use this concept to help a viewer look at our designs and process the information we want them to when we want them to. It also helps our viewer find the information they want efficiently.

Visual Hierarchy sets up the flow of the page so it can be easily read and interpreted. This is really why visual hierarchy is so important, because people typically have very limited attention spans!

Some of the things we can do to help create a visual hierarchy are to manipulate:

• size
• color
• shape
• contrast or weight
• position
• whitespace or spacing
• font-type or ornamentation

In this Part 1 video we will take a look at how spacing and size can really help a pages visual hierarchy.

What I’ve done here is to create a basic layout with some simple styles to show how each of these sizing options will effect your design.

The main difference between the sizing options happens when the font is resized by the browser. There are 3 main types of Browser resizing:

1. default font size
2. “zooms” all sizes on page – acts like an optical zoom
3. “zooms” only font size

There is a zoom option to be aware of and happens by using accessibility screen zoom tools ( more on this in part 3).  This one has no real effect on unit of measurement choice since it scales the entire screen. It is not constrained by the browser. An example being like on macs hit option and command then + or -

The main thing to note through this tutorial is how things are resized and what is being resized when looking at the differences between unit choice

Default Font Size Change

With absolute sizing (px and pt)

If everything is sized absolutely then changing the default font size does nothing, since you have already set the size for the page.

If you have the font size set anywhere on the page using an Absolute measurement and later use em or % it will behave the same way and NOT resize your font because it is using the absolute measurement set in higher level.

What that means is if you have a wrapping div set to an absolute font size like 16pt, then in another div inside that you set the size option to 2em, it will base that measurement off of the 16px font set in its parent div NOT anything set by the browser.

With Relative Sizing (em and %)

As long as everything is relatively sized, when you increase the default font size in the browser the text will scale accordingly. This acts the same between percents and em. The difference between percents and em occurs when looking at the layout.

Em – Because this unit is based on the font size, if everything is set using em for measurement then when the default font size is increased so is the margin, padding, div size, everything in the layout that has an em set. This is nice because it keeps the proportions of margins, text, and everything the same but if the size is increased to much you can run into trouble with your design being pushed off the screen and needing to scroll left/right and up/down.

Percents – because percents for layout are based on the browser size there is no effect on width and margins of your layout elements. Only the text is resized because the font size is based on the font setting not the browser size.

Zooming all sizes on the page.

Like I said earlier this acts like an optical zoom except that it is constrained by the browser size.
Whether your size is absolute or relative does not matter in this case. Everything is scale up accordingly. This is nice because all layout and spacing is kept propotional no matter what your sizing unit choice. This will eventually run into the same problem as Em and default font resizing because you will get so large it cant fit in the browser area, and you will have to scroll.

The only one that acts different is the percent option. When percent is used in the layout, it will NOT increase the size of the layout (because it is based on the browser size) but it will still increase the other elements like images and text.

Zooming Text Only

In the case of this type of zoom, percents and absolute measurements act the same. Because you are only increasing the font size, when percents, px, and pt are used for layout measurements they stay the same. The text however does increase. This is NOT like changing the default browser size. It will effect absolute sized units.
(show example of absolute and percent in firefox)

Em however will increase both the text and the layout. (again this is because the em is based on the font size). It is very similar to increasing all sizes on the page. This is nice because it preserves the ratio between margins, padding, and text. However if you have say a picture sized in pixels placed on the page, that will not increase in size. This type of zoom only effects text and text based measurements. (show in firefox)

Other things to note

When you resize the browser, things will scale differently if set by purely by percent. Because layout’s percent sizing is based on the size of what is containing it, if there is nothing but the browser as you shrink the browser the content inside also shrinks. However text and images will not shrink accordingly, so eventually your design will break or become so squished it is unreadable.

Because px, pt, and em all are basing their measurement on something other than browser size, when you shrink the browser you will just have to scroll, same as if you zoomed in to far.

Well that’s about it for this episode. In part 3 we’ll look at standards for font, accessibility, and mixing sizes. As always if you have questions or anything feel free to comment below, or send me an email through my contact form. Hope you learned something.

All those questions (well, except the first one) come down to answering another question. What are you designing for? Your target media and audience should decide everything about how you design. In this part 1 we will start by take a look at the different units. If you already know the different units you may want to skip to part 2. So, without further ado let’s begin.

All the units are used for sizing and measurement. The are broken into two types: Absolute and Relative.

Absolute Sizing

So as the word absolute hints at, the size is fixed. It will not scale up or down based on outside input, like a browser’s enlarge text option.

px - “Pixels” –  A fixed font size. A “pixel” represents 1 pixel on your computer screen (the smallest division of the screen available). So for higher screen resolutions there are more “pixels” available in a given space, therefore the object appears smaller. It differs from “points” in that it is meant to be read on the computer screen.

pt - “Points” – Like “pixels”, “points” are a fixed font size. The “point” however is more of a print media sizing. A single “point” represents 1/72 of an inch.

Relative Sizing

Relative Sizing means the unit is a scale able measurement commonly used for web interfaces.

% – “Percents” – A percent is a Relative measurement. It  is calculated relevant to the current size setting for an element. Say you use a 10 pt font. A setting of 100% would equal 10 pt font. Where as a setting of 200% would equal 20 pt font. However when talking about layout if a column width is 1000 px then 100% would equal 1000 px and 50% would equal 500 px. We’ll go into more of the difference in part 2.

em - “M” (yes, its actually pronounced like the letter) – Em is similar to percents in that is a relative measurement. The difference lies in that instead of being calculated relevant to the current size of what its defining, it is calculated relevant to the current font size. So if the font size setting is set at 10 pt font. A size of 1 em would equal 10pt font. Where as a size of 2 em would equal 20 pt font. This is important when looking at layout sizing more than when looking at font sizing, but we’ll cover that in part 2.

What does this really mean?

The difference really between Relative Sizing and Absolute Sizing is when you adjust the size in the browser or in wrapping elements. If you increase the browser’s font size, Relative Sized Objects will enlarge and Absolute Sized Objects will not.

As you can see in the above example, when the font size is increased from 100% to 150% in the wrapping div the Relative Sized Text (% and em) increases in size. Where as the Absolute Sized Text stayed the same size. We’ll look more at the usefulness of this little trick in part 3.

A little more on Relative Sizing

Relative sizing does an interesting thing that you must be careful of when designing. When you nest elements with sizing changes inside each other, they will inherit the changes of every level above them. (When I say nest I mean for example, when you have a div inside of another div) Because they inherit the changes of every level above them you get a compounded sizing change. Check out the examples below:

As you can see in the above example, each div has the font-size set to 200% (except the first one). Because each one is getting applied over and over, by the time we get to the fourth div we have an actual font-size of 800%! Something to definitely be aware of when designing.

Final word

Hopefully this helped explain the difference in sizing options. In part 2 we will look more at differences to each in relation to text or layout. If you have any questions or comments go ahead and leave a comment below, or send me an email through my contact form.

Now, on to part 2!

This blog is devoted to creating video tutorials and informative posts on design. I will be hitting everything from basic “how to use the pen tool in illustrator” type tutorials to general “this is what hierarchy in design can do for you” to “What the heck is px, pt, %, and em, and what do they have to do with me?”

Pretty much this is a blog devoted to giving information on design on a more basic and fundamental level. If your looking for advanced tutorials on how to make a bird come diving in and transform into a person in flash, I apologize you won’t find that here.

Also please bear with me as I update this sites design away from a standard template and make it more my own.  But I figured I would start actually getting usable content out to you and begin work on the whole reason I created this site!

If you have any ideas for topics or any questions on design concepts or mechanics please feel free to submit those in the form to the right. If you find this information useful please donate to help keep everything going. Thanks and hope you enjoy!