Scribd
Upload
33 views

Font:-: Solution

The document discusses different units that can be used to specify font sizes in CSS, including points, pixels, ems, and percentages. Points and picas are best for print but not screens. Pixels have no meaning for print. Ems and percentages allow users to resize text in browsers. Ems are relative to the parent element's font size, while percentages are relative to the browser's default font size.

Uploaded by

Jahangir Alam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Font:-: Solution

The document discusses different units that can be used to specify font sizes in CSS, including points, pixels, ems, and percentages. Points and picas are best for print but not screens. Pixels have no meaning for print. Ems and percentages allow users to resize text in browsers. Ems are relative to the parent element's font size, while percentages are relative to the browser's default font size.

Uploaded by

Jahangir Alam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Font:-

The browser will display text in the default font used for that browser and operating system.
Solution:-
Specify the typeface that your text will adopt using the font-family property:
p{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
Discussion:-
Here, weve specified that if Verdana is installed on the system, it should be used. Otherwise, the browser is
instructed to see if Geneva is installed; failing that, the computer will look for Arial, then Helvetica. If none of these
fonts are available, the browser will then use that systems default sans-serif font.
As well as specific fonts, such as Verdana or Times, CSS allows the specification of some more-generic
family names:
serif
sans-serif
monospace
cursive
fantasy
If a font-family name contains spaces, it should be enclosed in quotation marks, like so:
p{
font-family: "Courier New", "Andale Mono", monospace;
}
Fonts that you can feel fairly confident using are:
Windows:-
Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, Comic Sans, Verdana, Georgia,
Garamond
Mac:-
Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva, Baskerville, Andale Mono
Font Size:-
The font-size property can take a variety of values.

Points and Picas:


You should avoid using points and picas to style text for display on screen. The point unit is an excellent
way to set font sizes for print design, as the point measurement was created for that purpose:
Ex:-
p
{
font-size: 10pt;
}
A point has a fixed size of 1/72nd of an inch, while a pica is one-sixth of an inch. A printed document
whose fonts are specified using these units will appear exactly as you intended; after all, one-sixth of an inch is the
same physical measurement whether youre printing on an A4 page or a billboard.
Pixels:
Many designers like to set font sizes in pixel measurements:
p
{
font-size: 12px;
}
If youre creating a document for print or creating a print stylesheet, you should avoid pixels entirely.
Pixels have no meaning in the world of print and, like the application of points to

Ems
The em is a relative font measurement. If you use ems (or any other relative unit) to set your font sizes, users will be able to
resize the text in old browsers. For example, IE6 users are unable to resize text set in pixels, and have no other zoom control.
Em values can be set using decimal numbers.

For example,
To display text at a size 10% smaller than the users default (or the font size of its parent element), you could use this rule:
p{
font-size: 0.9em;
}
To display the text 10% larger than the default or inherited size, youd use this rule:
p{
font-size: 1.1em;
}

Percentages
As with ems and exes, font sizes that are set in percentages will honor users text
size settings and can be resized by users:
p{
font-size: 100%;
}

Setting the size of a p element to 100% will display your text at users default fontsize
settings (as will setting the font size to 1 em). Decreasing the percentage will
make the text smaller:
p{
font-size: 90%;
}

You might also like