Twenty years ago nobody knew what they were doing when designing a website. It was all something new and you couldn’t talk about strategies, research, laws, theories and typography. It was all chaotic. And it all started in 1989, when the first browser called World Wide Web was released, in the same time as the first website. However, it is not possible to see the first website ever, as there isn’t much information about it, but a website looked pretty much like this one and was used to give out basic information.

It all continued on a very slow path until 1996, which is considered by many the beginning of a new era in web design. Designers started using background colors – most of them really vibrant and painful to look at – but some of them kept it simple and decided to go for white – and even used some other fonts than the default ones. In this era people started overusing the animated GIFs we all hate today.

In the screenshot below you can see the Yahoo! website back in December 1996. This is one of the good examples of that year, but trust me, not all of them looked this good. You’ll see other websites below from 1996 – I am sure you can’t look at them  for too long and would be able to make a very long list of mistakes. People were not doing this back then, because the web was quite new and they were really happy with the websites they had – these were huge achievements for them back then.

Yahoo!'s website in December 1996

McDonald’s webpage was incredibly hard to look at, although there was not much text. The background red combined with the yellow created a very powerful visual – truth is that everybody associates this color combination with McDonald’s today, so it might be also thanks to their first webpage.

McDonald's website in November 1996.

aol.com in December 1996

Aligned to the left and with a maximum width of around 600 px, Apple’s website was not very smooth back then – unlike today. However, their design was still one of the best available on the web and looking at it didn’t affect your eye’s health at all, unlike some of the other ones.

Although not as fancy as today, Apple's design from March 1997 was one of the best on the internet.

Shortly after this era, another one started: the era of Cascading Style Sheets. Although not even half as advanced as today, CSS made a huge difference back then. There were still many wrong colors being used, but the layouts started getting better and you can see in the screenshot below some of them even used a grid system, if you are not so demanding and precise.

Yahoo’s June 1998 website was actually looking good and it was one of the best of its generation. But what would you expect from the king of the web during the 90s?

Yahoo! Kept a white and clean background, but still had blue link colors.

Google’s 1998 webpage, although the service was still in beta, looked really simple for that period, a trend which the American giant has continued with, right up until today. The main functionality of Google was and still is searching, therefore there was no reason to clutter the site too much.

Google Beta (1998) had a smooth design.

As you can see in the screenshot below, Apple’s webpage evolved a lot from 1997 to 1998 and already started looking like what was going to be one of the pioneers of the minimalistic approach. Big visuals, not a lot text, no advertising and an interesting layout – this all started shortly after CSS1 and continues to this day.

Apple.com in July 1998

Even AOL’s website looked better by April 1998. They started to have a grid system, used the colors of their logo and personalized their menu by using buttons.

AOL in April 1998 (not all the images captured)

The colors were becoming even more popular because designers thought they will keep the people on their web pages. They didn’t think the same colors would make it impossible to look at the page for more than a few minutes. However, as said before, the good that came from this was the fact that it associated colors with brands – blue for Microsoft, red and yellow for McDonald’s and so on.

Another problem were the fonts. Times New Roman and Courier New were very popular (Comic Sans was already released and soon to become hugely popular). Although there were many other options, people preferred to use these two typefaces in everything, from web pages and invitations to e-mails and documents. Writing with black was popular and everybody kept it like that. If there was something which needed to stand out, red was the color of choice. Otherwise I am sure you remember the blue underlined links (which you can see in most of the examples shown here until now). Because typography was not an important part of the design, bold and italics were not very used either to make text stand out.  A font that was widely used in the 90s and is still very popular today was Arial, which can even be seen on AOL’s website.

Leaving too much empty space was madness back in the 90s, also because centering a web page was not very popular. You can see Yahoo!’s first website (shown above) and notice how much empty space there was on the right side. People also started using background images, but because the images were not big enough, in many cases they started to repeat them and this created an awful visual.

Buttons also started to appear and become more and more popular, because they allowed designers to further customize the menus and put the focus on the navigation, while icons were also used all the time – it was the first time when visual elements had a use. This was also the period when animated GIFs exploded and everybody used them. There were almost no websites without them and people really appreciated the effect they created.

The year of 1999 was the year of a change. People started to design smarter and thought more about usability, grid systems, layouts and even colors. Most of the websites with vibrant background colors were redesigned and started looking better (McDonald’s got rid of that vibrant red from the background one year before).

CNN's webpage in August 2000 (not all the images captured)

Microsoft in February 1999 (not all the images captured)

Shortly after this, bright colors were on the way out and creating contrast between the background and the font color was critical. Most of the designers started using white as the default background color and it worked really well. Designers started designing in pixels instead of inches like they had been before. Maybe the most important thing was the fact that the content of a page was ordered, with the menu being in focus most of the time.

The importance of typography increased as well during this period, with people thinking a bit more about the target audience. Comic Sans becomes popular for child websites (although for a period it was used for everything) and some other fonts come into focus. There was no option for embedding back then, so designers were constrained, but at least they started to experiment more with what they already had.

Websites were not flexible at all back then and because of the many screen sizes available, it was difficult to design something to look good for everybody – responsive design was just unheard of. The use of buttons started to decrease as well because people learned how to properly play with font and colors – typography’s importance increased even more.

GoDaddy's website from December 2002 even had a dropdown navigation.

By August 2002, Apple’s website looked a lot like the one they have today. The navigation was a dropdown, they used big images for the featured article/product and four small boxes for other products at the bottom – a lot of similarity with Apple’s current website. The Cupertino-based company showed everybody how they should design a simple, but effective website.

Apple in August 2002.

The use of icons and boxes increased. As mentioned earlier, icons were a good way of focusing the users attention (especially on navigation links), while the boxes were used to help the user find his way around the website and also for structuring content. Luckily, the use of animated GIFs decreased by this period and they would never be as popular as they were a couple of years before.

Another era started in 2002, when the so-called web 2.0 concept appeared for the first time. The use of colors became more theoretical and everybody used them to make the websites more appealing, rather than flashy. The use of Flash – right then on its way in – was popular until 2008 when its use decreased dramatically. Flash animations became more and more popular and most of the websites started looking more professional, as we would say today.

Forums were already spread around and most of them had the same look and feel, like in the image below.

Softnews Romania in February 2003

Shortly after this, the hover effects started to appear and they were a hit. Everybody was using them because they created focus and helped the user navigate.

