eSparkBiz Design & Dev Blog

Typography And Web Design

With CSS, the manipulation of many typographic properties can be carried out – one of these properties is the font-family. What is the difference between font and typeface? Letterforms packaged in a collection are referred to as ‘font’, while ‘typeface’ is what is created by the designer. Font families which you prefer can be determined through CSS – this is referred to as the ‘font stack’.


Now let us look at font-weight. Stylesheets can be used for the manipulation of font-weight. A character’s stroke’s relative thickness is what is referred to as font-weight. Various weights can be used to produce many fonts. The TrueType scale (from 100 to 900) can be used to determine a typeface’s weight. For control using CSS, it is recommended to use actual weight variants to produce fonts.


For improved readability, increasing spacing between uppercase characters is recommended. Tracking is the traditional term for letter-spacing. Overall character density is affected by tracking. Readability can also be improved with the help of kerning. Kerning refers to adjusting the spacing between letterforms. Designers can use JavaScript tools for kerning.


Adjustments should be made after considering the vertical space between lines. Text that looks congested and which is difficult to read will result if the vertical space between lines is less. Difficulty in reading will also occur if the vertical space between lines is too much. In typography, the use of relative measurements is recommended. Line-height can be defined and made a function of font-size using ems.


Leading is the traditional term used for the space between lines. The addition of half-leading over and below characters is done during line-height calculation. Justification refers to aligning text – left, right or centre. The text-align property is used for styling with CSS. Ragged edges are removed when text is fully justified – however, this can create channels or rivers within the text body.


The selection of typefaces can be a difficult job – there are many factors to be considered. For example, one has to look at whether the typeface is serif or sans-serif. It is said that serifs help in increasing the ease of reading. However, sometimes serifs can also increase the difficulty in reading.

Whether serifs actually help in improving readability is debatable.


Many fonts come in both serif and sans-serif varieties. Readability should not be confused with legibility. Easily recognizing individual words and letters is referred to as high legibility. Being able to easily go through a body of text and easily absorb it is referred to as high readability.


The vertical space between a lowercase character and the baseline are referred to as x-height. Higher readability usually results with a use of a relatively higher x-height. However, one will have to compromise on the relative height of ascenders and descenders while going for a relatively higher x-height – this can cause the appearance of less spacing between each line. A typeface’s personality is determined by a letterform’s stroke. The weight and style of strokes of strokes can vary within a single letterform, especially in serif typefaces.

[easy-social-share buttons="facebook,twitter,google,linkedin" counters=1 counter_pos="inside" total_counter_pos="hidden" style="button" point_type="simple" url="" text="Typography And Web Design"]
Similar Posts

Let's work together