8 easy ways to improve typography in your design
Many people, including designers, think that typography is just the choice of typeface, font size and whether it should be normal or bold. For most people, that’s it. But to get good typography you need much more and, as a rule, these are details that designers often ignore.
These details give the designer complete control, allowing him to create beautiful and consistent in terms of typography solutions in design. While all of this applies to different types of media, in this article we will focus on how to apply them to web design using CSS. Here are 8 simple ways to use CSS to improve typography and, consequently, the overall design convenience.
The size of the typesetting line. For the reader's eye, long or short lines are tedious. Long - destroy the rhythm, as the reader is difficult to find the next line of text. The only situation in which short lines are acceptable is a small amount of text. For best readability, the string length must be between 40 and 80 characters, including spaces. For a single-column design, 65 characters are perfect.
')
A simple way to calculate the length of a string is to use Robert Bringhurst’s (Robert Bringhurst’s) method, which multiplies the font size by 30. That is, if the font size is 10px, multiplying it by 30 will result in 300px or approximately 65 characters per line. The code will look something like:
I use px since it makes the calculations much easier, but you can use em.
Leading is the space between the lines of text in the body of a note and it plays a large role for readability. Proper line separation makes it easier for the reader to follow the line and improves the appearance of the text. Leading also changes the typographical color of the text, which is the density or tone of the composition.
There are many factors affecting leading: headset, font size, its fullness, circumstances (?) , Line length, the distance between words, etc. The longer the line, the more leading. The larger the font size, the smaller the leading. A good rule is to set leading at 2-5pt more than the font size , depending on the typeface. So if the font is 12pt, then for web spacing should be 15pt or 16pt.
Determining the correct leading requires a certain dexterity, but below is an example of what your code should look like:
Quotes should be processed in the margins of the text. If the quotes merge with the text, they break the left margin and violate the rhyme of the text block. Handling quotes does not violate left-justification and balance, and therefore improves readability.
This is easily achieved with CSS using the blockquote element:
Negative indenting will depend on the typeface, font size and margins.
The baseline grid is the basis for a consistent typographic rhythm on a page. It allows readers to easily follow the text, which in turn increases readability. The constant rhythm in the vertical space keeps the text on a constant grid so that the proportions and balance remain unchanged across the page, regardless of font size, leading or length of the line.
In order to maintain a vertical rhythm using CSS, it is necessary that the distance between the elements and the line spacing (leading) is equal to the size of the baseline grid. Suppose you are using a 15px grid of baselines , implying that there is 15px between each grid line. The leading will be 15px and the distance between paragraphs will also be 15px. Here is an example:
This allows each paragraph to be placed on the grid, while maintaining the vertical rhythm of the text.
The top hanging line is a line of text or a word at the end of a paragraph. The bottom hanging line is a word or a short line of text at the beginning or end of a column that is separated from the rest of the text. Upper and lower hanging lines form clumsy pieces, interrupt the reader's eyes and affect readability. This can be avoided by increasing the font size, leading, the length of the line, the distance between words and the letter spacing, or by manually entering line breaks.
Unfortunately, there is no easy way to prevent dangling lines with CSS. One of the ways to get rid of them was described above, another one - jQWidon't , a plugin for jQuery, which places non-breaking spaces between the last two words of the element.
It is important to highlight words without distracting the reader . Italic type is often considered an ideal form of selection. Some other common forms of selection are: bold, capital letters, small capital, font size, color, underline, or another typeface. No matter which one you use, try to use only one. Such combinations as a capital - bold - italics distract and look awkward.
Here are some ways to select using CSS:
Keep in mind that the font-variant only works if the font supports a capital.
Always typeset according to the scale, whether it was the traditional scale developed in the sixties and with which we are all familiar, or the one that was invented by you. Scale is important because it creates a typographic hierarchy that improves readability, creates harmony and improves the cognitive suitability of the text.
An example of a typographic scale defined in CSS:
When creating a block of text with alignment on the left or right edge, do not forget to clean the torn edges (jagged lines) and balance the text without any unexpected "holes" or clumsy forms of text blocks. Torn edges can distract the reader. A good edge is “soft”, uniform, without too long, or too short lines. You can't control it with CSS, so you need to make manual edits to the text to get good edges.
You can improve the edges with the help of hyphenation , but unfortunately CSS is powerless here. Perhaps in the “near” future, CSS3 will provide some control ... But despite this, all is not lost. There are a number of server-side and client-side solutions that implement automatic hyphenation. For example phpHyphenator , Hyphenator or online generators .
Hyphenator.js is a Javascript library that performs automatic hyphenation on the client side.
Here is a list of thematically related articles and books that will help you with the details.
Antonio Carusone (Antonio Carusone) is a graphic designer from New York and the author of AisleOne , a blog dedicated to graphic design and typography, The Grid System , a steadily expanding resource on the grid system and part of the Thinking for a Living Network .
I did the translation of Raven or Silent Imp .
I am a freelance coder, programmer.
And I really hope that this article will bring pleasure to someone, or even benefit.
I would be very pleased with your feedback.
These details give the designer complete control, allowing him to create beautiful and consistent in terms of typography solutions in design. While all of this applies to different types of media, in this article we will focus on how to apply them to web design using CSS. Here are 8 simple ways to use CSS to improve typography and, consequently, the overall design convenience.
1. Sizes
The size of the typesetting line. For the reader's eye, long or short lines are tedious. Long - destroy the rhythm, as the reader is difficult to find the next line of text. The only situation in which short lines are acceptable is a small amount of text. For best readability, the string length must be between 40 and 80 characters, including spaces. For a single-column design, 65 characters are perfect.
')
A simple way to calculate the length of a string is to use Robert Bringhurst’s (Robert Bringhurst’s) method, which multiplies the font size by 30. That is, if the font size is 10px, multiplying it by 30 will result in 300px or approximately 65 characters per line. The code will look something like:
p {
font-size: 10px;
max-width: 300px;
}I use px since it makes the calculations much easier, but you can use em.
2. Leading
Leading is the space between the lines of text in the body of a note and it plays a large role for readability. Proper line separation makes it easier for the reader to follow the line and improves the appearance of the text. Leading also changes the typographical color of the text, which is the density or tone of the composition.
There are many factors affecting leading: headset, font size, its fullness, circumstances (?) , Line length, the distance between words, etc. The longer the line, the more leading. The larger the font size, the smaller the leading. A good rule is to set leading at 2-5pt more than the font size , depending on the typeface. So if the font is 12pt, then for web spacing should be 15pt or 16pt.
Determining the correct leading requires a certain dexterity, but below is an example of what your code should look like:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}3. Handling quotes
Quotes should be processed in the margins of the text. If the quotes merge with the text, they break the left margin and violate the rhyme of the text block. Handling quotes does not violate left-justification and balance, and therefore improves readability.
This is easily achieved with CSS using the blockquote element:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}Negative indenting will depend on the typeface, font size and margins.
4. Vertical rhythm
The baseline grid is the basis for a consistent typographic rhythm on a page. It allows readers to easily follow the text, which in turn increases readability. The constant rhythm in the vertical space keeps the text on a constant grid so that the proportions and balance remain unchanged across the page, regardless of font size, leading or length of the line.
In order to maintain a vertical rhythm using CSS, it is necessary that the distance between the elements and the line spacing (leading) is equal to the size of the baseline grid. Suppose you are using a 15px grid of baselines , implying that there is 15px between each grid line. The leading will be 15px and the distance between paragraphs will also be 15px. Here is an example:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}This allows each paragraph to be placed on the grid, while maintaining the vertical rhythm of the text.
5. Upper and lower hanging lines
The top hanging line is a line of text or a word at the end of a paragraph. The bottom hanging line is a word or a short line of text at the beginning or end of a column that is separated from the rest of the text. Upper and lower hanging lines form clumsy pieces, interrupt the reader's eyes and affect readability. This can be avoided by increasing the font size, leading, the length of the line, the distance between words and the letter spacing, or by manually entering line breaks.
Unfortunately, there is no easy way to prevent dangling lines with CSS. One of the ways to get rid of them was described above, another one - jQWidon't , a plugin for jQuery, which places non-breaking spaces between the last two words of the element.
6. Selection
It is important to highlight words without distracting the reader . Italic type is often considered an ideal form of selection. Some other common forms of selection are: bold, capital letters, small capital, font size, color, underline, or another typeface. No matter which one you use, try to use only one. Such combinations as a capital - bold - italics distract and look awkward.
Here are some ways to select using CSS:
span {
font-style: italic;
}
h1 {
font-weight: bold;
}
h2 {
text-transform: uppercase;
}
b {
font-variant: small-caps;
}Keep in mind that the font-variant only works if the font supports a capital.
7. Scale
Always typeset according to the scale, whether it was the traditional scale developed in the sixties and with which we are all familiar, or the one that was invented by you. Scale is important because it creates a typographic hierarchy that improves readability, creates harmony and improves the cognitive suitability of the text.
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;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
}8. We clean torn edges.
When creating a block of text with alignment on the left or right edge, do not forget to clean the torn edges (jagged lines) and balance the text without any unexpected "holes" or clumsy forms of text blocks. Torn edges can distract the reader. A good edge is “soft”, uniform, without too long, or too short lines. You can't control it with CSS, so you need to make manual edits to the text to get good edges.
You can improve the edges with the help of hyphenation , but unfortunately CSS is powerless here. Perhaps in the “near” future, CSS3 will provide some control ... But despite this, all is not lost. There are a number of server-side and client-side solutions that implement automatic hyphenation. For example phpHyphenator , Hyphenator or online generators .
Hyphenator.js is a Javascript library that performs automatic hyphenation on the client side.
Resources for further study
Here is a list of thematically related articles and books that will help you with the details.
- Five Simple Steps to Better Typography
Mark boulton - Incremental leading
Mark boulton - Compose to a Vertical Rhythm
Richard Rutter - 24 Ways - Setting the Web to a Baseline Grid
Wilson Minor - A List Apart - Setting Web Type to a Baseline Grid
Craig Grannell - Opera - The Elements of Typographic Style Applied to the Web
Robert Bringhurst - How to Size Text in CSS
Richard Rutter - A List Apart - Baseline Rhythm Calculator
Geoffrey grosenbach - Detail In Typography
Jost hochuli - The Elements of Typographic Style
Robert Bringhurst - Thinking with type
Ellen lupton - Grid Systems in Graphic Design
Josef MĂĽller-Brockmann
about the author
Antonio Carusone (Antonio Carusone) is a graphic designer from New York and the author of AisleOne , a blog dedicated to graphic design and typography, The Grid System , a steadily expanding resource on the grid system and part of the Thinking for a Living Network .
About the translator
I did the translation of Raven or Silent Imp .
I am a freelance coder, programmer.
And I really hope that this article will bring pleasure to someone, or even benefit.
I would be very pleased with your feedback.
Source: https://habr.com/ru/post/56625/
All Articles