Web Style Press, Best Practices from all the Web, Build Better Websites » fonts http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 How to Control Font Size in Percentage http://www.webstylepress.com/how-to-control-font-size-in-percentage/ http://www.webstylepress.com/how-to-control-font-size-in-percentage/#comments Mon, 20 Apr 2009 21:17:45 +0000 Hiroshi http://www.webstylepress.com/?p=526 How to Control Font Size in Percentage is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> font-percentagesTo control fonts in percentage is the easiest method which we can choose while playing with the fluid layouts, or perhaps while working with widgets and web 2.0 elements.

It is recommended while working with layouts that we define a standard font size for html and body. In the beginning there were loose style for fonts. Nobody used to care about styling fonts. Then in the design era of computer age, designers developed and adopted techniques to control different design aspects of websites and usually most popular standard was to choose 11px to 12 px font for HTML. Many years this technique prevailed until web 2.0 arrived and some web architects decides that fonts must be clear and bold. So now designers and developers adopt a technique to display large font sizes. Font size, color, face are also a part of the design. Here is how we can control font by percentage as a unit for font size. 

<div style="font-size: 100%;">100 %</div>
<div style="font-size: 150%;">150 %</div>
<div style="font-size: 300%;">300 %</div>
<div style="font-size: 400%;">400 %</div>
<div style="font-size: 500%;">500 %</div>
<div style="font-size: 600%;">600 %</div>

There are other font size units too e.g. pixels, points, inches, cm, mm etc. Percentage is one of these. Widely used as a standard is em unit for font size, which is considered to be the same for all browsers if browser compatibility is in mind.

<div style="font-size: 12px;">12 px</div>
<div style="font-size: 12pt;">12 pt</div>
<div style="font-size: 0.5in;">0.5 in</div>
<div style="font-size: 1cm;">1 cm</div>
<div style="font-size: 12mm;">12 mm</div>
<div style="font-size: 2pc;">2 pc</div>
<div style="font-size: 2em;">2 em</div>
<div style="font-size: 6ex;">12 ex</div>

How to Control Font Size in Percentage is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/how-to-control-font-size-in-percentage/feed/ 0 Use Any Font in Webpages As Text http://www.webstylepress.com/use-any-font-in-webpages-as-text/ http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments Fri, 23 Jan 2009 10:06:43 +0000 Hiroshi http://www.webstylepress.com/?p=481 Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> use-any-fonts

Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.

Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.

I have tried type face method and here is its example to download.

Type Face Example Download

Related Resources

Facelift
Novemberborn
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/ 0 Modern Font Styles For Websites http://www.webstylepress.com/modern-font-styles-for-websites/ http://www.webstylepress.com/modern-font-styles-for-websites/#comments Sun, 26 Oct 2008 17:45:27 +0000 Hiroshi http://www.webstylepress.com/?p=304 Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> I have described about using nice and clean fonts in web page. Now lets see some more details about using fonts in web pages.

As we know Verdana, Arial and Tahoma are being used from the beginning. In Web 2.0 Style, and many open source softwares such as WordPress, now-a-days some other fonts are being used which are neat and clean and stylish too. Best part is, to use these, no installation of fonts is needed. In Windows XP these are present by default. I have selected some examples of look and feel of some chosen fonts over here.

Font Styles Comparison

Arial “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Verdana “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Tahoma “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Trebuchet MS “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Georgia “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Grande “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Sans Unicode “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

sans-serif “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Font Families

It happens so that we can define a family of fonts while creating web page. If one font is not available in user’s machine; then next font style will be displayed. i.e

<style type="text/css">
.myfont { font-family: Geneva, Arial, Helvetica, sans-serif; }
</style>

Suppose Geneva is not present in user’s machine, then system will pick next font Arial for style. So it is recommended to use font-families.

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values:
* family-name: The name of a font-family, like “times”, “courier”, “arial”, etc.
* generic-family: The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

Separate each value with a comma, and always offer a generic-family name as the last alternative.

If a family-name contains white-space, it should be quoted. Single quotes must be used when using the “style” attribute in HTML.

Here is the list of font families commonly available on all systems.

Arial, Helvetica, sans-serif
‘Times New Roman’, Times, serif
‘Courier New’, Courier, monospace
Georgia, ‘Times New Roman’, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/modern-font-styles-for-websites/feed/ 0 Using Clear looking Fonts In Flash http://www.webstylepress.com/using-clear-looking-fonts-in-flash/ http://www.webstylepress.com/using-clear-looking-fonts-in-flash/#comments Thu, 16 Oct 2008 13:26:27 +0000 Hiroshi http://www.webstylepress.com/?p=112 Using Clear looking Fonts In Flash is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

You may have noticed that in professional flash websites they use very fine and clear fonts. What most people do, they just take text tool in flash and write a static text which will probably not be so clear in looks. Follow this rule to use clear style fonts in flash.

I suggest you something.

Never take static text :)
Instead take Dynamic text.
Tahoma 10 for normal text.
Click <> sign for render text as html.
See the result and that will be very exact clear text as than before.

Using Clear looking Fonts In Flash is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/using-clear-looking-fonts-in-flash/feed/ 0 Fonts For Web – Using Nice and Clean Fonts in Web Page http://www.webstylepress.com/fonts-for-web-using-nice-and-clean-fonts-in-web-page/ http://www.webstylepress.com/fonts-for-web-using-nice-and-clean-fonts-in-web-page/#comments Sat, 06 Sep 2008 05:48:07 +0000 Hiroshi http://www.webstylepress.com/?p=25 Fonts For Web – Using Nice and Clean Fonts in Web Page is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Here is an example of font styles for webpages. Download and use in web pages.

Download Fonts Examples

Fonts For Web – Using Nice and Clean Fonts in Web Page is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/fonts-for-web-using-nice-and-clean-fonts-in-web-page/feed/ 0