Skip to main content

Two thousands words on css typography with examples.

Typography is getting a place in this digital web trends. It is originated in the mid 15th century, on those late 15, typography was just bound to only specialized craft. Considering the books, magazine design and public works. Billboard and product packaging are the physical world examples where the typography is used to represent and to visualize the art of creating written words.

Well, unfortunately there will be no such things in this article that represent the actual art with text but will cover all the aspect of modern web typography implementation to get better visual effect within the content layout.

I will cover the art with typography in the next part of typography article. Today, we will discuss about the importance of css typography in web design, and which elements must be focused to get better result with typography. So let’s get started!

The truth is of your article content is that your readers actually never want to read full article unless it is attractive and informative. They scan the page to see how the content is organized and how the information is presented. If they found it interesting they will give their time to read the content, otherwise they don’t need a jury tattoo to judge your content and may be will become the reason of high bounce rate of your website.

It’s all based on the way the words appear on your page. This is the time where you need to actually call the typography concept and as matter of fact graphic designers love to use typography to emphasis the depth of a webpage to grab the reader’s attention.

Basically, css typography is not all about “which font to use” but as just we discussed typography is to represent art through the use of fonts. Today web designers have thousands of fonts to choose from and as we all feel the same, whenever too many choices take place, choosing the right one become more harder.

1-fonts

Choosing a best font is a matter of artistic skills that a designer must have in order to specify the best font for the projects. It takes time to get kind of eye which can make choosing a right font bit easier but anyhow let’s see the importance of typography in modern web design.

Importance of good typography

Let’s get straight to the point. Your site’s bounce rate is probably going to be high if you have wrongly implemented typography. Here’s why? Use of typography is comprehensive as it make the whole page very delightful and properly arranged.

If you have a good typography it will make your readers to stick till the end of an article and will also encourage them to look after another one from related post. So that was the thing, you have to direct your readers and the tool you got to get direction for your reader is typography so let’s have a look at a typography hierarchy.

It all start with typography hierarchy.

Typography can help you to create visual hierarchy by simply emphasis on size, color and style or some important elements within the content layout. Typography hierarchy is a concept, which implementation allows readers to easily navigate through the content and this concept has a ability of visual effect that stand out from a boring only text-Y information.

In case you didn’t understand this hierarchy intro properly, then let me tell you that use of visual hierarchy means styling the key elements to get more attention from the reader. Just like content of the page, there are article title, meta data and other specific sub heading must be styled to get a complete whole lot of visual effect.

So which aspects should be considered to get a better typography implementation? Here they are:

  • Size
  • Typeface
  • Measure-width
  • Color
  • Weight
  • Vertical rhythm
  • Hanging punctuation

Size

2-size

First thing first, for better visual effect the font-size should be 16px(12pt) and line height should be 24px(18pt). This combination is a default value and very interactive for size of the fonts but the question is do you really follow this default values?

I can’t answer this question but i can definitely show you the direction where you can find or choose the answer so let’s grab a depth within this aspect.

As we are talking about the default sizes, i think we should consider a scale of sizes from 6pt to 72pt. I think you have seen that scale on software like photoshop, notpad, wordpad and many others. This is the scale that we are discussing with different font sizes.

3-scale

This scale is developed in late 16 by an European typographer. The only purpose of this scale is to represent the font with a specif size that could be more pleasing to eye otherwise there have been 5pt value instead of 6pt and as Wikipedia showing they have specific name and here is the list:

  • 6pt: nonpareil
  • 7pt: minion
  • 8pt: brevier or small text
  • 9pt: bourgeois or galliard
  • 10pt: long primer or garamond
  • 11pt: small pica or philosophy
  • 12pt: pica
  • 14pt: english or augustin
  • 18pt: great primer
  • 21pt: double small pica or double pica
  • 24pt: double pica or two-line pica
  • 36pt: double great primer or 2-line great primer

Many choices are available for font sizes so let’s make our mind a little busy among all the sizes that are mentioned above. Just note that this sizes are in points and while using pixels you have to be little careful as the pixels are different in different platforms. For example, windows platform and mac pro have different resolution with different pixels. To overcome this little hurricane you should use ems or percentages based measurement.

So if you want to get with 16px scale with percentage based measurement that number must be 145% for the default value 16px. To convert the pixels into percentages you can simply help yourself by just googling it.

This basic implementation of typography take just a little time, but will get you a very attractive look after getting done with that. Okay so it’s on you to choose the best size that suits your website layout.

Typeface

Well it’s not the same thing as font. Typeface refers to a group of characters, numbers and letters that share and convey the same design and has ability to provide high readability.

A very common misconception is that Arial is a typeface, it’s not a font and a typeface must be chosen with care as they make typography even better with line with variation and squarish layout. Image shows that Grotesque typeface have a more squarish and linear layout that Arial.

