Loading ...
CSS & Typography – Tips and Examples
The definition of typography is roughly said “the art of designing with fonts”. Typography is how fonts are used in a newspaper, a magazine, a website or book to give readers the content in a good-looking way.
Did you ever look in a traditional type of media like a newspaper and saw all those different kind of fonts, sizes and usages of text? That is exactly what typography is all about: finding the right way to display the right kind of text in the right place.
CSS & Typography
In new types of media this form of design hasn’t been forgotten. Actually, it is used more often and the use of fonts and sizes gained more attention over the years. Today we will discuss the use of typography combined with CSS.
The possibilities of typography in today’s web-world aren’t what they could be, but it is still possible to create something nice with the tools we have been given. The tools we will use are the websafe fonts and the markup language CSS.
Titles & Typography
Titles or headings are always one of the most important “attention” areas of an article. You want people to know what your article is about and with typography you can really let your title stand out.
Think about it, why do you read a newspaper article? Or you are interested in the content, Or you got interested by the title. Newspaper editors called the title numerous times ‘the most imporant part of the whole article’.
But what makes a great heading? A title is always bigger, bolder and always stands out from the other content. It grabs the attention.
Below are a couple examples of what could make a great heading and the CSS codes are included so you can use it on your own blog.
Typography examples: Headings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
h2{
font-family: georgia,serif;
color: #780101;
font-size: 4em;
letter-spacing: -2pt;
word-spacing: 4pt;
font-weight:normal;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
h2{
font-family: georgia,serif;
color: #333333;
font-size: 3.5em;
font-weight: bold;
font-style: italic;
letter-spacing: -2pt;
word-spacing: 3pt;
line-height: 0.9;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
h2{
font-family: arial,sans-serif;
color: #550080;
font-size: 35px;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: -2.4pt;
word-spacing: 3pt;
line-height: 1.2;
}
Paragraphs & Typography
Paragraphs are a part of webdesign most people don’t think it’s an important design-aspect. But in fact it is really, really important. The content is the part people are reading, the part people are looking at most of the time.
An article can be read with more ease when the designer chooses for images, sub-titles, bold and italic text and a typeface that fits into the style of the article. An well designed article will increase the users reading experience.
Here are some examples typography for paragraphs with large amounts of text.
Paragraph with Georgia
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
p{
font-family: Georgia;
color: #444;
text-decoration: none;
word-spacing: 0.3em;
text-align: left;
letter-spacing: 0;
line-height: 1.6em;
font-size: 1.2em;
}
Paragraph with Courier New
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
p{
font-family: Courier New;
color: #5b3600;
text-decoration: none;
word-spacing: 0.25em;
text-align: left;
letter-spacing: 0;
line-height: 1.4em;
font-size: 1.2em;
}
Paragraph with Arial
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
p{
font-family: Arial;
color: #000;
text-decoration: none;
word-spacing: 0.25em;
text-align: left;
letter-spacing: 0;
line-height: 1.4em;
font-size: 1.1em;
Examples & Resources
Here are the Live Examples of the typography shown in this article.
If you are interested in more typography news, resources and updates, take a look below:
- ILoveTypography.com
- DesignWorkPlan.com (great real-life examples of typography!)
- Wikipedia
- TypeTester (Expirement with Fonts in a webbrowser)
Nice write-up Stefan! Thanks for the link to my website.
[...] Go to the author’s original blog: CSS & Typography – Tips and Examples [...]
Hey Sander! I’m always enjoying those real-life examples of typography, especially because I am from Holland too, so I see the same examples around the street!
A good post Sander.
Makes me think about the importance of TYPOGRAPHY all over again, even though its a basic used feature in everyday life.
Keep updating with more useful entries…
Well covered and good examples of what a dynamic effect that typography has on web design. Everyone is so wrapped up in photoshop it seems that this important aspect of web design seems to get overlooked far too often. Just a note, it looks like the code used for the Courier New paragraph is used in the Arial paragraph below it.
Your totally right, Rustafar. Thanks for your opinion and the pointer
This is a really helpful tutorial! Sincere thanks.
Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.
[...] the internet that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the [...]
I went through few articles before about typography which talks about experimenting with different fonts and styles. This article is simplified with the three major web safe fonts and proper examples.
The page design needs modifications because the TITLES in the given examples are overflowing the post wrapper.
Thanks for this article.
[...] we markup our paragraph we have to choose from 9 options in CSS. If used properly, all of these can drastically improve the experience the reader has with your paragraph. It is the [...]
I can’t stress the importance of using CSS to style your headers. So many designs forget this, and style p tags stead, some even use classes!
Header tags are great and they should always be used to there full potenial.
Excellent post my friend! And i do like the term Typography!
I guess typography, like sense of color, comes naturally to people. Unfortunately, I’m yet to discover the type geek in me
Perhaps it is a matter of working with fonts over time and observing and developing type sense slowly.
Type for web has been a problem anyway. There are only so many fonts you can use, of which many go completely bonkers on certain browsers and OSes. Maybe CSS3 or beyond will bring new fonts, but until then, it is image replacement and sIFR all the way.
[...] and more alternatives for CSS typography are seeing daylight and that is great news for the webdesigner who would like to have some more [...]
[...] and more alternatives for CSS typography are seeing daylight and that is great news for the webdesigner who would like to have some more [...]
[...] CSS & Typography – Tips and Examples [...]
Cool post, typography is so important and you can do a lot with it using CSS. I think many designers forget this. You should write an article on the pseudo elements you can use. For example p:first-line{} etc.
I have always loved to experiment with various fonts and the effect they create.Can anyone suggest me a good source for more such fonts?
[...] CSS & Typography – Tips and Examples [...]