Footers were also increasing in popularity and they were always used to display copyright information, privacy policy, terms of use or contact information.

Color palettes started to become harmonious and be used wisely. They started to create impact and designers knew that, if used correctly, colors can make a huge difference, especially then when not everyone had this information. The use of typography increased and, combined with colors and contrast, made the text interesting – for the first time in web history.

Responsive web design still didn’t appear at this point, but at least there were no more problems with background images. Now it was easy to calculate everything in pixels and repeating background images disappeared (they appeared again later on to create what we now refer to as patterns). Also, using background images instead of solid colors went low-key and designers preferred to avoid it.

Probably the first real interactive website was one for Coca-Cola. They showed the world how to use colors smartly and how to integrate them with flashy, visual animations that kept the users on their page for ever, even if there was not really too much going on there.

The web as we know it today started in 2005, when everybody realized cluttered sites are not popular, and started to keep them as simple as possible. Single pages appeared and made a huge impact because they were just what lots of users needed. Single pages gave design a fresh look and simplified the navigation. Designers started playing with font sizes and color and combined them so that text was in focus – integrating multiple fonts was tried for the first time in this period. The “back to top” button was also seen for the first time in this period and many websites adopted it, as it made navigation easier.

By mid 2006, Yahoo!'s webpage was simple and effective - no flashy elements.

In this period websites were becoming more than just a way of supplying basic information. They were part of an identity, soon even a part of a strategy and people visited them not only for information, but also for relaxation and inspiration.

In 2008 another era started, which lasted for only few years (although some signs of it are still online today). This was the retro period, where old fashioned elements started becoming popular. No, not the GIFs and the tables, but retro colors, text, illustrations and other elements could be seen all over the place. This is also when the minimalistic design approach started, but it was nothing more than an idea yet.

forefathersgroup.com incorporates lots of retro elements

The minimalistic approach started to become more than just an idea in 2010. We are currently in the minimalistic era, where it all has to be designed fast, it has to stay simple and still do its job and create an experience for the user. At the same time, although many websites turn to this concept, each one of them has to have something special – so that people will remember it and come back. Now it’s a lot about colors, typography and contrast – the best one being between white and black.

How simple can a website be? Apple's the best example.

There are things we can notice everywhere. The color palettes are congruent and are not thrown out there just for the sake of it – they are used with a purpose. Hierarchy was introduced as well and it is not only shown through position, but also through font size, font type and colors. Balance is also a key word in today’s web design and creating a positive, attractive atmosphere on the website is the purpose of any designer. Responsive web design is popular today and there is no such thing as not being able to make a website look good on all the screens.

The typography goes beyond limits and being able to embed fonts made it even more challenging and interesting. Although too many fonts can lead to a bad design, if you know how to use them you will learn the key to getting people to read your text. Buttons are still used (think of Twitter, Facebook, LinkedIn and RSS) and are the way to navigate through pages, although they are not widely used anymore in menus. The problems with images and resolutions disappeared as well.

There is also a new style in town for background choices. There can be images, patterns or even solid colors – in today’s web you can integrate them with everything. Animations are not popular anymore, but are still used here and then – however, they do not affect the loading speed of the sites as much as before.

With more than 20 years since the design started to develop, it is easy to see that everything moves fast and that everything keeps improving. It is amazing how you can think that nothing can be better, and then in a few years something new comes and everybody is excited about it. The internet went from rough to beautiful and useful and will most definitely continue on its path upwards. Lots and lots of changes will continue to be made and the question is: are you ready for them? Are you ready for when a crazy designer will see an opportunity to push the web even farther? Will you jump on his bandwagon or will you just continue to do things the way you do already? If the history of web design has taught us something, it is the fact that we always continue to evolve. You should always be ready and willing to do the same when the opportunity arises…

Remember, basically typography is white. It is the black space in between that changes its forms.

Helvetica and The New York City Subway

The New York subway system has always sported Helvetica over other fonts, which is reconfirmed by the popular 2007 documentary Helvetica. The film is a gift to graphic designers. It is full of riveting experiences about the extents to which a font’s history can go. See the image below for few interesting stills from the film.

Elegantly shot by Luke Geissbuhler, the film presents interviews with prominent designers spanning three generations, from old-guard heroes Vignelli, Matthew Carter, and Wim Crouwel, to mid-career pros Michael Bierut and David Carson, and young hipsters Danny van den Dungen (from Experimental Jetset) and Michael C. Place (formerly with the Designers Republic). Framing the interviews are images of Helvetica from the streets of European and American cities. We thus move rhythmically between the designer’s voice from inside the studio to the public life of the typeface on café signs, billboards, subway graphics, and so on. The two perspectives come together humorously toward the end of the film, when the Swiss publisher and graphic designer Lars Müller walks through London and points his finger, with deadpan sobriety, at various examples of Helvetica. – Ellen Lupton

If you really want to dive into the history of Helvetica and its emerging usage in New York City Subway system (as show in image above by Paul Shaw) then I highly recommend Paul Shaw’s overly lengthy (but amazing) discussion on the same lines.

The Pictorial Representation of “M” in Metro and “S” in Subway

Metro and Subways are something which are common throughout the world. You will not find the words Metro and Subway change forms anywhere in the world although the representation of “M” and “S” changes worldwide. Various countries showcase various logos with a different version of these letters.

As you can see in the amazing compilation of metro and subway logos from around the planet, typography can go a long way to design their own version of any typeface. You will notice how fonts are telling a story on every billboard, television advert and almost everywhere. We just need to observe.

Programming. Mathematics. Metafont.

Heard of Metafont? The reasons are explained in two lines by Donald Knuth, the father of Metafont, for those who answered no to that question:

Asking an artist to become enough of a mathematician to understand how to write a font with 60 parameters is too much.

Basically Metafont is a programming language which can be used to define vector fonts. The best part about Metafont is that it can be used to generate more fonts which are actually the result of multiple geometrical equations. Although most type face designers haven’t shown any interest in Metafont yet there is one crazy typeface designer from Germany, Hermann Zapf, who has held on to Knuth’s Metafont to experiment more with the unique style of font designing.

Some of the A-List typeface designers might not have given their precious time to Knuth and Zapf but it is true that their contribution shows up every now and then in our jungle of fonts.

Title Sequences and the Brains Behind Them

