Bulletproof Web Design Chapter 1

Chapter 1 of "Bulletproof Web Design 2nd edition" by Dan Cederholm.

In chapter 1 it talks about the importance of using keyword text size over using a font size but I am not going to get into that because this book is a Great one to have in your library. What I am going to show you are the steps I followed in this book and the results. I started off by using the code provided in the book for the CSS side:





body {
font-size: x-small; /* for IE5/Win */
voice-family: "\"}\""; /* tricking IE5/Win to think the declaration is over */
voice-family:inherit;
font-size: small; /*for compliant browsers */
}

html>body { /* Opera */
font-size: small;
}

The results from my HTML side looked something like this:



PERCENTAGES

Later in the book it goes through percentages. The percentages are calculated by the browser on what size you set your body text at. For this example we set the body text at small so if we set our H1 tag at 150% it will be much larger than the regular type but if we set it at 85% it will be much smaller than the body text. Take a look at the code and example:

code added -

h1 {
font-size: 150%;
}

.note {
font-size: 85%;
}


Screen shot of what it should look like:



From here we went on as added a DIV to our HTML and gave it an ID of Container. The container will house the content and will be set at 95%.

CSS:

#container {
font-size: 95%;
}

There should not be a big difference but having your content in a DIV is always a good idea.

FLEXIBLE TEXT USING EMS

This is an alternative to keywords and offers the same advantage for IE/Win. This is a very cool way to set up a website to function the way you want. EM is a typography term that sets the default text to 16px or 1em, but with percentages there is a way around it. Making a site with the EM method will allow your user to view the page in the text size they are comfortable looking at.

Here is what I came up with while messing around.

CSS used for the site:

{
margin: 0;
}
html, body {
height: 100%;
}
body {
font-size: 62.5%;
background-color: #999;
} /* gives the base of 10px */
h1 {
font-size: 2em;
} /* 20px */
p {
font-size: 1.2em;
color: #000;
} /* 12px */
.note {
font-size: 1em;
} /* 10px */
#container {
background-color: #9F9;
width: 800px;
position: relative;
margin: auto;
padding: 20px;
top: -15px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both;
width: 800px;
margin: auto;
}

What the site looks like:



And the HTML used to get the final result:



or HERE

*** CSS FOR CLASS ***

@charset "UTF-8";
/* CSS Document */

/* EM CLASS WORK */

body {
font-size: 62.5% /* gives us a base of 10px */
}
h1 {
font-size: 2em; /* 20px */
}
h2 {
font-size: 1.8em; /* 18px */
}
p {
font-size: 1.2em; /* 12px */
}
#sidebar {
font-size: 1em; /* 10px */
}
p abbr {
font-size: 2.4em; /* 24px */
}