Setting Font Size

HTML Font Styles & Codes

On this page you’ll find an overview of some commonly used HTML font styles and the codes that produce them.

To begin with, you can designate what font style, a.k.a., ‘typeface’, a browser will use to display the text on your web page using the face attribute in the font element. Theoretically, you can use any font that you have installed on your computer (if you are using Windows, you can see which fonts you have installed on your computer by browsing through your Fonts folder which is typically located at C:\Windows\Fonts ).

HOWEVER, if you are creating a web page that you intend to make accessible to the World Wide Web, you must keep in mind that when other people view your web page, if they do not have your specified font installed on their computer then your web page’s text will be displayed on their screen using their browser’s default font. Incidentally, a browser’s default font is also what is used when no font is specified in the source code of a web page. If you are using Internet Explorer, you can see what the default font is by opening Internet Explorer and then clicking on Tools » Internet Options » (General tab) Fonts .

Hence, for any web pages existing online, it is best to use fonts that most people are likely to have installed on their computer. Generally speaking, these web-safe fonts are: Arial, Verdana, Courier New, Times New Roman, Comic Sans MS.

(For Mac users: The equivalent of Arial is ‘Helvetica’ and the equivalent of Times New Roman is ‘Times’.)

The above five examples of font faces are all using the size=3 attribute. The type of font face you use will largely depend on the style of your web page and what level of professionalism you wish to convey. For a traditional or scholarly look, use Times New Roman. For a modern look, use Arial or Verdana. For an informal look, use Comic Sans MS. You should also bear in mind that different sizes affect the readability of different fonts. For example, several paragraphs of text using Arial rendered at size 2 may be perfectly readable but several paragraphs of text using Times New Roman rendered at size 2 may become tiresome.

To apply your selected font face, simply enter the attribute-value pair:

. into your tag where font name equals the name of any official font.

This text will be displayed using Times New Roman.

The end tag terminates your formatting instructions at which point you can declare a new set of . tags to display the text that follows in a different style.

Here is some text using Times New Roman font face. Here is some text using Arial font face.

You can also ‘nest’ . tags meaning that you place one set within the other. This has the effect of beginning one font declaration and then, before it terminates, a new or second font declaration begins. When the second font declaration terminates with its end tag then your text returns to the original font declaration. In this manner your visible text ‘inherits’ font styles from all previous font attribute declarations (including size and color) until the associated end tag terminates the declaration.

This text is Times New Roman while this text uses Arial until the end tag is encountered . and now the text returns to Times New Roman.

For any font face value that has multiple words such as «Times New Roman» or «Comic sans MS», it is mandatory to place this value within double quotation marks («. «). It’s a good practice to place all attribute values within double quotation marks anyway since this will become the standard for future versions of HTML.

To ensure that a wide variety of computers with varying operating systems will display web pages as intended, some web authors make font face declarations in their source code using a comma-separated list of fonts. Macintosh computers may not have a typical PC font such as Arial installed and likewise PC computers may not have a typical Mac font such as Helvetica installed. Since Arial font looks like Helvetica, some web authors will make their font face declaration as follows:

Your computer will attempt to display this visible text using first the Arial font and then, if this is not available, using Helvetica. If neither Arial nor Helvetica is available then the computer will resort to the final choice, sans-serif.

The third font choice, ‘sans-serif’, refers to a member of a generic font family and acts as a kind of fail-safe in case both Arial and Helvetica are unavailable.

Using this technique of listing fonts, some web authors will attempt to have their visible text displayed using a less popular font by placing this font first in the list thus taking the chance that the user might have it installed on their computer. Then if this fails, the user’s computer defaults to the remaining choices in their font list which are typically representative of fonts that are more ‘web-safe’.

Источник

CSS Fonts

Choosing the right font for your website is important!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts — here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Tip: The font-family property should hold several font names as a «fallback» system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.

Example

Specify some different fonts for three paragraphs:

.p1 <
font-family: «Times New Roman», Times, serif;
>

.p2 font-family: Arial, Helvetica, sans-serif;
>

.p3 font-family: «Lucida Console», «Courier New», monospace;
>

Источник

Font Code

The following font codes contain the word word «font» in their name eg, font-size , font-stretch etc.

Also see text codes, which are the properties that contain «text» in their name eg, text-transform , text-align etc.

The font Property

The font property is shorthand code that allows you to set multiple font properties in one go. The font property enables you to set the following properties: font-style , font-variant , font-weight , font-size , line-height , and font-family .

Sample text to demonstrate HTML font code.

The font-family Property

If you only need to set one or two font properties, you might prefer to use the explicit font property, rather than the shorthand property as outlined above.

The font-family property is probably the most common font property. It allows you to set the font family — often simply referred to as «font» (eg, «How do I change the font?»).

The font-family property enables you to change the font.

The font-size Property

To change the size of the font, you can use the font-size property. This property accepts various values, including a pixel size, points, percentage value, and more. Here are some examples of setting the font size using different values:

Font size using pixels (12px).

Font size using points (12pt).

Font size using a percentage value (130%).

Font size using an absolute value (medium).

Font size using a relative value (larger).

The font-weight Property

To set text to bold, use the font-weight property. Although this font code allows you to specify various levels of boldness, most browsers can only render two levels (bold and normal). Therefore, the most common values are bold and normal (which overrides any bold setting).

Here are some examples. If your browser doesn’t render these properly, you’ll probably only see two levels of bold.

Источник

HTML — Fonts

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

     Font size = "1" 
Font size = "2" 
Font size = "3" 
Font size = "4" 
Font size = "5" 
Font size = "6" 
Font size = "7"   

     Font size = "-1" 
Font size = "+1" 
Font size = "+2" 
Font size = "+3" 
Font size = "+4"   

     Times New Roman 
Verdana 
Comic Sans MS 
WildWest 
Bedrock 
  

     This text is in pink 
This text is red   

      
This is the page's default font.
 
Example of the <basefont> Element
 
 This is darkgray text with two sizes larger 
 
 It is a courier font, a size smaller and black in color.