Title sequences are the method for presenting the key cast members of a film or a television program to the viewers. Kyle Cooper is one of the many title sequence designers that make this possible. Kyle came into fame after his design for the 1995 movie Seven. His design was critically acclaimed in Uncredited: Graphic Design & Opening Titles in Movies.

Kyle Cooper is part of that genre of graphic font designers who don’t live for publicity. They just work and let the world look for them. Kyle has worked for some of the best films and production houses. Wired once covered almost everything about Kyle Cooper and I highly recommend reading the article.

Some more of his work can be found on his portal:

Comic Sans was NOT a mistake

How can we forget Comic Sans when we are discussing fonts? Comic Sans seems to be the one font which has been part of the no man’s land since its birth. It cannot be used for official work and the not-so-officials have a lot of more exciting fonts to concentrate on.

Comic Sans was designed by Vincent Connare and officially released by Microsoft Corp in 1994. The usually casual font was actually an imitation of fonts used in old style comic books and was designed for informal documents. The font has received a lot of critical opposition due to (probably) its casual looks in some serious documents. Without stretching much, I request you to read Why Comic Sans by the creator himself. Also, do check the Helvetica like documentary for Comic Sans:

Conclusion

As I have said before, fonts are everywhere. We see them and enjoy them. But, we don’t seem to concerned or interested about how or why they were designed. Of course it isn’t our job, but sometimes it can really get interesting. You have any stories to share?

Let me attempt at painting a common scenario for you. Imagine that you are starting on a new project, and have come across two fonts. One is a premium licensed font, and the other is a free font. Now the typical answer to this situation would be to go for the free font, save some money on the project, and the client really won’t know the difference so no complaints there. However, is the typical answer the choice that is always right? Is there any additional value that can be gained by going with the premium font option versus choosing the free option? Let’s take a look a look at some reasons why fonts cost so much.

Quality

When a creative goes looking for a resource to help improve a project they are working on, the quality of the said resource should be at the highest they can find. Well in the font world, like anywhere else, you get what you pay for. The issue with dealing with free fonts is that one really has to do a lot of searching to find one that is nice high of quality. Don’t get me wrong, there are a lot of nice fonts out there that were created by good typeface designers for free public use. However, there are a lot more in the free font market that are not of high quality. There are many cases in which a free fonts have glaring flaws that make you wonder why a designer would release this to the public. Such as:

• Consistency in style with all letters
• Botchy curves
• Missing letters
• Not completely crisp throughout

Now, a premium font will rarely ever have these types of issues. This is so because like anything with a price tag, in an area where there are multiple alternatives available freely, a higher standard of quality is the only thing that matters.

Digital Rights and Usage Licensing

Okay let’s be honest here, how many people can actually say that they have gone through the license and usage agreements every font has before putting it to use? Especially for fonts you find for free? That is a big problem because that font that you find for free and say is a steal, could land you and your client that you used it for into some legal issues. When using a free font, people always assume by them being able to download them at free of charge means they can use them however they want without any problems, right?

This couldn’t be more wrong. The majority of free fonts, especially the ones of higher quality, are only okay to use for personal implementation. Anything outside of personal use is a violation of the agreement you agreed to before being able to download them, and will cost you some money and a shot to your reputation as a designer to get out of. I don’t think the legal headaches and lower standing with your clients is really worth it.

Premium fonts however when purchased, can be used for commercial use like in client work, web use, etc. In many instances with some fonts, that is the whole purpose behind their price.

Exclusivity

The most annoying thing any designer dealing with free fonts has to go through is that as soon as you find one that you really like, you realize its been or soon will be used everywhere! The once great find font you found is now the poster child for creative overkill in the community. You can look at Helvetica, Impact, Times, or Comic Sans for great examples of this.

Fonts that are free for use, always come with this nagging issue. This issue can lead to lower the overall view placed on your work, and its originality. Let’s be honest how many times have you seen a design with a font that has been used too much and that fact alone didn’t take away from the overall design?

Font Families

Typically with free fonts, they don’t come as a true font family. The only option you have is that one, or two in some instances, style. That is okay for some forms of graphic work, but for the most part it is a challenging thing to overcome. Font families gives you choices an options for different looks and better results for different instances. Also giving you a better font hierarchy in your designs, if that one font is the only one you are using.

Premium fonts always come as font families with different styles and font weights to choose from, giving you the options you need to make your design all the better.

Stolen Designs

It is a sad world that we live in where the truth is that if you create something remarkably astonishing, it will be reproduced and sold at a lower price, maybe even given away for free. Well, typeface designers know this disappointing truth all to well. Typeface designers spend a lot of time designing the fonts they create to be of high quality and originality, and quite often you’ll find the designer underselling his work so that it can be more accessible for us in the community.

Then after all that work put into it, to only find out that it only to be duplicated in lesser quality and being offered up for a lower price. Let alone finding out it is being offered for free.

Conclusion

The debate between which is better for use, or is there even really a difference, between free fonts and premium fonts will never end. They both have there qualities that are going to be appealing, and find one being better than the other in certain circumstances. Here is a summary of what we covered.

Premium

• Better Quality
• Multiple font styles to choose from in the font family
• Additional licensing may be needed for commercial use, or exclusive use
• Won’t be seen everywhere
• No worries of lawsuits coming your way, or your client’s way for its use

Free Fonts

• Does not include all characters
• Occasional lack of consistency
• May require additional licensing to be used commercially, or for the web
• May be a stolen design of a premium font
• Possibly will be seen in many other places
• Lacks font style options

Now after taking in all that information about fonts, and learning the benefits of using a premium font or a free font, your probably asking yourself which one would be better for your next project. We’ll let’s make that decision a little easier for you, below you can find a breakdown of the instances in which each category of fonts have their advantages.

Free Fonts

• Personal Use
• Non-Commercial Work
• Personal Logo, or branding(if okay with its designer)

Premium Fonts

• Commercial Work
• Client Work
• Web use
• Anything where its implementation gains you any monetary earnings.

However now that you have a better understanding of why fonts may seem to have a hefty price tag at first glance, you’ll rethink that thought and see all the benefits associated with using them. Below, you can find a few high quality free and premium fonts that will surely intrigue your creative spirit.

Free Fonts

Code Pro Light

Code Pro Light

Weston Font

Weston

 HERO

HERO

Coamei

