The line-height stuff was moved to the main css-cheatsheet.
css
Icon fonts
Google Fonts
Tools
https://www.youtube.com/watch?v=tO01ul1WNW8
http://digitalsynopsis.com/design/best-google-font-combinations-typeface-pairings/
https://www.sitepoint.com/8-distinctive-headline-fonts-to-make-your-content-sizzle/
http://www.mightydeals.com/deal/fontself-maker.html
http://www.sitepoint.com/stop-maiming-bodies-the-perils-of-pixel-font-size
http://www.sitepoint.com/css-properties-to-control-web-typography/
http://www.sitepoint.com/best-typography-ui/
http://www.sitepoint.com/improving-font-performance-subsetting-local-storage/
http://www.sitepoint.com/taking-guesswork-typography-web
http://webdesignledger.com/inspiration/55-examples-of-huge-typography-in-web-design
http://www.alistapart.com/articles/say-no-to-faux-bold/
What is a font stack?
A font stack is nothing special. It is just a group of fonts that you specify with font-family.
A font stack is a list of fonts in a CSS font-family declaration. The fonts are listed in order of preference by the Web designer. A font stack allows a designer to control the look of the fonts on the Web page even if the computer doesn't have the best font for the job.
Why is it important that you choose a group of compatible fonts for your font stack?
Due to different calligraphy, different fonts may appear bigger than other fonts. If we do not choose compatible fonts, your web site may end up looking quite ugly or not user-friendly to some users, or it may not look the way that you want it to look.
Some fonts, especially those specifically designed for screen, may appear wider and / or taller than other fonts. This means that these fonts have a larger aspect ratio. If you use fonts with different aspect ratio, some people may see your pages with a much smaller font size than others.
Verdana has a larger aspect ratio compared to Arial. Ideally, your font stacks should include a range of fonts that have a similar aspect ratio. Various font stacks:
- Wide sans-serif stack: Verdana, Geneva.
- Narrow sans-serif stack: Tahoma, Arial, Helvetica
- Wide serif stack: Georgia, Utopia
- Narrow serif stack: Times, Times New Roman
- Monospace stack: Courier, Courier New
How to create a good font stack?
- Pick the font you like.
- Determine which basic font-stack it belongs in
- Choose a preferred Linux variation and highly available variation
- Choose a preferred Mac variation and highly available variation
- Choose a preferred Windows variation and highly available variation
- Include a generic font family such as san-serif
- Make sure that fonts with white-space in names are wrapped in single or double quotes.
What is the difference between italic and oblique font style?
Italic text is nearly always a new font face within a certain font family. The italic face can be quite different from the normal face (for example, having extra and more elaborate serifs). The oblique face is simply a slanted version of the normal, upright text. A font family may have an oblique face, but if not, the user agent will create one by slanting the normal face.
User agents respond to the font-styles property in a fairly simple way. If the requested style is available as a separate face, then that face will be used. If there is no italic face in the family then oblique may be substituted. However, the user agent should not use an italic face if an oblique style has been requested, it should simply generate the slanted text on the fly.
What should browsers do if the italic font style is not available?
If the requested style is available as a separate face, then that face will be used. If there is no italic face in the family then oblique may be substituted. However, the user agent should not use an italic face if an oblique style has been requested, it should simply generate the slanted text on the fly.
What should browsers do if small-caps font-variant is not available?
Some fonts provide a small-caps face, but many do not. When one is not available, the user agent will either create a new face by scaling down normal uppercase letters, or simply make all letters uppercase in the normal size, similar to
text-transform: uppercase
What is faux bold and faux italic?
Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design. You can’t fault the browser for compensating. The text is supposed to be bold or italic, and if there’s no data available the browser has to do something. So bold appears as a smeared version of regular glyphs, and italic appears as regular glyphs pushed over into a slant. What your users see can be better or worse depending on their browser and the fonts you start with. Some browsers, like Firefox, smear their bolds more, making a mess of display type. Other browsers, such as Chrome, smear their bolds very little, so that the distinction between bold and normal can be lost. None of these faux faces come close to what you can get from a real font.
These faux face styles aren’t much of an issue with web-safe fonts, as most of these fonts include bold and italic styles.
Diplomata only comes in one face, so the @font-face rule you get is set up as font-weight: normal. Since headings usually have font-weight: bold applied to them, the browser smears the glyphs in an attempt to make its own bold. Diplomata, by default, had some elegant stripes in the letters’ main strokes and is already a fairly bold weight. The faux-bold the browser creates obliterates these details. You can fix this for Diplomata by adding font-weight: normal to your h1 styling. But this isn’t a good solution when your web font isn’t available (perhaps, you have to support an older browser that does not support web font) and you have to fall back through your font stack (perhaps we can use conditional comment). A better solution is to add an additional @font-face rule for your single-face web fonts to indicate that their normal weights can also be used for bold. Then you get the actual font for your headings and a bold fallback font when fallback happens.
If you follow the googleapi link for Diplomata in Internet Explorer, you can see the cross-browser @font-face rule Google provides. You can take that @font-face rule and add a copy to your CSS, changing the font-weight property to bold.
<link href='http://fonts.googleapis.com/css?family=Diplomata'
rel='stylesheet' type='text/css'>
<style>
@font-face {
font-family: 'Diplomata';
font-style: normal;
font-weight: bold;
src: url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot');
src: local('Diplomata'), local('Diplomata-Regular'),
url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format('embedded-opentype'),
url('http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
h1 {
font-family: 'Diplomata', serif;
}
</style>
<h1>Yikes!
This preserves the design of the font you chose.
Since Diplomata is fairly bold to begin with, it works as a heading with the normal face. If some other font in the stack gets used instead, the heading will still use a bold face. This duplicating @font-face rules trick can work with other web font services. In this example I’ve duplicated the rule that Google uses, but if you’re constructing your own rules you may want to check out @font-face rule advice from FontSpring, Font Squirrel, or Paul Irish. If your site uses a single-face display font, you can avoid faux faces by including extra @font-face rules.
Note that the CSS3-Fonts specification defines a font-synthesis property that could control whether faux bold or faux italic should happen for a single @font-face rule, but at the moment there are no implementations of this property. Duplicate @font-face rules are the only way to control this behavior in current browsers.
The problem of missing bold and italic faces is not limited to single-face web fonts. Many of the web font services let you accidentally omit font faces. Some seem set up to encourage faux faces, either making all of their @font-face rules normal weight and style, or defaulting to include only a single face.
Take Lora from Google Web Fonts as an example. If you follow the defaults, it only gives you one face of the font.
Some other web font services set up a separate @font-face rule for each font in a typeface family, each set to font-weight: normal. This can cause all of the single-face problems to surface even when bold and italic faces are available.
So when you use web font services, take the extra step to verify in a variety of browsers that what you’re getting is what you intended. Make sure your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. Do not assume that the web font service is giving you everything you need. If you’re taking the time to choose a beautiful web font for your site, make sure that you’re actually using the web font and only the web font to display your type.
