More than just a font, typographic art has become a movement on the online world. From creation of new lettering to the use of those fonts on website design to more clearly altered context or providing visual appeal, you can’t get away from it. CSS makes it easier than ever to manipulate and utilize typography for your web designs.

Tools to use CSS typography pop up every so often, but not all of them are as great as others. Here is a collection of excellent typography-related, CSS-compatible applications for you to use in your own work.

1. Font Tester

Font Tester is a useful little tool that will give you the ability to directly compare different fonts without having to go page to page. Instead, it puts them beside each other to see all at once. You get a nice, clear view that focuses well on details. This is one of the better tools for this purpose, and it is easy (and free) to use.

2. Typograph

Drag-and-drop applications, especially those with a simple interface for users, are fantastic. This app uses that design, allowing you to put everything on a single grid to determine web layout. It tries hard to be an all-in-one program, so you can limit the other tools you have to use.

There are some nice calculators and measurements included, which is fantastic. But otherwise, there are no frills here.

3. Typographic Grid

If you don’t like making your own CSS grids, you can usually find more than just a few available on the web premade. This one was done by designer Chris Coyier set to a vertical rhythm and made to give a basic platform for beginners. It won’t be much good for advanced users who want to create a more complex CSS font.

But it is perfect for something simple, especially if you can make your own grid but just don’t feel like doing it. It is even better if you can’t and will give you a starting point for making your own in the future.

4. Serif Font Search

Font searches are rare, at least when it comes to finding one that is of any real use. This search allows you to name the characteristics of a font, and it will do a search for anything that most closely matches. It is a great way of narrowing down your typography needs and finding something you really want.

Think of it as the perfect place to start if you only sort of know what you are wanting in a font but you would like to see examples that embody those needs.

5. CSS-Typeset Matrix

You can better come up with measurements using this tool. The matrix provides you with the ability to set your parameters and then do measurements based on pixels instead of more traditional methods. This might be helpful if you are planning to integrate the CSS typography into a previously formed website or design.

6. PXtoEM

The standard units of measurement for CSS typography are PX, %, PT or EM. But you can’t always start where you want. So if you are looking for a good conversion tool, this one will cleanly convert them to any format you need. It’s great if you want to have the same typography in more than one unit of measurement for later use or samples.

7. Baseline

The best part about this application is the tool that allows you to see some of the latest experimentation done with the still-new HTML5. Working off of a baseline grid, this is a great app because of the CSS reset as well as many other features that have made it one of the more popular tools on the web.

8. Typetester

You can use this tool to basically look at and play around with fonts you already have laying around on your computer or flash drive. Just upload them onto the app and change the size, the spacing, the line grid and more. It is easy to use, and while it’s limited in comparison to some software, it is nice for light tweaking.

9. TypeNavigator

With a preset questionnaire of sorts, you can find any font name by answering queries about the look, with specific details in mind.

Once it narrows down the list, you can usually get pretty good results. It also gives a list of possibilities, which is perfect if you are interested in seeing similar fonts you might prefer.

10. WhatTheFont

A nice, easy-to-use tool that you will be sure to love, this is a photo-recognition application. You take a picture of any font you like, then upload it into the app.

It will go through a list of cataloged letters to give you the name. This is fun to use when you are out and looking at things like posters and want to remember the font used for future reference.

Conclusion

CSS typography is all the rage and growing in popularity by the day. What are some of your favorite tools that can be used to this end? Let us know in the comments.

And this one:

These awesome logos (along with tons of others. See: the post thumbnail) are being created in pure CSS over at ECSSpert. So far there are designs for Twitter, Adidas, Adobe, an awesome animated Atari, and well… just go look for yourselves.

Speaking of increible CSS achievements, check out these 3 links to be in even further awe:

Apple iOS Icons in CSS

iPhone in CSS

Opera Logo in CSS

Note: you might want to view these using Safari or Chrome, though Firefox is OK, too. Don’t even bother if you are using IE. Sorry, IE peeps (though you were probably just going to go look at the Windows icon and leave, anyway).

Got any others?

Post them in the comments so everyone can see. No use in keeping incredible stuff like this under wraps!

Resets & Browser Inconsistencies