Coamei

Infinity

Infinity

Premium Fonts

Gabriel Sans

Gabriel Sans

 Mija

Mija

Ratio OT

Ratio OT

Jannon Pro

Jannon Pro

Van Condensed

Van Condensed

And it is not only about the typefaces available, but mostly about the skills a designer has. There are Universities that teach typography throughout years, because it is a deep field. Knowing alignment rules, kerning, hierarchy and other terms like these is crucial in making your text say something specific.

The good part is that good typography alone is enough to create a powerful visual identity or design. Being able to hit the right mark with the typography is critical and therefore I will share with you several tips on how to improve your typography skills.

Good typography matters because it plays a vital role in web design. It generates a hierarchy (most of the time visual) and makes the text easier to read and follow. Typography is not only about looking good, but also about providing a functional advantage to the text – being easier to follow and read.

It is important to design with the idea that the result has to mean something. It is even more important to think of the information you want to give to the visitors and how you want to do this. Every typeface says something about itself, so think also about the way you want to transmit the message. Looking at the picture below should make you understand what I mean, even if you don’t have that much knowledge of typography.

The same word has been written with four different typefaces and they create a total different impact. While the one written with Impact creates the most powerful visual attraction of all (the name is not a coincidence at all), the one with Helvetica Neue looks more modern, fine, polished and sleek. The one written with Ethnocentric seems the most modern of them all, but might be difficult to use for something other than titles or headings. The reason why this is will be discussed right away.

"Interaction" written with Helvetica Neue, Impact, Italianate and Ethnocentric.

 There are more font classes in the world, but only two of them are of such importance that everybody should know about them: serif and sans-serif. The difference between them is the “serif”, which are small additional endings at the end of the strokes – specific of the serif fonts. “Sans” comes from French and means “without”, so it is quite obvious which is which.

The serif fonts are usually used in printed material such as newspapers or books. However, magazines employ sans-serif fonts because they are “cleaner” and are easier to read when the font size is small. But according to studies, the serif typefaces may be easier to read in print, while sans-serifs are better on-screen, especially in low font size and low resolution.

The good part about the new technologies on the web are that even if your computer does not have a font you might like to have, downloading it is only few steps away. Moreover, embedding the font into your site, so that everybody who visits it sees the text with the typeface you want, is possible as well now, so why not use this if you can? I would like to show you two examples of websites with integration of custom typefaces, and then we’ll come back and discuss why are they successful.

Egopop Design Studio uses a custom-made font.

Chirp has a funny custom-made font as well.

The success of these two webpages, and many others for that matter, is also given by the way they made use of typefaces. Maybe tomorrow you will not remember what the website was about, but it is very likely you will remember the website itself, because it creates a powerful visual impact – and this is the first step into having a web identity worthy of remembering. This is what a good, well used typeface can turn your website into.

Another good tip is not to overdo it. It is not a good idea to use many fonts, so try to keep the number of typefaces as low as possible. I usually go with two, maximum three. I think two is perfect because you have a typeface (serif maybe) which can be used for titles and headlines, in huge sizes, while the other one is for paragraphs and small text, and often it is a sans-serif. In the image below you can see a good example of two well-combined typefaces.

Pound & Grain uses a sans-serif for the headlines and serif font for text.

If you combine too many fonts in the same design, this can cause your text readability to suffer and will not create the same experience as the example above. Fonts have to be used wisely, and quality is more important than quantity. Although it doesn’t have that much to do with typography, embedding too many fonts will make your site load slower.

Experimenting is the way to find a great combination. Try as many fonts as possible, play with them, combine them, increase or decrease the number of typefaces and so on, until you reach the desired effect. Managing to find the perfect combination rarely happens the first time when you try it, so get ready to spend some hours on this.

The line spacing is critically important as well, because it has a lot to do with readability and impact. Moving the lines apart from each other will make the human eye read them easier, while bringing them closer will obviously have the opposite effect. The average of the line spacing should be about 0.3em to 0.5em larger than the font size, but this is only a guideline and you shouldn’t follow it all the time. Actually, I never even think about this one; I always increase or decrease the line spacing by looking at the text and comparing the options. To realize why big line spacing is important, look at the image below and try to think of which is the easiest to read. Note that the typeface is the same in both paragraphs.

A difference of only 10px spacing (Photoshop size, not HTML/CSS) makes a huge difference.

Another important concept is the hierarchy, which can not only be made by increasing the font size, but also by using different typefaces, as I usually like to do. Headlines and titles are either bigger or have a more powerful, thick font, because they need to stand out. “If it makes a difference, better make it big”. If talking about rules, then this is one you should keep in mind – make the differences obvious.

The hierarchy can be emphasized through color, contrast, dimension or placement, but the most visual is the one emphasized through typography.

The headline is a sans-serif in bigger size, while the rest of the text is written with a serif font.

Measuring the width of the text is important too, but it is more crucial for paragraphs than for headlines. The ideal line length seems to be between 10 and 15 words per line, but this is another rule that doesn’t apply all the time. It is so important which typeface you use, because some are wider than others. The line spacing between rows has an influence over this as well, so don’t think of rules. Ask anybody around you to read your text and then ask if it was difficult, easy or normal. Don’t read it yourself, because you that designed the layout and after spending hours looking at it, small details become unnoticeable.  It doesn’t only depend on the font you use or line spacing, but also about the general width of your design.

Alignment is important too, but the sad truth is that it is impossible to make it work for everybody in the World with only one design. This is because in Western culture we read from left to right, top to bottom, while some countries in the Eastern part of the World read right to left, bottom to top. Therefore you should think of your audience and design for it. If we take the Western culture as an example, then try to have as fewer different starting points on the left side. This is because the eye is used to start from the same point as before when reading a new line, and having a different starting point for each line will make it difficult to read. Maybe we don’t think of this too much, but the brain probably does. It is far more easy to read a text aligned to the left, than a text aligned to the right, and the example below should express this.

The text on the left side is the easiest to read.

Although I am a big fan of the center alignment, I only use it in headlines with few lines. The version on the left side is definitely the best and I think everybody would consider a website aligned to the right a bit weird, especially people in Europe and America. Justifying the text is not a very good option either, because it will create a lot of empty space between the words and this will become confusing. Justifying is usually popular in print, in narrow columns, but not in web design where the containers are usually wider.

