CSS -How I Did It:Part 2

Posted on Sep 29th 2009 | 0comments

I agree to a certain extent that working on web typography is not as exciting as working on web graphics. Although, it’s also true that web typography cannot be neglected as it not only enhances website’s beauty but is also an essential part of communication and user interaction.

Web typography involves readability, accessibility, usability, and brandability. Hence, it is necessary to spend a considerable amount of time on web typography so as to take care of each of the above mentioned features. Remember that it is essential to have a good typography so that it can blend perfectly with the overall theme of the website.

I decided to have a separate stylesheet for dealing with web typography on my blog. I began with defining rules for headings and paragraph on my blog.

 
h1 {
	position:relative;
	margin-top:10px;
	font-family:"Microsoft Sans Serif";
	font-size: 30px;
	color:#2B547E;
	line-height:30px;
	letter-spacing:2px;
	font-weight: bold;
	text-decoration:none;
	text-align:left;
	padding-left:20px;
}

h2 {
	float:left;
	color:#C60;
	font-family: Gill Sans, Verdana;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
}

p {
	position:relative;
	font-family: “Lucida Grande”, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 24px;
	text-align:justify;
}

It is important to maintain the hierarchy so that users can recognize the most important elements of the page. Hence, I defined rules for h1, h2 and p in my stylesheet so as to be consistent throughout the blog.

I have used pixels for defining my font size as most browsers now accommodate font sizes set in pixels when zooming in and out. Moreover, I feel more comfortable working with pixels than ems. However, if you like working with ems , then this website can help you with conversion calculations.

Next, I defined typography for content summary, read more link , comment count and external links on my home page. Once again, my focus was on maintaining the hierarchy and spacing on the page.

 
.tdsummary {
	position:relative;
	width:400px;
	height:auto;
	font-family:"Trebuchet MS";
	font-size: 14px;
	font-style:italic;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 20px;
	text-align:left;
	padding-left:30px;
	margin-top:0px;
	
}

.continue {
	position:relative;
	width:300px;
	color:#C60;
	font-family: Gill Sans, Verdana;
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	padding-top:30px;
	
}

.commentcount {
	position:relative;
	background:url(../img/bubble3.png) no-repeat;
	width:50px;
	height:50px;
	font-size:20px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	padding-top:10px;
	padding-bottom:20px;
	padding-right:50px;
}

.contentlink {
	color:#C60;
	font-weight:bold;
	text-decoration:underline;
	
}

Finally, I defined rules for displaying date on my home page.

.shortdate {
	background:url(../img/date5.png) no-repeat;
	width:80px;
	height:80px;
	margin-top:30px;
	text-align:center;
}

.month {
	font-family:"Times New Roman", Times, serif;
	font-size:18px;
	font-weight:800;
	text-align:center;
	color:#488AC7;
	text-transform:uppercase;
	margin-top:10px;
	
}

.newdate {
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	color:#000000;
	
}

This is how I defined typography for my blog. You will always have to experiment with font size, spacing, color, line height and letter spacing until you get the best typography according to readability, accessibility, usability, and brandability.

Finally, read this if you still believe typography is not an important part of web design.

Share