The design method – Responsive Website Design is now quite popular and it likely that most are already familiar with it. For those who have doubts, Responsive Website Design is about designing websites so that the users have an optimal viewing experience no matter what devices they are using to access the internet.

However when it comes to a website, the content also matters. You can have a fancy design with all the bells and whistles but if the content is not up to the mark, it is of little use.

Thus when we are thinking of a responsive web design, we also need to think about the website typography and not just the columns, girds and images.

To make sure you get the typography right as well it is necessary to follow the correct techniques, obey the standard rules and even take into consideration whether the website is responsive or not. This article will act as a guide and answer almost all of your questions on this topic.

The very basics of Typography:

A lot of attention is given to the color, shape and size of the design elements of the layout of the website. Getting the typography right is quite similar and be achieved by selecting the right font type, size and color as well as the making sure it does not break when viewed from an alternative platform or device.

The following is a list of some popular terms pertaining to Typography:

• Font: The font (file) defines everything about a font; like the size, height and various styles.

• Typeface: This is also known as font family and in a way helps select the design of font. For example Arial and Sans-Serif are two examples of a typeface.

• Baseline: This is a good way to define the position of the font. For example this can be “top”, “middle”, etc.

• Cap Height: This is the height of the capital letters over the baseline.

• X-height: This is the distance between the baseline and the midline, also called corpus.

• Descenders: This is the part of the letter that is below the baseline

• Tracking: This the variation of the space between letters often called letter spacing.

• Kerning: The process of adjustment of space between individual glyphs of different width.

• Leading: This the line height and is the distance between the baselines of successive lines.

A few useful Web Typography tips:

When it comes to Web Typography, the presentation matters a great deal. Which means you need to give more importance to these elements to help maximize the effect of your typography:

• Color

• Type

• Image

• Texture

Furthermore here are 5 tips on what you can do:

1. The selection of the typeface: A majority of the websites do not give a lot of thought to the selection of the typeface and simply use the common one used by almost everyone. For example the most common fonts used are Arial and Helvetica. This may be fine for many sections of your website however not all.

It does pay to put a little more effort into this topic and select the font by occasion especially the titles. For example if it is a Christmas theme you could choose fonts like Candy Cane or Snowinter, etc. (Source: http://www.dafont.com/theme.php?cat=804).

The text will still be readable if you do not do this, however if you do it is bound to create a better effect and even generate a reaction from the visitor.

2. Web Fonts: Almost all browsers these days support web fonts now. This is done via the “@import” command and used in this way:

@import url(http://fonts.googleapis.com/css?family=fontname);

This can also be done via a standard link in the following method:

<link href=http://fonts.googleapis.com/css?family=fontname rel=’stylesheet’ type=’text/css’ />

What this means is that you can use fonts hosted on third party websites like Google Font, Fontdeck, Typekit etc.

Though this is very good alternative to buy fonts and also saves time spend in manually preparing the fonts in a folder on your server it should be used wisely. This is a good technique but on the larger scheme of things this technique will use a lot more resources thus slowing down your website.

Hence it may be a good idea to abstain from using this on the first page of your website.

3. Color selection: The color combinations of a website deserve a lot more time that you give it. Getting this right is tougher the very design of the website. There are many reasons why this is tougher that you imagine. The basic reason is that it depends a lot on personal preference and hence if a designer is being creative and using some fancy colors these many not necessary be fine with the client who has other things in mind.

An easy way out is to spend some time creating the appropriate color combination for the font based on the colors used in the rest of the website and also follow these rules:

• Select proper color contrast between the text and the background. A good source for this information is the W3C.

• Make sure you do not ignore the color blind people. For example it may not be possible for color blind people to spot color with different hue.

• Make use of one of the several tools available on the internet for the color contrast selection. (http://snook.ca/technical/colour_contrast/colour.html).

4. Text vs Images: “When the going gets tough, the tough get going” – This is a very popular expression and applies to this situation. It often happens that when the client requirements for a heading or a section of text gets to fancy, the designer will dump “text” and opt to do it by images. This not a very good idea.

What I am trying to explain here that even if it is hard to create the exact fancy fonts as requested by the clients doing by text instead of images will be beneficial even if it means a little extra effort.

5. Compatibility: At times the browser compatibility issue can also arise during the process of developing or designing a website. This often happens when you need to clip text on to an image. The common issue here is that even though you may be able to get it right for one browser, not all the browsers will show the same effect. An easy way out again is to use a plugin – CSS Browser Selector. (http://rafael.adm.br/css_browser_selector/)

Web Typography tips for a responsive design:

We already practice manipulating all the fundamental typographic elements with the help of CSS but you cannot expect to be able to do the same when designing a responsive website. The reason being that there is more to it than just adjusting the size of the font on the respective viewport.

Thus here are 4 tips to help you get started on this:

1. Using ‘rem’: When it comes to the size of the font ‘pixels – px’ is very popular. However almost every designer must have faced the issue of font size on browser resize. Thus many of the designers also make use of ‘ems’ which makes them relative to the parent element.

But there is yet another option and that is ‘rem’ (root em). This is not a fixed size and is equal to the font size of the root HTML element. It is also supported by most browsers as an added advantage.

Here is a quick example:

html { font-size: 16px; }

h1 { font-size: 1.9rem }

h2 { font-size: 1.8rem }

The way this works is that 1rem is 16px (as per the html CSS described first)

The size of other elements, h1 and h2 are defined using ‘rem’ and hence will change as the viewport changes.

Here is a quick example of how this can be implemented for different viewports:

html { font-size: 16px; }

@media {max (max-width:480px) {

h1 { font-size: 1.9rem }

h2 { font-size: 1.8rem }

}

@media {max (max-width:640px) {

h1 { font-size: 1.7rem }

h2 { font-size: 1.6rem }

}

2. CSS3 pseudo classes: CSS3 allows us to manipulate the text to a great extent by creating different styles for all the different sections we desire. CSS3 also has pseudo classes that come in handy at times.

Here is a short list of CSS3 pseudo classes:

• first-of-type: Allows to modify the first child of the paragraph tag (”<p>”)

• first-letter: Allows to modify the first letter of the paragraph tag (”<p>”)

• first-line: Allows to modify the first line of the paragraph tag (”<p>”)

3. Control your Measure: When it comes to responsive design it is important to control your measure (also known as the line length). This is in fact vital to making the website truly responsive.

Looking ahead:

Responsive design is constantly gaining in popularity. As we get to middle of 2015 the number of people opting for a responsive design is expected to explode and be higher than ever before. In fact there are already several more enhanced responsive designs available with new responsive design features. At a time like this the importance of getting the typography right is even more important.

Alakmalak has been developing websites since a while and there have been several trends changes in website design over the years. This makes the designers well prepared to deliver new, creative and innovative designs to our clients.

• Important tips when designing a responsive website
• Web Design and Typography when designing a responsive website