The weight of the font is important as well. The weight is actually how thick the font is. Highlighting words or links is usually done by using a thicker font or another color. Having several font weight types means that you can reduce the number of other embedded fonts, because having the same font in different weights gives a feeling of hierarchy and importance.

Helvetica Neue is a font with more than 40 different font styles and weight.

As you can see, typography is built on several important concepts and it is important to keep an eye on all of them. Typography is an important part of any design and if you manage to hit the mark with it, a basic, simple and clean layout will be enough to create a powerful identity. You will have to spend a lot of time on improving your typography skills, therefore I will share with you a list of useful links where you can find out more about the art of typography.

Articles about typography on 1stwebdesigner.com

Articles about typography on Smashing Magazine

25 Excellent Typograhy Tools on Six Revisions

A Crash Course in Typograhy on Noupe

Designing with Type by James Craig on Amazon

Typography and Design one OneXtraPixel

From “and, per se and” to “ampersand”

Instead of making this discussion a chapter eligible for history books, let me cut things short:

• 63 B.C. - Marcus Tullius who was Cicero’s slave started the tradition of including ampersand in his literature. Reciters would pronounce it as “and, per se and” which meant “and by itself [means] and”.
• 79 A.D. - The city of Pompeii showcases the symbol on its walls as part of city graffiti.
• 775 A.D. - The letters E and T (where “et” is Latin for “and”) were being usually written together (shown in image below) to form a ligature. The symbol used for this would soon become our very own ampersand.

Image from Wikipedia

• An interesting fact is that if ampersand was not available to be used, usually due to cost involved in designing the same, writers would use the combination of 8 and c as replacement for ampersand.

• 1111 A.D. - The symbol was unofficially included in the character set by an Anglo-Saxon monk, Byrhtferð.
• 1499 A.D. - Aldus Manutius prints Francesco Colonna’s Hypnerotomachia Poliphili using 25 ampersands on a single page.
• 1837 A.D. - It was the 17th and the 18th century when some primers started to include ampersand as the 27th character of the English alphabet. It was in the year 1837 when dictionaries officially started to include the word ampersand in their list.

How to Draw Ampersand?

I am not kidding. There are people who get confused when it comes to drawing ampersand. When you look at the symbol Ampersand and compare it with Treble Clef then you might not find much differences.

Please understand that Ampersand is a character used in English Sentences while Clef is a music symbol and Treble Clef is part of the same set of music symbols.

Now, back to drawing an Ampersand symbol. If you see the image above (Ampersand on the left section of the image) then it should be pretty clear as to how you can draw the same. Let me explain the same in words and see if you are in sync with me:

• Start from the lower right corner
• Go up and slightly to your left
• When at the top, move towards right and loop downward towards your left
• Now curl under up to your right going up.
• Continue till you cross your original stroke.
• Practice again!

Usage of Ampersand and Important Rules

While the most important usage of Ampersand is in our cell phone SMSes, there is a lot more to it that we can learn. You might already be aware of what I tell you but I assure you that you might be committing silly mistakes just because you overlooked the rules.

• Never replace “and” with & – Usually we make this mistake. While writing English sentences we tend to use “&” symbol whenever we want to use the word “and”. This is the most common and the laziest of mistakes that humans commit. I don’t because my beautiful English teacher scolded me a lot for such mistakes. *blushes*
• FACT – Did you know that “&c.” can be used as replacement for “etc.”? Well, it can be. Although, I will suggest you to avoid this in your daily life as half of the readers might not understand it.
• Addressing a couple – Mr. & Mrs. Smith! If you use “&” instead of “and” while addressing a couple then, somehow, it won’t be considered a mistake.
• Firms dealing law, stock markets and architecture – This is one usage of Ampersand which has kept it alive on the official front. Otherwise by not it might have been limited to SMS language only.
• Used to indicate a two-part name – Ampersand can be used to indicate a two-part name. An example would be – James, Mr. & Mrs. Jackson, and John.

Ampersand for Webmasters

We (the webmasters) know this already. Right? After all this is part of our bread and butter. Anyways, let me go through the same all over again. You know, just in case.

HTML Ampersand Character Codes are usually used to depict symbols that are impossible to type otherwise. See the image below to get a clear understanding of what I mean:

You can get a detailed list of abbreviations here and here.

The Showcase

Well, that was lot of information for us to consume in one go. Let us ease out our minds by admiring some of the neat ampersand designs.

1. Papyrus Handwriting

2. Regency Script

3. Caviar Dreams

4. Scriptina

5. Hill House

Tips

The right font

As you may already know choosing the right font is often the hardest part of a design that involves typography. But that’s only half of the story. In both digital art and web design you’ll often have to use more than one font. For digital art typography is used more as an artistic element and in web design you have to think about elements like headlines, remarks, call to action and many more things. Don’t get me wrong and stuff your website with a dozens of fonts. Use a few but select them carefully. Remember to take into consideration things like dynamics, font moods and even things like mobile browsers.

Choosing the right font is extremely important in minimal web design because type is what basically will make your website. Oliver James Gosling has chosen a large strong font for title and a smaller smoother one for navigation. The whole website is using about five fonts which is absolutely enough. The typography used in this website creates the right mood and dynamic.

Formatting

Styling and formatting is as important as the choice of the font. Even some of the prettiest and most user friendly fonts can become unpleasing if the styling and layout is awful. One of the tools to avoid messy typography is by using a grid. A grid is especially important in print and web design. Whether you use guidelines in Photoshop or 960 Grid System with CSS think of the positioning, layout, margins and structure. Your eyes will be the best judge.

Francisco Inchauste’s personal website is a great example of efficient use of grid system. The text is divided in three main sections and it’s clear and easy to read. Also other things like headlines, opacity and capital letters makes this seemingly plain text styled and formatted perfectly.

The details

It’s often the tiny little details that separate good typography from excellent. Kerning, tracking, font sizes – all these factors matter especially if we’re talking about web design. In web design all the little details count and they can either enhance or spoil your design. Pay attention to things like spacing between the lines, quote marks and hyperlinks. Typography is a subtle yet powerful science which consists of many tiny details that definitely aren’t insignificant.

You can see an efficient text styling and polished details in the website of Revista Vlov. The font is subtle and smooth and the styling makes it pleasant to read. Line height and kerning are just fine and the transparent boxes give the text that solid and complete look. Also the more important words are nicely highlighted with a different color.

