Posts Tagged ‘fonts’

CSS Standard Fonts for Websites

Tuesday, November 20th, 2007

With Vista released Microsoft replaced the “Standard Web Fonts” with the so cold “C fonts” - Cambria, Calibri, Candara, Consolas, Constantia, and Corbel. To take advantage of them (if available on the user’s computer) you can use the following font-family CSS definitions.

1
2
3
4
5
6
7
8
9
10
11
font-family: Helvetica, Calibri, Arial, sans-serif; /* or */
 
font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; /* or */
 
font-family: Candara, "Trebuchet MS", Trebuchet, sans-serif; /* or */
 
font-family: Cambria, "Times New Roman", Times, serif; /* or */
 
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, serif; /* or */
 
font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

If you don’t have the “C” fonts you can download and install Microsoft’s Powerpoint Viewer 2007 which contains them.

For visual comparison check this pdf

Accessible Non-Standard Fonts in WebSites

Saturday, October 20th, 2007

Lets face it - the web is limited, web sites are created for different browsers, video modes, operating systems, but to be even more frustrated we have to use the same old, boring fonts. For a special project I needed more artistic and out of the box general feeling(not the standard Verdana, Times new Roman and Arial) and since creating pictures was not an option (due to SEO and Accessibility reasons) I found different approach - sIFR - a collection of Adobe Flash and Javascript files. Generally the idea is designing the page as usual, include the Javascript file, edit the flash file to include your fancy font and point out in the HTML which headings you want replaced - and it is all SEO Friendly and Accessible since search engines and screen readers still see your original headings.

More instructions can be found on sIFR’s homepage and if you are still curious check out the demo