HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated. In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size our HTML page content; such as, headings, paragraphs, subtitles, etc. The CSS property that is used to do that is called, font-size. The font-size property lets us adjust sizes in four different ways, using pixels, using percentages, using ems (unite of measurement), or by using keywords. In this CSS tutorial, we are going to learn about the different ways of specifying font-size and the correct way to do it. Let’s get started!
I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
THE HTML PAGE:
First, we need to have a HTML page with some content to stylize. I created a XHTML page with a main heading: <h1>, a subtitle: <h2>, and paragraph tags: <p>.
Also, I linked a CSS file to my XHTML page: <link href=”style.css” rel=”stylesheet” type=”text/css” />.
Let’s take a look at my XHTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How to Specify Font Sizes</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header"> <!-- end .header --></div> <div class="container"> <div class="content"> <h1>How to Specify Font Sizes in CSS</h1> <h2>(CSS Basic Tutorial)</h2> <p>In this basic CSS tutorial, we are going to learn how to adjust the font size of an HTML page by implementing a Cascading Style Sheet with the font-size property.</p> <p>HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated. In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size our HTML page content; such as, headings, paragraphs, subtitles, etc.</p> <br /> <!-- end .content --></div> <!-- end .container --></div> <div class="footer"> <p>This tutorial is provided in part by <a href="http://www.serverintellect.com/" title="Server Intellect" target="_blank">Server Intellect</a> Web Hosting Solutions. <br /> Visit <a href="http://cssatoms.com/" title="www.cssatoms.com" target="_blank">www.cssatoms.com</a> for more CSS tutorials.</p> <!-- end .footer --></div> </body> </html>
Notice that I created a class for the footer; therefore, I can apply a different font size to the footer’s paragraph tag.
ADJUSTING FONT SIZE WITH PIXELS (px):
When we specify font size with pixels we are identifying dots on the computer screen. For example, adjusting a font to 24 pixels means that 24 dots are going to be between the bottom part and the top part of the letter.
h1 { font-size: 24px; }
Image may be NSFW.
Clik here to view.
NOTES:
- px must be right before the number; don’t add a space in between.
- Font specified with pixels doesn’t scale in Internet Explorer.
- Mobile devices don’t reduce fonts specified with pixels.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
ADJUSTING FONT SIZE WITH PERCENTAGES (%):
When we specify the font size of a parent element (Ex. Body) using percentages we are telling the browser to relatively fix the size of child elements (Ex. Paragraphs) For example, adjusting the font size for the body to 80% will make the no-identifying paragraph tags to inherit it.
body { font-size: 80%; }
Image may be NSFW.
Clik here to view.
Preview in browser with a body font-size of 80%:
Image may be NSFW.
Clik here to view.
…
Notice how the paragraph inherited the font-size declared for the body.
NOTE: When we specify font-size using percentages, the text will become fully scalable.
ADJUSTING FONT SIZE WITH EM UNIT (em):
Em is a unit of measurement that defines the percentage of a text according to the point size of the current font. Similar to percentages, the em unit tells the browser to relatively fix the size of child elements when a font-size is specified for a parent element.
Because we already have our body font-size specified, let’s specify the font-size for our <h2> tag to 1.5e.m and see what happens.
h2 { font-size: 1.5em; }
Preview in browser without font-size specified:
Image may be NSFW.
Clik here to view.
Preview in browser with an h2 font-size of 1.5em:
Image may be NSFW.
Clik here to view.
Not a big difference, huh? That’s because 1.5em is equivalent to 24px (our h1 font-size).
NOTES:
- Ems is the best and popular font-size method to use. It is scalable and mobile friendly.
- Don’t confuse the HTML <em> element with the CSS em measure specification. The HTML <em> element emphasizes text, the CSS em specification adjust font sizes.
ADJUSTING FONT SIZE WITH KEYWORDS:
An easy and quickly way of adjusting font size is with keywords. We can specify font size with the following keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
According to your browser settings, each keyword will be converted into pixels. Generally, the small keyword is converted around 12px. From there, each keyword declaration is about 20% larger than the preceding size.
Let’s specify our footer paragraph text using the x-small keyword:
.footer p { font-size: x-small; }
Preview in browser without any font-size property declared:
Image may be NSFW.
Clik here to view.
Preview in browser with the font-size property declared using the x-small keyword:
Image may be NSFW.
Clik here to view.
NOTE: Keywords are NOT always converted the same way in every browser or computer.
FINAL TIPS:
- Remember not to add a space between number and symbol (Good: 10%, Bad: 10 %).
- Negative font size values are not permitted.
- Specify the font-size for the body and then fix the font-size of other elements accordingly.
Here is an excellent resource that shows approximately the conversion from points to pixels, ems, and percentages:
| POINTS |
PIXELS |
EMS | PERCENT |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5 pt |
10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Now you know the different ways of specifying font sizes, which one are you going to use?
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.