Harmony

Most of the time type is not going to be the only thing that will shape your artwork. This point combines all of the previous and many more typographic rules. You can create a perfect type fitting all typography standards however if it’s not going to interact with other parts of the design it’s pretty much useless. Choosing the right fonts will play a big role, but you have to pay a lot of attention to details and the overall look as well. Pay attention to colors, shapes, images and free space. In web design white space is going to be your biggest friend. Be sure to treat it accordingly.

Pixelschupser Medien design agency has achieved perfect balance and harmony with the use of typography. They’re using a few, yet carefully, selected fonts that do their job greatly. You can easily scan over the services they’re offering and the main content is legible as well. When you look a this website there’s that lovely feeling of completeness. The type in the background is also a neat solution.

1. Pacifico

2. Europe Underground

3. Crystal Deco

4. Fanwood

5. Yonna

6. Francois One

7. Mars

8. Cabin

9. Ostrich Sans

10. Burbin Casual

11. Filetto

12. Familiar Pro

13. Quattrocento Sans

14. Metrophobic

15. Open Sans

16. News Cycle

17. Kristi

18. Egypt 22

19. Code Pro

20. Collator

21. Lekton

22. Slice

23. Capsuula

24. Claire Hand

25. From Where You Are

26. RBNo2

27. Cousine

28. Just The Way You Are

29. Muli

30. Mako

31. Aovel Cool

32. Sketch Gothic

33. Nunito

34. Steelfish

35. Movavi Grotesque Black

36. Shanti

37. Banda

38. Broken Records

39. Six Caps

40. Infinity

41. Dancing Script

42. Sharpie Letterkit

43. Tabitha

44. Phoenix Script

45. Calluna Sans

46. Decibel

47. Shattered 3D Font

48. Wisdom Script

49. Duke

50. Appleberry

Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.

Feel free to suggest any other tools or resources in the comments section.

In Context

To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.

• It allows the reader to adjust to the right setting and encapsulates the information conceptually.
• The evaluation of picking the right font should start at this level and then break down into technical bits.
• Keep the nature of content in mind during this process and see if and how the type reflects that content.
• Read the text your given to figure out the best method of integrating and conveying its full potential on the site.

This article explains choosing type wisely very well.

Create Hierarchy

Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.

• Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time.
• By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Whenever Possible, Use Sans-Serif

Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.

Leading

As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:

• Long lines of text may require extra leading.
• Bold face or sans-serif type require more leading.
• Type set at very small sizes, say 8 point or below, may require extra leading.
• Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
• Headlines may require negative leading, where type actually (or almost) overlaps.Negative leading, in other words a line-height value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:

It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.

Headings

By default, browsers will render the <h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)

• Contrasting colors stand out more, so use them for main section headings.
• It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bold.
• The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simple.
• Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.

Check out this article for 20 fonts designed for big, powerful headings.

Choosing a Font

The following are resources I’ve found to help you choose your fonts wisely.

Type Tester

Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

CSS Type Set

CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.

STC fontBROWSER

This tools enables you to preview fonts installed on your system online.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Typographic Techniques

The following are resources I’ve found to help you develop efficient typographic techniques.

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

Advanced Typography Techniques Using CSS

This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR.

Misc

You need a typeface poster

Conclusion

Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.

1. How to Create Inset Text With CSS3

In this tutorial you are going to use the text-shadow property that is currently supported by most of the major browsers to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

2. 3D Text

This is an example of 3D text created merely with CSS3. Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

3. Cool Text Effects Using CSS3 Text-Shadow

This tutorial shows you how to create some really cool and inspiring text effects using text shadows in CSS3.

4. Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

5. Letterpress Text Effect Using Photoshop and CSS

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. This tutorial will show you how to achieve letterpress effect with Photoshop and also with pure CSS.

6. Text Embossing Technique With CSS

Text embossing has become a huge trend in last couple of years. This tutorial describes how to implement this effect with CSS.

7. Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Learn to use CSS3 text shadows, outlines, transitions, and even text gradients to create cool typography that you’d swear had to be made with a program like Photoshop.

8. Outline Your Text Using the CSS3 text-stroke Property

This tutorial shows you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

9. How to Create a Cool Anaglyphic Text Effect with CSS

In this tutorial you’ll create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in  web designs you’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup.

10. CSS3 Tutorial: How To Change Default Text Selection Colour

Whilst this CSS3 declaration might not be crucial to your project or design and is not supported by all browsers, it’s a fantastic effect that really takes your design one step further.

11. 8 CSS3 Text Shadow Effects

This post covers eight cool text effects you can achieve using CSS3 text-shadow property only .

12. Text Rotation with CSS

In this tutorial you’ll learn to rotate text without images using the transform property.

13. CSS3 Shining Text, CSS2 Flaming Text

Create a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow and shining text using CSS3 properties and animation.

14. Create Beautiful CSS3 Typography

This tutorial will teach you how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.

15. CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste

In this tutorial you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it.

16. 3D Text Hover

Learn how to create multiple text shadows using CSS3 text shadow property.

17. Adding Stroke to Web Text

Replace programs like Adobe Illustrator and learn how to add stroke to web texts using WebKit.

18. CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?

IE9 does support the majority of the CSS3 properties, however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.

19. I Heart Blur

It ain’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.

20. How to Create Inset Typography with CSS3

In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.

21. Quick Tip: Pure CSS Text Gradients

In this short video tutorial you’ll learn how to apply gradients to texts using webkit.

22. CSS3 Background-Clip: Text

Learn to apply CSS transition on a selectable text.

23. How to Use Text Shadow /w CSS3

CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.

24. CSS3 Poster With No Images

An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.

25. Creating a True Inset Text Effect Using CSS3

This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.

26. 3D CSS Shadow Text Tutorial

This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover.

27. How To Create 3D Text Using CSS3

Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.

28. Font Sizing With Rem

CSS3 introduces a few new units in font sizing, including the rem unit, which stands for “root em”. Take a look at it’s features and learn how to create resizable text in all major browsers.

29. Create Attractive Web Typography with CSS3 and Lettering.js

In this tutorial, you’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.

30. CSS Text Shadow

Another tutorial taking you through all the advantages CSS3 text-shadow can give.

How to Create a Memorable Headline/Tagline