It’s not big secret that not all browsers are created equal. Internet Explorer may show something completely different than Mozilla Firefox. Mozilla Firefox may show something completely different to Apple Safari.

We also don’t know what the default margin, padding, font-size, etc. are for these browsers. To handle these differences, many CSS developers like to level the playing field by creating a CSS Reset. In the early stages, we would have just used a global reset, which would look like the following:

* { margin: 0; padding: 0; }

It soon became clear that resetting only the margin & padding wasn’t really enough. Developers started to created a CSS Reset.  Eric Meyer created a widely accepted and comprehensive set of reset rules.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need ‘cellspacing=”0″‘ in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: “”;

}

blockquote, q {

quotes: “” “”;

}

This has become the most popular CSS reset available today. It is also important to note that some elements have been deliberately excluded from the list, including Input, Button and HR.

User ‘Overflow: Hidden’ to clear floats

I always used to use a clearing div to clear any floating divs I was using. This would always look like the following:

.clear { clear:both; }
<div>
<div></div>
<div></div>
<div></div>
</div>

Although this does work perfectly fine, it can make your code look messy. Instead you can use overflow: hidden on your container div tag. So you could use the following:

#contain { overflow: hidden; }
<div>
<div></div>
<div></div>
</div>

Grouping elements together

One of the rules of keeping good coding is to keep your code simple, clean and easy to read. This technique helps with readability as well as performance. In the early days, I used to do two or three elements that are doing the same thing, until I found out you can group these elements together.

So instead of writing:

