Typography and the web have had their battles from the very start – it almost seems that web is no-typography. NOT TRUE!!! Here are some CSS tips at getting your pages to conform and tame your type.
In this lesson we will create a simple two-column web page using CSS and look closely at controlling the typography as well as some graphical elements.We will work with em’s for the font size to have an accessible site that scales based on the users browsers settings.
What are em’s?
An em is a unit of measurement in the field of typography, equal to the pt size of the current font. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size.
So, 1 em in a 16 pt typeface is 16 points.
WORK ON PAGE STRUCTURE FIRST
Create the 2-Col Layout and then add the CSS for typography.
The page structure will use the following DIV’s
- #wrapper
- #mainContent
- #sidebar
- #footer
- First start with a rule that sets the margins and padding to 0.* {
margin: 0;
padding: 0;
}Just be sure to set all margins and padding for items later on.
- The bane of the web has always been how different browsers and platforms display things differently – we still cannot escape this annoying fact. For Internet Explorer users we have to initialize the base/default size (font) of your page to a value so that MSIE will not screw up when you size child elements with a proportional
value i.e., in “em”s. If we do not state the “100%” we may get different interpretations in different browsers.html {
font-size: 100%;
} - Add a little padding to the body as well as set the font and the size to be used for the page.body {
font-family: “Lucida Grande CY”, Arial, “Helvetica CY”, sans-serif;
font-size: 62.5%;
padding: 40px;
}NOTE: Why 62.5%?
By using a percentage value the font size is a relative value to what the default browser font is – which is normally 16pts. 62.5% of 16 is…10! So the size of our font in most browsers is now 10pts but it is still a relative value which is more accesible for other devices/computers. Also think that 1em from this point on is going to equal this size. - Let’s add to the HTML structure formatting of the page and add a BLOCKQUOTE tag for the “pull-quote”, then add a CITE (citation) tag around the “Name Surname”. It should look like:<blockquote>
<p>This is where the pull-quote content goes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><cite>Name Surname</cite></p>
</blockquote> - Now let’s deal with the structure of the page. Assign a wrapper DIV around the contents of the page and set the width to a fixed width and center it on the page using AUTO margin values for left and right.#wrapper {
width: 620px;
margin-right: auto;
margin-left: auto;
}
- Assign an ID of mainContent around the main conntent of the page (all the text up until the H2 tag). For the CSS control the width of the column and apply a float of left.#mainContent {
width: 400px;
float: left;
}
- For the remaining text assign an ID of sidebar – also control the width and float left.#sidebar {
float: left;
width: 180px;
}
- Now things should be shaping up – however we might be seeing some weird displays going on with our wrapper area. When using floated content it is good to CLEAR the floats so as to not affect following content but also because most browsers may collapse the wrapper as it may be considered to have no height as there is no direct content in the wrapper area. #footer {
float:none;
clear:both;
}
Style the Headings
Before you begin to style the headings, the baslines line-height needs to be decided. For the mainContent are we will use 20 pixels (or 2ems), which will create an open leading for web type copy (remember our font size at 1 em is at the default size which was determined earlier at 10pts > pixels and points roughly take up the same amount of space so we are going to create our line-height at twice the current font size – confused yet????)
Let’s look at the following code block:
REMEMBER WE ARE GOING FOR A LINE HEIGHT OF 20 pixels.
/* sets the font size for the main heading to twice the default size (default is 10 so now it’s twice that size = 20 points), if the line-height is 1em and the margin-bottom is 1em it equals out to 1 line space each. */
h1 {
font-size: 2.0em;
line-height: 1em;
margin-bottom: 1em;
}
/* sets the size of our H2 to 1.5 times the default (equals 15 points) – to keep order in your basleine grid take the target line height (2.0ems) and divide it by the font-size(1.5) and you get a result of 1.333333333 and that is what you use for the line height and margins
h2 {
font-size: 1.5em;
line-height: 1.33333333em;
margin-top: 1.33333333em;
margin-bottom: 1.33333333em;
}
/*Similarly to figure out the appropriate margins take the line-height and divide by the font size (2.0/1.3=1.5384615)
h3 {
font-size: 1.3em;
line-height: 1.5384615em;
margin-top: 1.5384615em;
}
Now if the overall height taken up by an element and its margins is within the rhythmic boundaries of the baseline grid, you can adjust the settings. For the level-two heading in the previous example – the equal margin places the heading directly between the previous text and the following text, making it NOT visually obvious as to which content the heading belongs to. By moving half of the bottom margin to the top value, the heading is repositioned moving downwards slightly but the overall page rhythm is maintained.
Change the code to:
h2 {
font-size: 1.5em;
line-height: 1.33333333em;
margin-top: 2em;
margin-bottom: 0.6666666em;
}
Paragraphs and pull-quotes
Hopefully the logic is starting to set in. So for the paragraph we will set the font-size to 1.2ems (which is….12 points -remember the default is 10). Line-height and margin values are 2.0/1.2 = 1.66666666!!
p {
font-size: 1.2em;
line-height: 1.66666666em;
margin-bottom: 1.6666666em;
}
NOTE : normally you do not need to set the margin-top for the H1 tag as it is usually on the top of the page and for the paragraph because the each item has a margin-bottom already defined.
Styling the pull-quote takes some thinking. For the BLOCKQUOTE the default font-size is inherited, which is?……..1.0em (10points). By adding 2em of padding to the top and bottom and the margin-bottom, the spacing around the blockquote and within it maintins the vertical rhythm of the page. Add a background and left border for visual effect.
blockquote {
background-color: #ccc;
margin-bottom: 2em;
line-height: 2px;
padding: 2em 2em;
border-left: 2em solid #999999;
}
Next we have to take care of settling the paragraphs inside the BLOCKQUOTE area.Remove the default margin-bottom value, increase the font-size and the line-height as a result.
blockquote p {
font-size: 1.3em;
line-height: 1.5384615em;
margin-bottom: 0px;
}
Styling the Sidebar
To override the original settings created previously, a reset rule is added :
#sidebar * {
font-size: 62.5%;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
NOTE : for some complex sites, you may have to reset each element using a descendant selector : #sidebar h1, #sidebar h2, etc.
The sidebar area may look like this isn’t going to work as the text may appear at a very small font size – not to worry we will fix that with the next couple of rules.
For the sidebar we will set the vertical rhythm to 18px (1.8em). For the h1 we will set the size to 1.4ems and the paragraph to 1.1. We use the same technique as above to figure out the margins. 1.8/1.4 = 1.2857142 & 1.8/1.1=1.6363636.
#sidebar h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.9285713em;
margin-bottom: 0.6428571em;
}
#sidebar p {
font-size: 1.1em;
line-height: 1.6363636em;
margin-bottom: 1.6363636em;
}
The sidebar should lineup with the first line of text in the mainContent div to make it more visually pleasing. This can be done by adding a padding-top to the sidebar rule, working out how many pixels are required, and then figuring out the equal amount in ems. In this case try 1.3ems.
NOTE : Internet Explorer and some older browsers may also require a few tricks and reworkings here and there to be abloe to display properly.
RESOURCES
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/