is there any standard choice of the font family and font size for a general web site .. or something of that kind which are normally used...
Not really, although you'll get a good feel for what is generally used if you spent some time on the internet.
There is always a problem (when using fonts online) that your user may not have the font. This is why the font-family lets you provide multiple fonts. Here is a helpful list of fonts that exist on Windows and Mac OS. As of CSS3 we have #font-face which lets us use fonts that we provide.
Well, there is no standard for fonts at all, except for the generic fonts defined in CSS.
Helvetica is a font that is available on most systems. Use the generic font sans-serif as fallback. Arial is the Microsoft equivalent of Helvetica.
The size is a little tricker as it can vary somewhat between implementations of a font, but 14px normally gives you the same size as this text.
body { font-family: Arial, Helvetica, sans-serif; font-size 14px; }
Well there is no general guideline on which font to use on a website it is always best to use web friendly fonts which are defined on WikiPedia as
Web-safe fonts are fonts likely to be
present on a wide range of computer
systems, and used by web content
authors to increase the likelihood
that content will be displayed in
their chosen font. If a visitor to a
website does not have the specified
font, their browser will attempt to
select a similar alternative, based on
the author-specified fallback fonts
and generic families.
You will find more here
link text
Related
I have spent a long time reading about the advantages of using "open sans", "promima nova", "Helvetica Neue" and some other new fonts which I am told are all better than those fonts we have been using for a long time.
But when it comes down to it. Will most people actually notice any difference and what if I just use Arial in my font-family with no backup font at all.
If my users are using the modern browsers / modern operating systems from the last couple of years will that be a good choice for a very readable font or is there another font stack that people can recommend?
One recommendation I saw was to use the stack:
font-family: Arial, Helvetica, sans-serif
But why? Is not Arial installed on every computer?
With services like Google Fonts and others like it (no affiliation), this question becomes less important. Such font services allow you to choose pretty much any typeface that you want, and be guaranteed that it will work for all of your visitors.
This may not directly answer your question, but it does clarify the fact that a user's installed fonts aren't as important anymore, and there's no reason to fall back to plain old Arial.
No. To begin with, most smartphones do not have Arial.
The other part of the question asks for font recommendations, which is off-topic at SO.
The reason why fallbacks are recommended is that indeed, not all computers have widely distributed fonts available. In particular, most Linux distributions do not come with Arial or other Microsoft fonts due to licensing issues, such as Ubuntu. Setting a sans-serif fallback is not a bad idea, since if the font is missing, then it may default to a serif family font, which may be very different from the intended font.
To answer your question, Arial will not necessarily work on every computer and mobile device, it will work on most, but it is still good practice to leave a generic fallback.
I know not every platform contains the same font faces. What would happen if a font face that is not known is used? Is it possible to be downloaded or would it choose a different font face?
The browser will use a default font. You can control your styling by coding backup fonts to use if your first pref isn't supported.
Below is an example of styling backup fonts in CSS.
P { font-family: Cambria, Georgia, Serif }
Hope this helps!
Generally, a browser will default to a font that the computer has installed, usually Arial (windows) or Helvetica (mac). There are several solutions, my favorite resource for web fonts is Google Web Fonts, absolutely free. If you have to have a particular font, Typekit has the largest selection, but be prepared to pay!
With Google Web Fonts, literally just google: Google Web font similar to (The Font you want).
Hope this helps!
If the name of font not installed in the user’s system is mentioned in a font-family declaration (or in a <font> tag), then that name is simply ignored. No automatic download takes place. (Downloadable fonts, aka. web fonts, are a different story, but for them, you really specify font URLs and assign names to them.)
The font used is then determined by other factors. If other fonts are listed in the font-family list, they are tried. Failing that, the font of the parent element is used. Ultimately, if we then come to the top level, the document as a whole, without finding any font name known in the system, then the browser’s default font is used. This font is typically changeable by the user, though few people change it. Typically it is Times New Roman in Windows systems.
I designed a small template which uses Trebuchet MS font (PSD). Now, if I use this font in HTML/CSS it
looks quite different. Is there any possibility to achive the same or a better quality ?
Maybe Google Webfont ? Is there a simmilar font ? Or should I use CSS #font-face?
CSS:
font-family: "Trebuchet MS", sans serif;
Best regards
The basic answer is No.
You're talking about font anti-aliasing (or font smoothing). Photoshop gives anti-aliasing in four flavors (Sharp, Crisp, Strong, Smooth). Browsers don't do the same thing, generally the OS will control font anti-aliasing.
more on browsers and fonts: Type rendering: web browsers
No, unless you can use flash generated or image fonts, etc. You're looking at the differences in how two different beasts render fonts and it's mostly stuff outside your control.
#font-face is new and doesn't work in all browsers. In order to maintain cross browser support, you can use the JS based Cufon to deliver whatever font you want.
http://cufon.shoqolate.com/generate/
Don't know if this is the right place to ask, but I am quite new to html, have made a complete site and uploaded to web server.
But i tried visiting the site on another device, and the font shows differently, but then when i go onto a website which has a different font it shows fine on their site.
Am i doing something wrong?
Cheers
Adam
Because the computer doesn't have that font, and you didn't include the font to download, just an instruction as to which one to use.
The CSS #fontface instruction lets you direct a browser to a file with a font.
A simpler and lighter approach, is to suggest back-ups. E.g. Instead of:
font-family: arial;
You could use:
font-family: arial, verdana, sans-serif;
The first will try to use Arial, and if it isn't available, will just use the default font for the browser (which could be a serif font like Times, for example).
The second will try to use Arial. If that's not available, it will try to use Verdana. If that's not available, it will try to use the default sans-serif font for the browser, which should at least be closer than a serif font.
Here is a great tutorial on how to create custom fonts on a website.
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
It will also explain which types of fonts are compatible on certain browsers
I am new to designing pages, and am starting off with basic HTML.
<font face="arial">Text</font>
I understand that the above displays Text in arial font face.
What are all the options that I have to put in place of arial? Is there a list or something for this?
First, start using instead of using <font> tag, use CSS (ie. font-family - Reference: CSS font-family Property)
Then you can look over Font Squirrel to see all sort of fonts that you can use and are easy to adapt with your site.
For full tutorial on CSS start doing this entire series of tutorials with CSS : CSS Tutorial
Also here is a list of safe web fonts: List of Web Safe Fonts
What are all the font faces that I can use?
You can choose what ever font face you like, but keep in mind that the browser will fall back on some other font if it does not have the particular font you're requesting to use.
The best thing you can do is to stick to some commonly available font faces. Here are a few good lists of such fonts:
list of safe fonts for use on a html webpage
HTML Font Face: Here is most common fonts
HTML Goodies Font List
Well now with google code you can do much more. Reade here: http://www.google.com/webfonts
below are the list of html "safe" font faces:
arial, arial black, comic sans ms,
courier, courier new, georgia,
helvetica, impact, palatino, times new
roman, trebuchet ms, verdana
Hope this helps
You should never use a element anymore, use CSS instead. Here's a list of the available font-families: http://www.w3.org/Style/Examples/007/fonts
I'd recommend that you use sans-serif instead of Arial.
Its a best of both worlds for mac (causes Helvetica to be displayed) and windows (causes Arial).
Furthermore check out http://www.google.com/webfonts if you want to embed some open-source sexy fonts
As has already been pointed out, you'd be best reconsidering use of the font tag and looking into using CSS (specifically the font-family and related rules, especially font stacking).
As far as what is commonly cited as "web safe" goes, it all depends what fonts are available on your users' computers, as these are the fonts that their browser will work with.
Also look into the CSS #font-face directive, and its usefulness with services like Google webfonts, Typekit, Font Deck and similar. It opens a whole other set of possibilities.
EDIT to remove broken link.