• Choose a headline that summarizes what your website is about. Keep in mind it should incorporate your brand or at least be harmonious to what your brand is about.
• A tagline is your slogan and should speak directly to your audience and customer base. It’s not meant to be changed as frequently as a headline and is meant to be repeated over and over throughout advertising, websites, and even corporate stationary.
• Pick a headline and tagline that are catchy and  interesting and will compel your visitors to keep reading.
• Keep the headline short – no more than eight words. Most visitors will scan the first few words before deciding to move on. If your headline/tagline combination is short but summarizes your content, visitors will be more likely to read on.

Some Memorable Taglines

Some instantly recognizable taglines include:

Apple: Think different.

Dunkin Donuts: America runs on Dunkin.

General Electric: We bring good things to life.

Nike: Just do it.

Subway: Eat Fresh.

Wheaties: The breakfast of champions.

If your brand is very well-known, sometimes the tagline can function as a headline as well.

Examples

In the following examples inspect how copy is used to convey a memorable brand experience. Through the use of type, color, and composition the designers have given visitors a glimpse of their brand and accompanying services. Hopefully through this careful emphasis on compelling copy the visitors stuck around. Do you feel these websites cut through the clutter?

1. Dropr

Hand drawn type is used effectively on the Dropr website – something not usually seen on a technology-based service.

2. Ryan & Sofia

This couple manages to use a compelling typewriter font in their pursuit to collect donations for their wedding held in Greece.

3. Just Dot

Typography is given real-life characteristics on a chalkboard, further exemplifying the concept behind the Just Dot brand.

4. DBA Products

A play on words is used in this website for a company that sells pens – allowing the customer to consider just what they’re purchasing before they make the decision.

5. Row to the Pole

This illustrative website is juxtaposed by strong, bold typography that is soliciting new members to their team.

6. Comwerks Interactive

A fun illustration and accompanying headline relay to the visitor a compelling experience from this design studio.

7. Denise Chandler

Larger than life typography is intertwined with sea life to give the visitor an image of what this designer is capable of.

8 . Wak Waw

Typography on this website is used to both allude to the logo and appeal to the demographic in which the studio serves.

9. Forever Heavy

Clean, straightforward typography here is treated as if it were on a beer label, which gives us a glimpse into the designer’s personality.

10. Bright Bulb Studio

The headline for Bright Bulb Studio personifies the era this website is targeted to.

11. Iceberg Quest

Bold typography is interplayed by an illustrative background, alluding to what’s in store for the potential tourist.

12. Solid Giant

Bold, clean typography gives the user a glimpse of what this design studio has to offer.

13. Kunalchhajer

Through the use of both the designers illustration/self-portrait and headline, the visitor is given some genuine insight into the creator’s personality.

14. Sprout Fund

A botanical illustration is set off nicely by clean, sans-serif typography which encourages the visitor to support biodiversity.

15. Pointy Design

Simple, straightforward typography engages the viewer on this website for web design studio located in Kawarthas.

16. Hey Indy

Typography is used to encourage the visitor to enact and download this animators reel.

17. Tea Round

A catchy one-liner is used here to give you a glimpse inside the Tea Round brand and their iPhone app.

18. Jeroen Homan

Bold, slab type catches the viewer’s attention on this website for a web designer/front-end developer.

19. Carsonified

The headline used on the Carsonified website gives you a glimpse into the companies values and practices.

20. Jar Design

A fun, straightforward speech-bubble catches your attention and provokes you to what to understand more about this design studio.

21.Ben Darby

The headline for the U.K. based designer Ben Darby uses simple text to note his location and hobbies.

22.Ryan Keiser

The website for Ryan Keiser emphasizes his services through the use of bold, large-scale typography.

23. Auxilium Lab

Novelty type that pays homage to the companies heritage is used beautifully on this website for Auxilium Lab, a creative development and web design studio.

24. Don’t Let Yourself

Stylized type is used to reach the demographic this website is aimed towards in hopes they’ll respond to this serious message and educate themselves.

25. Mario Bonilla

Mario Bonilla uses a food analogy to entice visitors of his website to explore more.

26. J Dawgs

A play on words for this hot dog shop alludes to the tasty food it offers.

27. Farrkling

Bold, comic type is used to catch the visitor’s attention and explain the significance of their brand.

28. Webeffectual

Through the use of bold sans-serif and script typography, we get the impression right away what this web designer specializes in.

29. Creative Payne

Creative Payne uses a mixture of typographic styles to tell visitors who they are, where they’re from, and what services they offer.

30. Vince Angeloni

The website for this designer, Vince Angeloni, uses a call-out treatment similar to a flyer to encourage the visitor to pursue his services.

The use of clever and effective design is necessary in setting your brand apart from the rest. Through the use of clear and powerful copy, these websites are meant to catch your attention and captivate an audience. What are some unique visual or written tactics you use to make your website stand out? Share your opinions below!

So what exactly is good formatting and how do you give you visitors a better reading experience?

Text Formatting

Choose The Right Font

Pick the right font for headlines and content ( paragraphs) – what’s right depends on personal taste and the site topic you’re writing about of course, but take a look at this article – How to Safely Match Web Design and Typography for a more in depth explanation. Never underestimate the power of proper typography, it can be the difference between whether or not people read your articles.

Some of our readers have already noticed we use a serif typeface for headlines, which according to some theories, isn’t the best style of font to use for headlines. Well, I am writing this guide to remind myself how important it is to have really good and thought through typography and will change the CSS styling to 1WD shortly after publishing this article. How about that – case study in action!

Tip: Just to be clear, don’t use more than 2 fonts on your site! It’s ok to use different fonts for headlines and content, but if you use too many fonts your site will probably look very unprofessional. There are some exceptions for quotes, logo, just don’t get crazy, play with different CSS styles not fonts!

Importance of Typography

Still not convinced typography is important? Ok, then I suggest you read this article – What’s Left? The author removes all the content from blogs to show what happens when you a blog is stripped of everything but the design. While the article is about needless website redesigns, I enjoyed this simple test to see why “content is king” – for blogs content actually is everything!

If you would like to see what happens when you strip a site of it’s design, check MIN. MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

Related reading for better typography tools – Ultimate List of 32 Font And Typography Tools.

Paragraphs

Text Size

