Five easy ways to improve
typography in code
Good typography brings order to the page and increases legibility. It allows people to process information faster. Here are 5 easy ways you can use CSS to improve
your typography.
go easy
go easy
Measure
The measure is the length of a line of type. To a reader’s eye, a long or short line can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type.

A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around
65 characters per line. For example:
p {
font-size: 10px;
max-width: 300px;
}
Leading
Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text.

A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should
work well on the web.
body {
font-size: 12px;
line-height: 16px;
}
Vertical Rhythm
A continuous rhythm in the vertical space keeps all the text on a consistent grid so that proportion and balance are retained throughout the page, no matter the type size, leading or measure.

Lets say you’re using a 15px baseline grid, meaning that there are 15px between each baseline. The line­spacing would be 15px and the space between each paragraph would also be 15px.
body {
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}
Scale
A scale is important because it establishes
a typographic hierarchy that improves readability and creates harmony and cohesiveness within the text.

An example of a typographic scale defined in CSS:
h1 {
font-size: 21px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
p {
font-size: 14px;
}
Emphasis
Giving emphasis to a word without interupting the reader is important. Italic is widely considered to be the ideal form of emphasis. Always try to limit your­self
to using only one.

Ways of creating emphasis with CSS:
h1 {
font-style: italic;
}
h2 {
text-transform: uppercase;
}
Resources


best websites of the world