All About Choosing the Right Font for a Website

All about choosing the right font for a website

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.

What are good web development fonts?

See this list of browser safe fonts.

It's Windows+Mac centric, but still applies. They do include a linux distribution screenshot, as well.

Which web-safe fonts are more readable to eyes as a body text? Which web-safe fonts should not be used?

I've found Verdana to be very easy on the eyes for large blocks of text.
However the font-family alone won't bring major improvements.

You should be careful with the width of your text block. Popular usage shows that anywhere between 12 to 16 words per line is comfortable for the eye.

Also be sure to have a balanced line-height so the vertical distance between rows gives enough whitespace. Breaking large blocks of text into paragraphs that have a bottom padding/margin that's at least twice the size of the line height makes them stand out better.

I don't believe there's a silver bullet for sizing fonts on headings. I do recommend you go with elastic sizing (em not px) for fonts. This makes the content more easily adaptable on various screen sizes and resolutions.

Whatever you pick you should pay attention to a clear distinction between heading sizes as well as font-weight or coloring. It's generally a bad idea to make differences between headings very subtle.

I'd recommend the h6, last heading, to be at least a bit larger than the generic text block and in bold font-weight. It would be confusing to make it look the same as an element that wrapped in a STRONG tag.

Making the font-size for P, OL, TH and TD the same I believe is partly a matter of taste but more importantly a matter of scope.

If your TABLE shows pricing options, I'd most definitely go with larger fonts for TH and TD elements in order to focus the user's attention.

I'm trying to choose between 3 or 4 font style on my website

Just learn step by step or pay someone to do it.

Here is a start, learning to listen to select change.

<html>
  <body>
    <select id="myfont">

      <option value='robotFont'>font 1</option>
      <option value='secondFont'>font 2</option>
      <option value='uglyFont'>font 3</option>
    </select>

  <script>
    const fontSelector = document.getElementById('myfont');
    fontSelector.addEventListener('change', () => {
      console.log("fontSelector change", fontSelector.value);
    });
  </script>
  </body>
</html>

Next steps could be

have some css class to specify the font, like .robotFont , ...
modify the eventListener to switch the font class on body

Font size and line height for a Web page

As with every other "what's the best" question in the world, the answer to this is "there is no 'best'" :-)

For font-size, arguably the 'best' is whatever the user has chosen themselves, either as the default or the minimum. In other words, leave the font size alone for main body copy, and only increase it for headings. You might consider decreasing it by a very small amount for non-critical content. 16px is generally the browser default.

For line-height, values between 1.3 and 1.5 are typically recommended for good readability, although this varies with font face and line length.

On the web, what fonts should I use to create an equivalent experience cross-platform?

Here are some good up-to-date listings of the most-installed fonts for PC, Mac, and Linux:

Sans serif font sampler and survey results

Serif font sampler and survey results

Hope this helps your decision!

How can I determine what font a browser is actually using to render some text?

Per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

This answer original referenced the "Font Finder" plugin, but only because it was from 4 years ago. The fact that old answers linger like this and the community cannot update them is one of the few remaining failures of Stack Overflow.

How can I be sure all of my users have this font-family?

You can declare multiple fonts using the font-family rule. If the first font on the list is not available, the next will be used as a fallback. For example, if you set your font-family to the following:

font-family: 'Bookman Old Style', Arial, sans-serif;

the browser would at first try to load Bookman Old Style font, and if not available, it would try to load Arial font, and if it's not available too, it would load the default sans-serif font.

So when the user doesn't have this font installed, you can choose similar font which maybe is installed, so your webpage wouldn't look so ugly.

If you own this font (i.e. either it's free or you bought it), you can use @font-face declaration to include it on your page. For example:

@font-face {
  src: url("http://example.com/your-font.woff2");
  font-family: 'Your Font';
}
body {
  font-family: 'Your Font', Arial, sans-serif;
}

In this case browser will fetch the font from the URL you specified and apply it to <body>. If the request for font fails, or before the font has been loaded, browser will apply the fallback font (i.e. Arial).

Fonts on the Web

Safari, and to a lesser extent, Firefox 3 have support for @font-face in CSS, which lets you use custom fonts. You need to have the appropriate licence to distribute the font files though. These articles explain it in more detail:

http://www.css3.info/preview/web-fonts-with-font-face/
http://www.alistapart.com/articles/cssatten
http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/

Font Awesome 5 Choosing the correct font-family in pseudo-elements

Simply use all of them in the same font-family and the browser will do the job. If it doesn't find it in the first one, it will use the second one. (Multiple fonts in Font-Family property?)

By the way, the correct font-family is Free not Solid because the difference between Solid and Regular is the font-weight and both have the same font-family. There is no Solid and Regular in font-family, only Free and Brands.

You may also notice that almost all the Solid version of the icons are free BUT not all the regular version are free. Some of them are included in the PRO package. If an icon is not showing it's not necessarely a font-family issue.

All the Light and duotone version are PRO ones.

.icon {

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";

}

.icon1:before {

  content: "\f099";

  /* TWITTER ICON */

  font-weight: 400;

}

.icon2:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 900;

}

.icon3:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/

}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<div class="icon1 icon"></div>

<div class="icon2 icon"></div>

<br>

<div class="icon3 icon"></div>

All About Choosing the Right Font for a Website