4-typefaces

Typography should be implemented with considering the importance of user’s attention, so it’s ideal to keep in mind while choosing a typeface that the one you choose should complement the content.

If you are looking forward to make use of two typefaces just make sure that they should be different to get a balanced look, but must be similar enough to adjust and match with each others contrast and also keep in mind that not to go beyond limitation while choosing the typeface and not to choose more than two or three, cause you are not making a portfolio of your favorite typefaces.

Measure and width

Body of type has a specific width which is used to give context to the content. Measure can be simply defined as the amount of words or character per line and the ideal measure should be 10-12 words per line. The units that can be used for measurement are

  • Point
  • Pixels
  • Pica
  • ems
  • Millimeters
5-measure

What makes this aspect an interesting one?
Fluid grid. The interesting thing is that how can a measure or width of a content complement itself for an adaptive feature of fluid grid design for any size. The grid would have to adapt to that change in size.

One more feature that can take place with the measure is a combination of leading and tracking. Just note that leading is equal to the line-height and tracking is equal to the letter spacing. You can style this element as per your suits with css. When playing with the typography this element must be considered to get an epic layout of content.

Color

I don’t have to explain anything as the word itself can express the typography in 16 million way. A perfect combination of color plays an important role for typography just like styling the heading and content with different colors

Weight

Weight of the font or typeface is a matter of interaction that how a reader will get the idea behind using the lighter or bolder font. Weight can literally helps to make a content more specific and compelling.

The key thing of using a weight is to show that which part of your content is more important especially subheading. This is the place where emphasis take place in typography for a compelling content.

Vertical rhythm

Use of vertical rhythm will make flow of content consistent in terms of baseline grid. It helps to increase the readability of a reader as it comes with nice horizontally and vertically adjusted layout. Actually a baseline grid is the base for consistent typography throughout the content and it gives a dynamic grouping of measure when looking after fonts or typefaces.

6-vertical-rhythm

You can see the clear difference between those two content layout with baseline grid in the image.

Hanging punctuation

Hanging punctuation usually got a concept of correctly hanging of bullets or quotes to the content and lists. For example images shows the difference between correctly and wrongly hanged bullets and same for the quotes.

7-hanging_punctuation

Basically, it’s all about placing a bullet points, punctuation marks before a specific paragraph. Justified paragraph is a good practice to use for the implementation of quotes and in turns it avoid the flow towards the disturbance of reader.

It can be achieved easily with the css styling for block quote element as follows:


blockquote{
    text-indent: -0.4130em;
    font-size:1em;
}

Well that were the various aspects of visual typography hierarchy. Careful control of this aspects is a key path to the interactive and considerable typography. As a matter of fact the designer of any website or affairs that contribute a lot of content must have a concern with typography cause that’s the thing that will make a large content readable and interactive.

Designer should follow the hierarchy to improve the understanding of audience and a typography must interpret where reader find himself in foggy context.

As we discussed about baseline grid the organizational grid implementation is also important in typography because of it’s consistent look. Most designs are of two column grid but rather than relying on two column structure, a multi-column grid implementation will enhance the use of typography.

8-typo_grid

For the better communication the visual hierarchy is the key element and it specify the typographic context between reader and a page itself. Expressing the typography in this way works a lot to point out the communication cause it is very efficient and it also make the process of reading more enjoyable through the proper arrangement of elements and texts.

Eventually, having a typography based content layout can also help as an off-topic for designer. It’s SEO and it is probably an off-topic for designers. Actually typography has no direct effect on seo of your site but having a good visual hierarchy will make your reader to go through all of the content of an article making user experience more interactive. Google always rank website higher as per the better user-experience provided and as a result one can get higher in seo, but it’s a far conception and also indirect as well.

Okay, enough of that off-topic, it’s the discussion of visual hierarchy and there are several other things that aslo affect the typography and reader’s attention. Here they are:

Use of dumb quotes

9-dumb

Instead of using straight up and down quotes why don’t use a curvy and elegant quotes. It will surely look better that the old one.

Too much emphasis

We didn’t discussed much about use of emphasis on visual hierarchy. It’s basically used to highlight or lighten the important text from the whole content. Use of too much emphasis can break the reader’s flow of consistent reading, so the key thing is not to specify more than one emphasis at the same line.

As the typography hierarchy emphasis on readability and user experience a well organized content will always contribute within. A perfect content can be set up using the implementation of typeface. It all varies for paragraph content and for the sake of user experience a well defined typeface encourage the readability of a content.

Here we will stop our discussion of typography and visual hierarchy but as it make sense, that most websites rely on text to convey their content and information, it is true that the era of typography will never end cause it is a visual language and a phenomenal concept of web industry.