HTML was created with the intent of putting ultimate control of the presentation in the hands of the end user. This principle makes its most resounding impact when it comes to typography. Take a look at your browser's preferences and you will find that you (and every other surfer) are able to specify the fonts and sizes that you prefer for online viewing.
For anyone accustomed to designing for other media, this loss of font control is cause for major frustration. From the time they discovered the Web, designers (and their corporate clients) have been pushing for ways to control typography in order to produce attractive and predictable web sites.
Great strides have been made in this effort since the early days of the Web and HTML 1.0; however, as of this writing, the font issue is still unfolding. Here we discuss possible strategies and technologies (along with their advantages and disadvantages) for designing type in web documents.
You Have Two Fonts
About the only thing you can be sure of when you're designing web pages with basic HTML is that you have two fonts to work with: a proportional font and a fixed-width font. The problem is that you don't know specifically which fonts these are or at what size they will be displayed.
A proportional font (called "Variable Width Font" in Netscape Navigator) is one that allots different amounts of space to each character, based on its design. For instance, in a proportional font, a capital "W" takes up more horizontal space on the line than a lowercase "i". Times, Helvetica, and Arial are proportional fonts.
Web browsers use a proportional font for the majority of text in the web page, including body text, headings, lists, blockquotes, etc. In general, proportional fonts are easier to read for large bodies of text.
Because the majority of users do not take the time to change the default font in their browser preferences, you can make a very broad assumption that most of the text on your page will be displayed in 10- or 12-point Times (Navigator default) or Helvetica (the default in Microsoft Internet Explorer). Remember, this is only a very general guideline.
Fixed-width fonts (also known as "constant-width" or "monospace" fonts) are designed to allot the same amount of horizontal space to all characters in the font. A capital "W" takes up no more or less space than a lowercase "i". Examples of fixed-width fonts are Courier and Monaco.
Web browsers use fixed-width font to render type within the following HTML tags:<pre> Preformatted text<tt> Typewriter text<code> Code<kbd> Keyboard entry<samp> Sample text<xmp> Example text
Again, because most people do not change the default font settings in their browser preferences, you can make a reasonable guess that text marked with the above HTML tags will be displayed in some variation of Courier.
Text in Graphics
Designers quickly learned that the sure-fire way to have absolute control over font display is to set the text in a graphic. It is common to see headlines, subheads, and callouts rendered as GIF files. Some web pages are made up exclusively of graphics that contain all the text for the page.
Advantages of GIF text
The advantage to using graphics instead of HTML text is fairly obvious -- control!
Disadvantages of GIF text
As enticing as this technique may seem, it has many serious drawbacks. Many professional sites have adopted a "no text in graphics" rule. Keep the following disadvantages in mind when deciding whether to use graphics for your text.
Why Specifying Type Is Problematic
Cascading Style Sheets and the nonstandard <font> tag give web designers an added level of control over typography by enabling the specification of fonts and sizes. Although it is a step in the right direction, using these tags by no means guarantees that your readers will see the page exactly the way you've designed it.
Specifying fonts and sizes for use on web pages is made difficult by the fact that browsers are limited to displaying fonts that are already installed on the user's local hard drive. So, even though you've specified text to be displayed in the Georgia font, if users do not have Georgia installed on their machines, they will see the text in whatever their default font happens to be.
Platforms also handle type size display in different ways. Using style sheets and the <font> tag is more like recommending fonts and sizes than actually specifying them.
Traditionally, type size is specified in points (there are approximately 72 points per inch), but unfortunately, point sizes do not translate well between platforms. In part, this is because their operating systems drive monitors at different resolutions. Typically, Windows uses 96ppi for screen resolution and the Mac OS uses 72ppi, but multiscan monitors allow higher resolutions.
On a Mac, a font is displayed at roughly the same size at which it would appear in print (e.g., 12pt Times on screen looks like 12pt Times on paper). Microsoft, however, threw out that convention and chose to display point sizes larger to make it easier to read on a monitor. As a result, 12pt type on a Windows machine is closer to 16pt type in print. To get 12pt print-size type on Windows, you need to specify a point size of 9 (but then Mac users will see that text at a nearly illegible 6.75pt type).
Selecting fonts for web pages
Each platform has its own set of standard fonts (and font file formats), making it difficult to specify any one font that will be found universally. Although there are many commercial fonts available for both Mac and PC, you can't assume that your audience will have them. The majority of users are likely to be content with the collection of fonts that are installed with their systems. Below table lists the fonts that are installed with various platforms.
Table: Fonts installed on Windows, Macintosh, and Unix platforms
Microsoft Internet Explorer installs some fonts on users' systems as well. You can be certain that folks surfing the Web with IE will have the fonts listed in Below table.
Table: Fonts installed with Internet Explorer
Core fonts for the Web from Microsoft
The problem with reading text on web pages is that many fonts (most notably the ubiquitous Times) are difficult to read at small sizes. The serifs that aid readability in print are actually a hindrance when rendered with a limited number of black and white pixels.
Responding to the need for fonts that are easy to read on the screen, Microsoft has created a collection of TrueType fonts (for both Windows and Mac) that have been specially designed to be optimized for on-screen viewing. They distribute them for free with the hope that they might grow to be standard and "safe" fonts to specify in web documents. The Microsoft web fonts currently include:
These fonts have generous character spacing, large x-heights, and open, rounded features that make them better for online reading. Georgia and Verdana were designed by esteemed type designer Matthew Carter, with hinting provided by Vincent Connare (who also designed Comic Sans and Trebuchet MS).
Both Navigator and Internet Explorer support technologies for embedding fonts in a web page, enabling your viewers to see your page exactly as you have designed it. Because the font travels with the HTML file, it is not necessary for the user to have the font installed on the client end in order for specified fonts to display. A few years ago, there was a fair amount of excitement about embedded fonts, but the interest has since waned and we are now left with two poorly supported and incompatible standards. In fact, Netscape opted to no longer support embedded fonts in its Version 6 release.
Not surprisingly, Netscape and Microsoft have lined up with competing technologies. Netscape, partnering with Bitstream (a font design company), created TrueDoc Dynamic fonts. Microsoft and Adobe worked together to develop Embedded OpenType.
Both technologies work basically the same way: a special font embedding tool is used to compress the type into a downloadable font file. This font file is referenced by the HTML document using the <link> tag. To use the font, just call it by name using Cascading Style Sheets or the <font> tag in the document. Users with browsers that support embedded font technology see your special fonts; otherwise, text is rendered in the browser's default font.
TrueDoc Technology ("Dynamic Fonts")
TrueDoc technology was developed by Bitstream in 1994, and in 1996, Netscape included "Dynamic Font" support in the Navigator 4.0 browser. Dynamic fonts are saved in the Portable Font Resource (.pfr) format. To create them, it is recommended that you use WebFont Wizard from Bitstream.
Browser support for TrueDoc is slightly better than its competitor but is still problematic. Dynamic fonts can be viewed on Navigator 4.x for Windows, Mac, and Unix, and Internet Explorer 4+ for Windows only. Internet Explorer users must download an ActiveX control for the WebFont Player in order to view Dynamic Fonts. Although dynamic fonts can be viewed on IE5.5, they cannot be printed. Netscape 6 has dropped embedded font support on all platforms, so TrueDoc works only on Netscape Version 4.x.
OpenType (for Internet Explorer)
OpenType technology was developed by Microsoft and Adobe. It uses the Embedded OpenType (.eot) file format, which can be created with Microsoft's WEFT (Web Embedding Font Tool). WEFT is freely available, but it works only on Windows systems. Embedded OpenType is currently supported only on Internet Explorer Versions 4 and higher running on Windows machines. Macintosh users are out of luck both creating and viewing OpenType on the Web.
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.