h1 { color: #444; }
h2{ color: #444; }

You can group these elements like so:

h1, h2 { color:#444; }

Use CSS Shorthand

Using CSS Shorthand has two beneficial aspects to it, the first one being less code. The second is improving the performance. So instead of writing the following:

body {
font-family: verdana;
font-size: .7em;
line-height: 1.4em;
margin-bottom: 10px;
margin-top: 10px;
}

You can write the same thing with less lines and less coding:

body {
font: normal .7em/1.4em verdana,;
margin: 10px 0;
}

Box Model – Margin, Padding & Borders

The box model is the basis for all layouts. If you use CSS, you need to take the box model into account. It governs the dimensions & spacing of the elements on a page.

All box models have five spacing properties: width, height, padding, margin and border. Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

Using the example above, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
margin:30px;
border:30px solid yellow;
padding:30px;
width:80px;
height:80px;
}

Conditional Comments

IE is one of the worst browsers to develop CSS for, while most browsers show the same thing about 80% of the time, IE will not. Therefore you will be doing a lot of IE Hacks to make sure your website shows the same in all browsers.

This can take a lot of CSS to accomplish, making your main style sheet larger than it really needs to be. So the easiest way to accomplish this is to use the HTML conditional comments to detect IE browsers and display the CSS.:

<!–[if IE]>
Target All versions of IE
<![endif]–>

Using conditional comments to target IE and cut out your hacks will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

That’s it

That’s it for now. I am always learning new stuff, and with CSS3 making its way through, there will more than likely be another tutorial on the way.

The Final Result

If you follow along with the tutorial, you will end up with the following result.

Setting up the files

Start out by creating a new folder on your computer in which we will put all of the site files. I named it ModerndesignStudio. Create another folder in your working folder you just created and call it images, it will contain all the images of the site. Next open up your favorite code editor (I use Dreamweaver) and create a new HTML file titled index.html in the root of the folder, this will be our main page template. Now create a new css file, and name it style.css.

Open up your index.html file. At the top of your document inside the head tags, link to your style sheet (style.css) so that it’s ready to go. You can use the code below.

<link href="style.css" rel="stylesheet" type="text/css" />

So your code will looks like this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modern Design Studio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

Setting up the html structure

Now we will set the structure of our html file. I’m going to set 3 sections (header, content, footer) like I did here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</body>
</html>

Slicing the background

Our psd file includes a lot of textures and splashes so I’m going to slice the psd block by block so we will not loose these beautiful designs. Also, I’m going to add a div in each section which I’ll call container to align our web page contents.

<body>
<div id="header">
  <div id="container">

  </div>
</div>
<div id="content">
  <div id="container">

  </div>
</div>
<div id="footer">
  <div id="container">

  </div>
</div>
</body>

Now let’s begin with opening the psd layout in Photoshop, hide everything except the “Background” and “Background texture”.

Now take the Slice Tool (C), select the background, go to File, Save for Web & Devices (Alt + Shift + Ctrl + S) and change the image’s width to 1600px. Then save it under the name of background.jpg in your images folder.

Coding the template’s body background

Now that we have our background image sliced out of the Photoshop document, we can begin coding. Open up your CSS file (style.css) in your source code editor, and then use the following code.

* {
   margin: 0px;
   padding: 0px;
}
body
{
   background:url(images/background.jpg);
}
#container
{
   margin: auto;
   width: 960px;
}

Let’s go over the styles in more detail.
First, we reset all of our elements margins and paddings to 0 to avoid cross-browser inconsistencies. We do this with the * selector.
Next, we style the body element: we set background.jpg as it’s background property.
Finally, we style the #container margins to auto to center the layout, and set a fixed width of 960px.

Slicing the header

Go back to Photoshop and hide everything in the Header folder except the Header and Header texture layers, pick the slice tool and select the header section and save it for Web & Devices under the name of header.jpg in the images folder.

Coding the header’s background

In your css file add this code:

#header
{
	background:url(images/header.jpg);
	height:124px;
}

In this code I styled the header element. I set header.jpg as it’s background, and I set it’s height to 124px.

Slicing the logo/site name

Now hide all of the Header, Background, Header texture and the Background texture layers. With your slice tool select the logo and the slogan and save them like we did earlier under the name of logo.png.

Adding the logo to the html

Now switch back to your HTML document. Inside #header #container, create a new div with an ID of logo.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
   </div>
</div>

Now, let’s move over to the stylesheet. To style our #logo section elements. Here is the CSS code.

.logo
{
	margin-top:20px;
	border:none;
}

Coding the navigation

Still inside the #header #container, create a simple unordered list containing the navigation links. Here’s the code block for the navigation.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
   </div>
</div>

Styling the navigation

Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

#header li
{
	color:#959595;
	list-style:none;
	float:left;
	margin-right:20px;
	font-family:"Myriad Pro",arial;
	font-weight:bold;
	font-size:24px;
}
#header li a
{
	color:#959595;
	text-decoration:none;
	padding:10px;
}
#header ul
{
	float:right;
	margin-top:-40px;
}
#header li a:hover
{
	background:#202020;
	color:#d2d2d2;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
}

I added some styles to #header li such as the color (#959595), I removed the list style, changed the font family to Myriad Pro, the font weight to bold, the font size to 24px and floated the li elements without forgetting the marging right to make some space between li elements.
For the hover I used some CSS3 features like the border radius and I changed the background color to #202020.

Creating the featured box

Now we’ve finished with the header section, let’s head over to the content section.

Let’s add two new divs in this section, the first #featured (it will contain the featured section) and the other #paragraphs.

<div id="content">
  <div id="container">
      <div id="featured">

     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

In the psd file as we did before, select the slice tool and slice the featured box after hiding the more projects button and the little text then save it under the name of featured.jpg.

In your HTML file add this code to the featured div to add the more project link and some dummy text:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

In the PSD file I will take the more project button and duplicate it and reverse the Gradient Overlay, slice both of the more project buttons and slice them(The dimensions are about 124px x 60px) and save the button under png-8 format and name it button.png.

Now we’ve got the images ready let’s head over to the CSS file and add this code.

#featured
{
	background:url(images/featured.jpg) no-repeat;
	height:381px;
	margin-top:30px;
	margin-left:80px;
}
#featured a
{
	background:url(images/button.png);
	height:30px;
	width:124px;
	text-indent:-9999px;
	position:absolute;
	margin-top:330px;
	margin-left:180px;
}
#featured a:hover
{
	background-position:0px 30px;
}

I will begin with explaining #featured: I set it’s background to the featured image that we have sliced, then I positioned it with some margins. For the more projects link I set the background to button.png the height 30px so we could get the top button, I removed the text with text-indent and positioned it with the margins. Don’t forget to set the button’s position to absolute. Now to get a nice hover effect I changed the background position.

Now I’m going to add some style to the dummytext element:

.dummytext
{
	color:#d2d2d2;
	width:245px;
	margin-top:150px;
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:180%;
	margin-left:290px;
}
.dummytext span
{
	font-size:16px;
	color:#191919;
	font-weight:bold;
}

Creating the paragraphs

After we finished with the featured div let’s add some paragraphs to our content section.

<div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
</div>

So our content section will looks like this:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
     </div>
  </div>
</div>

After adding this code to your HTML go to your CSS file and add these styles to the paragraphs.

#paragraphs span
{
	font-family:"Myriad pro", Helvetica, sans-serif;
	font-size:22px;
	font-weight:600;
	letter-spacing:-2px;
}
#paragraphs
{
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	color:#191919;
	font-size:12px;
	margin-top:15px;
}
.paragraph
{
	width:250px;
	margin-left:15px;
	float:left;
}

Here is what you will end up with:

Slicing the footer

Now we finished with the header and te content sections and we will begin creating the footer section.

First, in your psd file hide every thing in the footer folder except the Footer and Footer texture layers, then slice the footer and save it as footer.jpg. You can take a look at this image below.

Then slice the Follow Us button and the birds image. Name the first one follow.png and the second bird.jpg.

Coding the footer

Our footer section will contain some text, a link to twitter and the birds image.

So here is the HTML code to add these blocks.

<div id="footer">
  <div id="container">
    <p>2010 © Fictional Design Studio. Design by Webdesignfan.</p>
    <a href="#">Follow us on Twitter</a>
    <img src="images/bird.jpg" />
  </div>
</div>

Now, we style our footer section using the following styles (go to your stylesheet and place this code block in there).

#footer
{
	background:url(images/footer.jpg);
	height:71px;
	margin-top:191px;
}
#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#959595;
	position:absolute;
	margin-top:30px;
}
#footer a
{
	background:url(images/follow.png);
	text-indent:-9999px;
	position:absolute;
	height:27px;
	width:124px;
	margin-left:730px;
	margin-top:30px;
}
#footer img
{
	float:right;
	margin-top:10px;
}

I used footer.jpg as the background of the footer, then I added some styles to the text included in the footer (The p element).

For the follow link I used the same techniques that we applyed with the more project link, then for the bird image I floated it to the right and used the margin.

And we’re all finished!

Live Demo // Download the source files (0,7 MB)

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Join SY0-201 online web designing course to learn how to cod a modern design studio from psd to html. Take advantage of the latest 70-680 tutorials and 642-902 study guide to learn different tips and techniques that you can use to design your web/blog page.

Content sliders are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn. If you are interested in implementing a content slider in your website please check our jQuery tutorials and plugins collection.

In this collection you will find 25 Excellent jQuery Slider Tutorials and Plugins that you can implement into your website.

To have your own slider, simply visit our store and buy one for your site today.

1. Create Beautiful jQuery slider tutorial

2. jQuery Plugin – Feature List

3. Create an Image Rotator with Description (CSS/jQuery)

4. Moving Boxes

5. Using the Wonderful jFlow Plugin

6. Creating a Slick Auto-Playing Featured Content Slider

7. Design An Elegant Featured Content Slider for WordPress

8. jQuery Slider plugin (Safari style)

9. Accessible News Slider

10. Animated JavaScript Accordion V2

11. jQuery UI 1.7 Slider from a Select Element

12. Easy Slider 1.7 – Numeric Navigation jQuery Slider

13. TabSwitch

14. AnythingSlider jQuery Plugin

15. A jQuery Twitter Ticker

16. SlideItMoo 1.1 – improved image slider

17. Making a Google Wave History Slider

18. bxSlider – jQuery content slider

19. Making A Slick Content Slider

20. SlideViewerPro 1.0

21. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

22. Create a Slick and Accessible Slideshow Using jQuery

23. Coda-Slider 2.0

24. jQuery Multimedia Portfolio

25. Slider Gallery

Thank you for reading this article on jQuery Sliders.

Pass VCP-410 exam on first try with test-king. Our certified 350-001 questions and answers plus live demo tests for 70-680 are extremely useful to pass your certification in single attempt.

PsPrint online printing services – affordable and high quality calendar printing you can trust!