Let us learn something new about fonts.
As we have discussed in previous post about Typography Explained - I, Fonts are one of the important element in the design layout. Bigger and larger fonts for headlines and topics will make the user to understand the content easier.I have discussed few points on typography rules, which makes you in becoming 85% professional designers/writers.
The typographic quality of your document or a website is determined largely by how the body text looks. Why? Because there’s more body text than anything else. So start every project by making the body text look good, then worry about the rest.
In turn, the appearance of the body text is determined primarily by these four typographic choices:
Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.
Line spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” line-spacing option to achieve this. The default single-line option is too tight; the 1½-line option is too loose. In CSS, use line-height.
Line length is the horizontal width of the text block. Line length should be an average of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabets. eg:
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd
In a printed document, this usually means page margins larger than the traditional one inch. On a web page, it usually means not allowing the text to flow to the edges of the browser window.
Font choice is a final one. The fastest, easiest, and most visible improvement you can make to your typography is to ignore the fonts that came free with your computer (known as system fonts) and buy a professional font (like my fonts equity and concourse, or others found in font recommendations). A professional font gives you the benefit of a professional designer’s skills without having to hire one.If that’s impossible, you can still make good typography with system fonts. But choose wisely. And never choose times new roman or Arial, as those fonts are favored only by the apathetic and sloppy. Not by typographers. Not by you.
That’s it. As you put these five rules to work, you’ll notice your documents starting to look more like professionally published material.Then, if you’re ready for a little more, try the summary of key rules.
Web fonts:
When the page loads the browser tries to write text to the screen using a specific font that is stored and available on the computer running the browser. If the font is not on the computer, then the browser won't be able to display the font, and the website will not show any text!
Now, you may wonder how this can happen when your computer has so many fonts installed on it? The reason is because there are mainly 2 widely popular operating systems used today - Windows and Mac OS X - and each comes pre-installed with different fonts.
Most Frequently Used Fonts in the Web:
The use of web fonts has continued across the globe. Nowadays, designers are no longer using content with standard system fonts like Arial, Georgia, Tahoma, Veranda, etc.. Here we can categorize the web fonts that are commonly used in the website designs.
Web fonts are bringing the aesthetics of print design to the web. These are the few points which help UI designer's to make best use of them. Few years before, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same.
After the evolution of Web 2.0 in earlier 2010, there is wide spread out of @font-face in all major browsers and a new web open font format WOFF, which has led to a technical revolution and the rise of a number of web font hosting services.Here are the few tips for web fonts before using it in website.
1. Be Selective:
Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).
2. Put Type First:
Once free from traditional 'web safe' fonts like Verdana and Georgia, make design choices based on the typefaces you use. Building a composition outward from the type produces very different results to swapping fonts into an existing design.
3. Take your Time:
The web may move at lightning speed, but quality typesetting requires lots of patience.
4. Look for Specific Suggestions:
Before selecting fonts, justify why that font is used in the website. Use appropriate fonts for the website or application which is designed.
5. Be Mindful of file Size:
While designing, please keep the size of your font as an essential one. Headings and topics related texts are given in bold and legible fonts which can make user understandable. And also the font size used for content must be precise and legible to read. Do not use display or decorative fonts for content texts unless it is not necessary
6. Stay across browser updates
Some of the downloaded web fonts are not compatible in older version browsers. Check web fonts before using it in website.
7. Try Before you Buy:
Most of web fonts are not free. User have to buy it before using. Before buying a new font, try it once and make sure it suits the project.
8. Consider free web fonts
Try to use free web fonts available around the internet, which mostly supports all modern browsers.
Source: praticaltypography, creativeblog
As we have discussed in previous post about Typography Explained - I, Fonts are one of the important element in the design layout. Bigger and larger fonts for headlines and topics will make the user to understand the content easier.I have discussed few points on typography rules, which makes you in becoming 85% professional designers/writers.
The typographic quality of your document or a website is determined largely by how the body text looks. Why? Because there’s more body text than anything else. So start every project by making the body text look good, then worry about the rest.
In turn, the appearance of the body text is determined primarily by these four typographic choices:
Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.
Line spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” line-spacing option to achieve this. The default single-line option is too tight; the 1½-line option is too loose. In CSS, use line-height.
Line length is the horizontal width of the text block. Line length should be an average of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabets. eg:
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd
In a printed document, this usually means page margins larger than the traditional one inch. On a web page, it usually means not allowing the text to flow to the edges of the browser window.
Font choice is a final one. The fastest, easiest, and most visible improvement you can make to your typography is to ignore the fonts that came free with your computer (known as system fonts) and buy a professional font (like my fonts equity and concourse, or others found in font recommendations). A professional font gives you the benefit of a professional designer’s skills without having to hire one.If that’s impossible, you can still make good typography with system fonts. But choose wisely. And never choose times new roman or Arial, as those fonts are favored only by the apathetic and sloppy. Not by typographers. Not by you.
That’s it. As you put these five rules to work, you’ll notice your documents starting to look more like professionally published material.Then, if you’re ready for a little more, try the summary of key rules.
Web fonts:
When the page loads the browser tries to write text to the screen using a specific font that is stored and available on the computer running the browser. If the font is not on the computer, then the browser won't be able to display the font, and the website will not show any text!
Now, you may wonder how this can happen when your computer has so many fonts installed on it? The reason is because there are mainly 2 widely popular operating systems used today - Windows and Mac OS X - and each comes pre-installed with different fonts.
Most Frequently Used Fonts in the Web:
The use of web fonts has continued across the globe. Nowadays, designers are no longer using content with standard system fonts like Arial, Georgia, Tahoma, Veranda, etc.. Here we can categorize the web fonts that are commonly used in the website designs.
Web fonts are bringing the aesthetics of print design to the web. These are the few points which help UI designer's to make best use of them. Few years before, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same.
After the evolution of Web 2.0 in earlier 2010, there is wide spread out of @font-face in all major browsers and a new web open font format WOFF, which has led to a technical revolution and the rise of a number of web font hosting services.Here are the few tips for web fonts before using it in website.
1. Be Selective:
Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).
2. Put Type First:
Once free from traditional 'web safe' fonts like Verdana and Georgia, make design choices based on the typefaces you use. Building a composition outward from the type produces very different results to swapping fonts into an existing design.
3. Take your Time:
The web may move at lightning speed, but quality typesetting requires lots of patience.
4. Look for Specific Suggestions:
Before selecting fonts, justify why that font is used in the website. Use appropriate fonts for the website or application which is designed.
5. Be Mindful of file Size:
While designing, please keep the size of your font as an essential one. Headings and topics related texts are given in bold and legible fonts which can make user understandable. And also the font size used for content must be precise and legible to read. Do not use display or decorative fonts for content texts unless it is not necessary
6. Stay across browser updates
Some of the downloaded web fonts are not compatible in older version browsers. Check web fonts before using it in website.
7. Try Before you Buy:
Most of web fonts are not free. User have to buy it before using. Before buying a new font, try it once and make sure it suits the project.
8. Consider free web fonts
Try to use free web fonts available around the internet, which mostly supports all modern browsers.
Source: praticaltypography, creativeblog
No comments:
Post a Comment
Thanks for your comments. It'll be published after admin's approval !