A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.

Web Development

Using fonts and styles in HTML

Good post? Please, share it...
Pin It

A customer has asked me about the fonts used on a particular page of their site. I had to answer that I was sorry to say that it isn’t that simple and the following is a little complex, but explains everything that you need to know about the use of fonts and styles in modern HTML.Fonts

What you have to understand, first, is that HTML is very unlike something like Word. If you make a Word document, you are certain that the end-user has the same fonts , installed on their machine as you do, since both have Word (or a Word viewer) installed. However, with HTML, universality is the key. It has to work on any system and we don’t know what is installed on that end-user’s system.

Did you ever set a non-default zoom level or text-size, in your browser? Not everyone is viewing it (especially these days) in a ‘normal’ FireFox, IE, Opera, Chrome or Safari browser. Did you ever try to look at your site on a Mac or Linux machine? Did you ever look at your site on a simple mobile phone, which may ignore style, completely? You see, it must work reasonably well, function identically and look as much the same as is possible, in all browsers, regardless of settings , which is what both CMSs (Content Management Systems), such as Joomla and, also, my own work endeavors to achieve.

Therefore, we don’t deal with fonts, in HTML, in the same way at all, as a word processor. We use, instead, font-families. A font-family is a list of fonts. If the first font is not available, then the next is used and so on. If none of the fonts in the font-family are available, then the browser’s default font is used (usually either Courier or Arial, for Roman characters, such as used in e.g.  English and Dutch).

In fact, we don’t even directly deal with font-families. It is possible to attempt to force a font-family (and/or font-size), for a particular part of the text, in HTML, but this is not advised. Instead, CSS (so-called style-sheets) are normally used.

CSS makes life very easy, because something on a page is set to a style (which may also contain a font-family and may contain other stuff like bold, italic, font-color, back-color etc.). Everything, that is set to that style, inherits the elements of the style, such as the font-family. If we change a style in the style-sheet, then everything on the site, that is set to that style, instantly also changes, maintaining consistency, throughout the site.

Therefore, it is best that you do not mess with fonts in the HTML itself, but instead, if you want a particular piece of text to be different, you should tell the editor of your CMS (the customer uses the Joomla Content Management System and the JCE Editor), to use a particular style. If you want the font-family to change, for a particular piece of a page (e.g. a special heading), then you select that piece and then, in the editor, select a style. Please, do NOT select a font or font-size. It is not the ‘correct’ way to use HTML, even though, since it is possible to do, the editor gives you the possibility. If the style that you want does not exist, then you tell me (CSS expert) and I add that style to the style-sheet, so that you can select it from the editor’s drop-down. I have special tools to do all this with.

The default style set for the text body (the default style in the editor is set to ‘div’, which is a standard division of a page), on any page of your (the customer’s) site, according to the template in use, is:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 150%;
color: #646464;

This is the default that the editor uses for the main body of text, so should not be changed, unless you want something special for that page or a part of it. If you (the customer) want a different font-family for the text, throughout the site, then tell me (the webmaster with CSS knowledge) and I will change the style-sheet setting for ‘body’ and the entire site will change the font etc. appropriately, which maintains consistency.

e.g. On the page that the customer was talking about, the URL of a certain sentence has been set to italic.  The editor translated the request for italics and this piece of text was given the tag ‘<em>’.

For anything with an ‘<em>’ tag (em=emphasis), there is a different style:, em.file, {
font-family: “Courier New”, Courier, monospace;
font-style: normal;

It is this that makes the sentence appear differently than normal. The editor was smart enough to change the style, rather than mess with the HTML and add an <i> tag (for italics).

Web-safe fonts

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

The customer also asks if they can use the same font on the other pages as well. I answered that everything does use the same style, throughout, except for specialized items, such as special headers. The text body is the same, throughout = font-family: Arial, Helvetica, sans-serif.

I also had to explain that, if they feel that  Joomla is a lot more difficult and complicated to work with than they thought, some of that is because of the way in which HTML works, needing to be universal. A lot of the reason is that they wanted specialized customization.

I had told them, at the beginning, that sticking to the chosen template (and, also, therefore, the style-sheet defaults) is the cheapest and least complicated way of doing it. It is only when one wants special customization, that I have to write code and then the work-load goes up – and, therefore, the costs. In addition, the complexity, of how to do what you want to do, may also be increased.

The best way, for the customer, I told them,  is to let the editor do it all for them. It is reasonably smart and should take the complexity away.

Just please don’t use the font or font-size settings. Use only the style drop-down (default item is ‘Div’), the editor buttons – bold, italic, underline or strikethrough and, of course, you can also use the four alignment buttons, the 2 list buttons, the indent and outdent buttons, the superscript and subscript buttons, the 2 color buttons etc).

For anything very special (e.g. a special header with bold gold letters in a font-family that includes Verdana), do ask me, first, please, so I can create an appropriate style for you to use.

I know this is all very technical information, but I hope it does answer any queries, on this subject, adequately and it is the only way to explain. It can’t be done in a simple sentence, as I’m sure you can tell.

7 comments to Using fonts and styles in HTML

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>




This site uses Akismet to reduce spam. Learn how your comment data is processed.