I actually have right now two questions:
1) What font faces are preferred for a website? Right now I really like 'Segoe UI', but it's only available on newest Windows systems like Vista and 2008 Server. So I have defined a sequence:
font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;
I do not really like the look of all of them except for 'Segoe UI'. Any suggestions on what nice font could be used in addition to that? I also tried 'Trebuchet MS', it looks great on documents, but not really on a page.
2) Any way to specify with CSS different font sizes for each particular font-familiy? Like 'Segoe UI - 9px', Tahoma - 8px etc. This is probably not possible, but maybe there are some tricks?
I also know I will get lots of comments now to use relative font sizes, but I don't want that. I have some graphics in my design which are not stretchable. If the user or browser default lead to the font rendered with a varying size the design will quite soon fall apart. I prefer having design with font size limitations to not having design at all.
1) What font faces are preferred for a website?
See this page concerning safe web fonts.
2) Any way to specify different font sizes for each particular font-family through CSS?
Nope.
Soon, #font-face will be supported by all major browsers, and you'll be able to use any font you want on your website.
Until then, have a look at Cufón or sIFR.
Use the right typeface for your site. It's not as simple as saying "this is the best font for websites". Here are two quotes (read principles) from Robert Bringhurst's "The Elements of Typographic Style":
"Typography exists to honor content."
"Choose faces that suit the task as well as the subject."
On another note, unless a serif face really suits the website, sans-serif faces are more appropriate for digital media.
With regards to your second point, Phil Oye has recently released FontUnstack, a jQuery plugin which will tell you what font is being used for a given element. The element will be given a class (i.e. "set_in_gill_sans") through which you can apply specific styles for different typefaces.
Also, check out the font matrix (1.5 years old) and these well thought-out font-stacks.
1) What font faces are preferred for a website? Right now I really like
'Segoe UI', but it's only available on
newest Windows systems like Vista and
2008 Server. So I have defined a
sequence: font-family: 'Segoe UI',
Tahoma, Arial, Helvetica, Sans-Serif;
I do not really like the look of all
of them except for 'Segoe UI'. Any
suggestions on what nice font could be
used in addition to that? I also tried
'Trebuchet MS', it looks great on
documents, but not really on a page.
What font faces are preferred? This is a tough question. There are three main computing platforms that each have their own set of base fonts. Then, some software like Adobe Creative Suite, the Microsoft Office suite, or even software as simple as the Powerpoint 2007 viewer for XP install fonts for the user. There's lot of charts on the web that list commonly used fonts.
For a website, you're going to want to use legible fonts. Most of the screen fonts commonly used on the web are pretty legible. The fonts you mention for instance are good examples. The most legible on screen font is Verdana, although it's generally considered to be ugly. Arial is always a safe choice.
Just be careful with that Segoe UI declaration though: if a Windows XP user has that font, it probably won't be legible with anti aliasing disabled.
For headings, you can go custom and use techniques like sIFR and Cufon to replace the text with non-native system fonts.
A quick note on size: most sites tend to set a really small font size. 13 pixels really is the minimum for long texts (see relative readibility). A font with a small x-height like Times should only be used for headings or in a large enough size (e.g. 15+ pixels).
2) Any way to specify with CSS different font sizes for each
particular font-familiy? Like 'Segoe
UI - 9px', Tahoma - 8px etc. This is
probably not possible, but maybe there
are some tricks?
No, this is not possible. You can make assumptions about the browser and OS people are running via Javascript and thus make assumptions about the fonts they have installed, but it's a lot of work for a relatively small gain. I would advise against it.
Re. your font choice, I would consider usability to be a key requirement (unless you're going for a deliberately styled format).
Neilson made a study and found Verdana or Arial to be optimal choices in terms of legibility.
CSS3 will natively support downloadable fonts (you won't be promted to download, they will just work on the fly), so you will be able to use whatever typeface you want. We just have to wait for it a but since it will be available only in Firefox 3.5 and Opera 10.
You can also use classic fonts like: Arial/Helvetica, Verdana, Georgia, or even Times Roman for great visual impact. You just need to find the right font-size and contrast with other elements on the page.
Just personally, I like Verdana and Georgia, though they are only Mac/Windows-"safe". In your case perhaps it's best to select second-choice font which has the same metrics as your first choice.
Most major browsers already support #font-face so you can use any openly available font.
Google Web Fonts hosts some free fonts to choose from:
There are also paid websites like Typekit that will host paid fonts for you and let you buy them:
Related
I am working on a theme for a new website. We had some professional graphics help us design the theme. For the front page, they took and tweaked the Agency theme.
If you download that theme (it is free) and search for the agency.css file and open it, there is one CSS line to indicate the default font of the page:
body
{
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
As we can see, the specified fonts in font-family start with "Roboto Slab", then it goes on with "Helvetica Neue", "Helvetica", "Arial", and finally, the default "sans-serif" that the browser would be happy about.
Only the "Roboto Slab" font is a "serif" font, all the others are "sans-serif" fonts...
As a designer, would you say that this is a mistake? Because if your computer does not include the font or if the font is somehow not available at the link above, it would go from a "serif" font to a "sans-serif" font... That seems wrong to me.
There are two different aspects you should consider:
Providing different font families for the same text is no longer needed in modern web.
This is a legacy technique back from when fonts were required to be installed on a machine in order to be used for rendering a web page. Since we now are able to provide fonts as css files and load them using #font-face declarations, (which I assume your website uses), the fallback only occurs when the machine rendering the website fails at loading the provided font file (this is extremely rare and, when it happens, it is likely that fonts rendering with a different face is not the most serious rendering problem of the page - so the best course of action would probably be to just reload the page).
If the second and the third font options were provided by the designer (provided they are professionals) the fonts were probably matched with your other main font and, even though it's part of a different type, it will still complement the other font well.
I'd like to point out I actually have design related studies but have turned into a professional coder over the past ~10 years.
Choosing and matching fonts is a complex process and more often than not, the right size, weight or style weigh in more than whether the font is serif, sans-serif, monotype or fantasy. There's no recipe for matching fonts and usually it involves taking a step back and looking through dimmed eyes. It's also important one also tests with multiple types and combinations of content, to make sure they all are balanced and look well.
In design, following strict rules gets you above average results, but never in the top 10%. Those are most times based on bold actions and inspiration. Don't measure the designer's work using a ruler. If you really need to, measure it in terms of user behavior. If there's an increase in traffic/response/commitment, you got a good design.
The answer you will get from a question like this will to some degree be based on opinions, rather than facts, references, or specific expertise. My opinion is that all important browsers support web fonts. If the web font is used correctly it will show correctly to 99.9% of the site visitors. The other fonts listed is just fallbacks for the 0.1% visitors that for some reason is not able to load the custom web font. The most important thing is that they will be able to read your content. If you would like to control the fallback font, you should choose a set of system native fonts present on all platforms. You could use courier, but that is a mono spaced font (fixed-width) and I doubt it is more readable or fancy. A sans serif is also more modern than e.g. Times and therefore closer to the modern look of Roboto Slab.
I have noticed that at Google Fonts they never use fantasy as fallback class in font-family. For all script and typical fantasy fonts, they use cursive.
I wonder if this is a hint that chrome does not support fantasy as fallback class? For that to be the case, fallback font-classes would have to be handled by the browser via implemented lists for typical serif, sans-serif etc. fonts. Alternatively, the browser could query the os for such lists?
What happens when the browser needs to fallback to say a serif font on the clients system? How will it get info on the installed serif fonts?
I haven't been able to find an aswer to this, so I hope that someone here might know about it. I know web safe fonts and all that are probably about to become things of the past, but they still have some relevance.
Typefaces don't map to any generic font families mechanically. They're only categorized that way in their family names and on font listings such as Google Fonts and Adobe Typekit.
You could create a font stack that consists of a sans-serif family, a serif family, and ends with the fantasy keyword:
font-family: Helvetica, 'Times New Roman', fantasy;
And browsers would treat it the same: use whichever family comes first that is supported, or fall back to the generic family if it comes to that.
I would expect all browsers to implement at least the five generic families defined in CSS2.1 and css-fonts-3: serif, sans-serif, cursive, fantasy, and monospace. But which faces each generic family maps to exactly is less predictable — for one, most browsers actually offer the user the ability to change their preferred default serif, sans-serif and monospace families. And even then, the entire list of installed fonts is available for selection in every category, which suggests that even browsers can't (or at least don't) differentiate between categories of fonts.
The default preferences that a browser ships with are based on assumptions of which fonts are most likely to be preinstalled on any given system.
I can't answer why Google Fonts doesn't seem to specify fantasy in any of its font stacks.
I've set up a test case:
http://codepen.io/jaycrisp/pen/NxOrOy
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
I see different fonts in chrome on mac, so that shows that chrome does support the fantasy keyword. I see the same font on Safari and Chrome too.
I'm seeing papyrus for the fantasy font, which I think is a Mac OS bundled font. I'm also seeing the same font on Firefox and Safari.
I would guess that the reason google font uses cursive instead of fantasy is that if you're using such a font, you're probably going for a very specific look to your site. Replacing this font with something like papyrus is going to totally ruin it. Well, using Papayrus will totally ruin your site anyway, but that's another matter.
i have been building a website using a windows development box so far. the site has turned out well, until i noticed that the same pages appear a little out of place as far as alignment is concerned in a linux dev box. the issue is because of the font being used in both these boxes.
here's my css -
font-family: tahoma, sans-serif;
the entire site has been designed with tahoma as the base font, and so if the font changes, because of the inherent width/height difference between fonts, they might end up taking more space for the same word than tahoma, and result in layout issues. Even in the windows box, if tahoma is not available, then the site would fallback into sans-serif which would most likely cause problems. so to say, the site is designed for tahoma users :D (i know this is bad practice).
while this maynot be a problem since tahoma will be present in all windows boxes, linux/ other OS users would face layout problems.
how do i resolve this issue..? i still want to use tahoma in the site.
In my experience you can never expect that a font on a web page will look exactly as you expected in all browsers / OSs. Flash does come close with the embedding feature, but for good ol HTML/CSS the best thing I've seen is TypeKit. I looked and they do not have Tahoma, but they likely have something similar to it.
As a general rule, I try to design my pages to allow for font displaying variations.
Our web designer suggested using Cambria as a font. In looking at various font references online, we couldn't find authoritative sources that listed recent (post 2010) browser support for various fonts.
Which sources do you use to determine how supported a particular font is? I'm guessing there are reports for fonts like there are for browsers, but we haven't found anything reliable yet.
I think you don't need to worry too much about native browser support for fonts. Instead you should consider two things:
Using #font-face
Using a good font stack
Combine the two and you should be safe, no matter what.
For #font-face, you can generate the font and make it cross-browser compatible.
Start by licensing the font from here ( http://new.myfonts.com/search/cambria/ ) or somewhere else.
Then generate the #font-face code with Font Squirrel ( http://www.fontsquirrel.com/fontface/generator ) or another service. The result will be cross browser compatible in nearly all cases.
Finally, add the font to a font stack so that there is a fall back in case something happens with your custom Cambria font. Something like this for whichever rule you are working with: font-family: Cambria, Georgia, Palatino, Times New Roman, serif;
Of course, you could also choose a similar free font through Font Squirrel or use Google's Web Fonts.
More good info here: http://sixrevisions.com/css/font-face-guide/
You won't find Cambria and the other fonts in its family natively installed on computers running anything but Windows Vista and newer, and you'll only have luck on other systems if they have Office 2007/2008 and newer installed.
As long as the font is present on a user's computer, any browser should be able to handle it, even without the need for #font-face embedding. The idea of font embedding is to get a browser to recognize and use a font that isn't installed on a user's system, rather than getting the browser to understand and render the font.
You're not going to find something that works on everything. Try Cambria, Georgia, serif; Georgia's a reasonably close substitute that's very widespread, and the serif default will work anywhere.
Discussion here: http://en.wikipedia.org/wiki/Cambria_%28typeface%29
The browser doesn't have much to say as to the fonts it supports; they are dictated by the fonts present in the underlying OS.
It's hard to find support references for particular fonts. However, #font-face is widely supported and regardless, a good font stack with fail-safe fonts is a must-have.
How to make cross browser, cross platform and all devices compatible css font stack?
You cannot guarantee the fonts that will be used on a mobile device the same way you can guarantee which fonts are available on a normal computer.
A safe bet is to use a generic font family that can be interpreted by the mobile browser to show you the relevant font, e.g.
font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
The best solution is to always supply a generic font family after any specific fonts:
font-family: "Foo Regular", "Bar Sans", sans-serif;
Maybe this link can give you some more ideas:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Using the above font families never gave me problems.
Perhaps this can help you on your quest: Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite
It points out in 15.3 of the W3C Recommendation regarding the 'font-family' property that you should have fallback fonts in a font stack so that your website visitor has some viable choices.
The 'web safe' font stacks I use, which cover most if not all devices are as follows:
/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}
This covers headers, paragraphs, monospace for code samples, fantasy for special items, and cursive for emphasis. You may just need one for headers (H1~H6) and another for body text:
body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}
Check the following cheatsheet from 2010 that includes Linux and iOS. It gives the average percentages for usage between Windows, Mac, Linux, and iOS: Web Safe Fonts
Some "Web Safe Fonts" links from Google top:
https://www.cssfontstack.com/
http://web.mit.edu/jmorzins/www/fonts.html
Forget about cross browser cross platform font stacks, the web examples usually only care about windows and OSX for basic latin, they fail on international languages and Linux, and new form factors.
Linux never used the same fonts as Windows and OSX for licensing reasons, and font design tools have become mature enough you find a lot of diversity nowadays (not that creating a large encoding font is easy, but a lot of users only care about fonts that cover their particular language).
Font creation has become cheap enough big corporations (including mobile manufacturers) now like to differentiate by commissioning new fonts for big releases (new device or major OS version).
When font surveys were still popular the DejaVu font family had a lot of reach on Linux, that may not be the case anymore. DejaVu and Arial have different metrics.
Just use generic CSS font families in your stack, avoid any helvetica derivative, do not use a design that depends on particular font metrics and you'll be ok.