Simple Ways to Improve Typography in Your Web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 5

Simple Ways to Improve Typography in Your Web Design PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on
  • Presentation posted in: Internet / Web

In This article, you will focus on how to apply these fonts to web design using CSS and improve your typography the way you use them in your design projects. Let’s get started!

Download Presentation

Simple Ways to Improve Typography in Your Web Design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Simple ways to improve typography in your web design

Simple Ways to Improve Typography in Your Web

Design

When we talk about typography, many people including designers think

that it consists of only choosing a typeface and font size which fit to the

theme of a particular project. But there is much more in the room to

achieving a good typography.

Web designers often neglect the important details while choosing a

typography for their project. These details give the designer total

control, allowing them to create beautiful and consistent typography in

web designs.

In This article, you will focus on how to apply these fonts to web design

using CSS

using CSS and improve your typography the way you use them in your

design projects. Let’s get started!

web design

Measure

Measure

The measure is the length of a line of type. Long or short lines can

distract reader’s mind a lot. For optimum readability you want the

measure to be between 40-80 characters, including spaces.


Simple ways to improve typography in your web design

A simple way to calculate the measure is to use Robert Bringhurst’s

method

p {

font-size: 10px;

max-width: 300px;

}

Leading

Leading

Leading is the space between the lines in a body of copy that plays a big

role in readability. It improves the overall appearance of the text. A good

rule is to set the leading 2 2- -5pt

5pt larger

larger than

than the

the type

type size

size

To get the right spacing

body {

font-family: Helvetica, sans-serif;

font-size: 12px;

line-height: 16px;

}

Hanging

Hanging Quotes

Quotes

Hang quotes in the margin of the body of text. Hanging quotes keeps the

left alignment intact and balanced hence improving readability.

This can be achieved very easily with CSS using the blockquote element:


Simple ways to improve typography in your web design

blockquote {

text-indent: -0.8em;

font-size: 12px;

}

Vertical Rhythm

Vertical Rhythm

A continuous

continuous rhythm

consistent grid .To keep a vertical rhythm in CSS, spacing must be equal

the size of the baseline

baseline grid

grid.

rhythm in in the

the vertical

vertical space

space which keeps all the text on a

body {

font-family: Helvetica, sans-serif;

font-size: 12px;

line-height: 15px;

}

p {

margin-bottom: 15px;

}

Widows and Orphans

Widows and Orphans

A widow

widow is a short line or single word at the end of a paragraph. It can

disturb the reading experience, avoided by adjusting the type size,

leading, measure, wordspacing, and letterspacing.


Simple ways to improve typography in your web design

Emphasis

Emphasis

Emphasize a word without interrupting the reader. Italic is widely

considered to be the ideal form of emphasis.

Scale

Scale

A scale establishes

establishes a a typographic

typographic hierarchy.

hierarchy.

An example of a typographic scale defined in CSS:

h1 {

font-size: 48px;

}

h2 {

font-size: 36px;

}

h3 {

font-size: 24px;

}

h4 {

font-size: 21px;

}

h5 {

font-size: 18px;


Simple ways to improve typography in your web design

}

h6 {

font-size: 16px;

}

p {

font-size: 14px;

}

We are done here! Hope the article will help you to improve your

typography skills and the overall usability of your web design.

iMediaDesigns is an toronto web development and Online

Marketing agency for B2B and B2C clients in the luxury, fashion,

lifestyle and retail industries.


  • Login