This is a tricky point too, because you can increase text size in a browser with a few clicks, but still wouldn’t it be better if we could read content right away when we visit a site? I think different formatting and distractions are the main reasons why feed readers, Zite, FlipBoard and Readability are so popular! Many blogs have strange text formatting, too many ads and social media which distract from the content itself! If you can’t remove ads or social buttons, take the time and care to create a great reading experience! How big should your text size be? Again it depends on your audience, but I think 14px is a good starting point – not too small, not too big.

Use Sans-Serif Typeface For Content

Use sans-serif font for content, it’s easier to read letters without serifs (I know, I know Times New Roman is serif and it’s a common typeface that people use when using Word, but online, sans-serif fonts seem to work much better, they also make big chunks of text much easier and faster to scan).

Separate big chunks of information

Paragraphs should not be more than 3-4 sentences. Imagine how hard it would be for you to read text without any formatting? Just one huge pile of words and sentences with no visual difference or hierarchy between the different topics, paragraphs and headings! Imagine yourself sitting at a desk full of different papers, notes, tools – how do you feel? Overwhelmed? There’s a good reason minimalism is so popular in web design! Put clear separation in your content as well!

Headings

Headings are both for clear content separation and search engines! You should use a lot of headings for the same reason you need to separate paragraphs clearly. With these headings you can grab reader’s attention or lose it! If there are no headings at all – you’ve already lost!

While H1 always will be your blog content headline, make use of H2 and H3 stylings as well. I don’t recommend using H5,H6 – it will just create confusion.

• H2: use it to describe the main article topics, usually you’ll have 3-5 major points in an average article
• H3: goes to explain some lesser points, Notice how I formatted this article? There was a paragraph section (H2) and since I was explaining a lot of different sub-topics (H3) there, I dropped it down for much easier reading!

Just go with H2 and H3 and you’ll do great! If you need to separate your content even more I would suggest using bullet points or numbered lists, but more about them later.

Here are some fonts for you to pick from which will help your headlines get noticed – 40 Awesome Free Fonts for Big Headlines

Bullet points, numbered lists

Use bullet points or numbered lists whenever you’re listing something. See how I did it with headings description? Readers will easily recognize that I have created a list and explained similar points and list points are easy to scan and read. No wonder list posts have been so popular, for most readers, the only way they read a post is by quickly scanning it, bookmarking it and then they go on to the next site.

Images

I work hard to find the right images, because I believe visual memory is the strongest one! If you read a post and want to go back again you may not remember site names or web addresses, but you will definitely remember a well designed, visually appealing site! How about using screenshots from a website or product you’re featuring?

However if your article isn’t about websites or online tools, it’s still a good idea to find the RIGHT images which visually convey your opinion or stand. Many bloggers don’t take this point serious though they should! Visual presentation is so powerful! I bet most of you reading this article right now always start with wire-framing or sketching your design to get an idea of how it will look! We make notes on paper because it’s a way for our thoughts to become real, isn’t it smart to get visual in blog posts too? If you’re writing about fear – show a desperate man in a picture, if you talk about power – show skyscrapers, freedom – sky, clouds! Help your readers get their imagination working!

Quotes

Do you remember writing essays and quoting very well known authors to lend a certain auhtority to your work? Great, relevant quotes will make you look more professional – good, relevant quotes show you know what you’re talking about and who the pioneers or leaders in your industry are. This is a great way to add some smart content to your article. You can use quotes to support your opinion, and then explain how they relate to the article topic.

To be honest I don’t do this often yet, just because I forget the sources to those great quotes and end up writing them in my own words, but when I am reading books, a great quote can be a powerful thing.!

Some people just can say something in a few words which we cannot!

Quote the most attention grabbing content in article! I’ve seen this a lot in newspapers, it’s a great way to get scanners to read your article just because they want to find where that quote has been used in context!

Using bold, italic

Bolding is used to emphasize just a few words or a sentence in the article. The previous sentence is an example of how I emphasized just those words which are crucial to explain how to use bold.

Italic is used differently, I usually use it for tips, comments I might have which seem little bit out of context. Basically italic is similar to bold, but draws less attention.

Interlinking

Oh, this is not directly related with blog post formatting, but I wanted to include it, because it will help you in the writing process! Once you feel you’re writing an article which has some points that you’ve already coveredt, link to that article! If you have any related resources to the post, let people know about them!

And yes, if you’ve found some great thought provoking article which could help your readers understand some points better – link to it! Yes, you’re linking outside, but because of valuable content people come back to you! With Twitter you don’t just link to your own articles all the time, you retweet (RT), it’s a great way to share some exceptional articles or tools you’ve discovered! You provide value – do it with your own articles too and your readers will appreciate you by doing so!

Typography Tools And CSS Frameworks With Typography In Mind

Here I found several tools to help you get started to improve your typography in web designs.

Awesome FontStacks

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code! This website will help you to remove the pain from guessing what kind of fonts you should use together! It will do the hardest part for you, you just have to choose which font stacks you want to use – sans-serif, serif, monospaced fonts. Fontstacks will automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste.

Type-A-File

A really awesome way to get your site up to typographic snuff. It uses traditional semantic HTML tags along with some additional semantic classes named after commonly occurring elements in print design to create a solid typographic toolkit for your website, whoever you are.

Pick from several different stylings and sizes..and then download your css file immediately!

FontSquirel : FontFace

Download hundreds of prepackaged @font-face kits which include multiple font formats, CSS and HTML code. This site is similar to FontStacks but it offers a much better variety of fonts.

Better Web Readability Project – CSS Library

The main purpose of this project is to contribute to better reading experience on the screen by using CSS typography library. View typography demo

The Golden Grid

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites. While this framework’s main intention is for grids, it has Typographic style too. View Typography demo

PX To Em

With a very simple function – convert, get CSS, learn, it’s all what this site does, but does its job well! Use Em’s because in that way when you zoom your browser, all other font elements will scale accordingly.

BluePrintCSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. View typography demo

BaseLine

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.View Typography demo

Atatonic CSS Framework

The Atatonic CSS Framework is a basic set-up of typography and grid tools. Atatonic is meant to make your web—life easier and is created to provide a stable grid and solid typography. View demo

InuitCSS

This framework does a lot of things, but we are looking at typography. inuit.css has some little typographical niceties built into it from the start. It also has a typographical scale and a (loose) baseline to get you well on your way.

Emastic

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. View typography demo & handy blog template.

BlueTrip CSS Framework

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going!View demo