Web fonts help to add life into designs. With so many types available, we have plenty of options to serve and style custom fonts.
Since Google Fonts directory was launched in May 2012, they’ve improved the quality of the fonts in their collection.
With more than 630 fonts for your website, the typefaces are free for commercial use. The fonts are easy to implement on your website, and the quality of typefaces keeps increasing.
The typefaces can also be downloaded and used in print.
One of the most important aspects of communicating with type is to establish a strong typographic hierarchy.
Font size and weight play a key role in establishing content hierarchy, especially for headlines and subheads. Generally speaking, bold, decorative, or more distinctive typestyles command attention and denote importance, but so can an ultra light typeface in the right setting.
The viewer’s eye is usually drawn to the largest-sized type first, then moves on to other elements. A well-designed composition will guide the reader to the headline and other important elements no matter where they are located.
I totally copied the previous paragraphs from a great article about typographic hierarchy by Ilene Strizver that appeared on an article for fonts.com website. Thanks Ilene
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
font-size: 12px;
font-size: 0.8em;
font-size: inherit;
font-size: initial;
font-size: unset;
Adjustment applied to a block of text or paragraph, to increase or decrease the average distance between letters.
Letter-spacing refers to a uniform adjustment to the spacing of a word or block of text affecting its density and texture. Kerning is a spacing adjustment of one or more specific pairs of adjacent characters that, because of the relationship of their respective shapes, would appear to be badly spaced if left un-adjusted.
Letter-spacing always works better for short lines of text in All Caps. When using “bold” style, some spacing can help with readability. For fonts where the letters are thick and wide, some letter-spacing is advice to be added. (font-footnote)
letter-spacing: normal;
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
With more free and paid fonts designed specifically to be display on screen.
Currently we use CSS Fonts Level 3 since October 2013, while since July 2017, W3C have been working on Level 4; that adds sections as “Font Variations”, “Font Rendering Controls”, “Color Font Support”, “Basic Font Properties”, among others. You can read more about Fonts Level 4 on this great article.
With new options like “Variable Fonts” and web platforms that allow DIY color fonts, one day, all creatives will be able to use their very own unique typefaces; with all the good and bad that this may bring.
