Web design opens a lot of creative doors for developers. A lot of that design power comes from the great CSS and HTML options that allow for so many fine-tuned changes on the webpage. Everything from colors, backgrounds, counters, and more can be styled to fit the design needs.
HTML text size is another option that a web developer can manipulate to present the information on a page clearly. In this short guide, you will learn how to use the CSS font-size property for your own work. Sample code and images are provided to help guide you through the process.
How to Set the HTML Font Size
Setting the HTML font size is a direct and easy affair even for those new to the HTML/CSS combo. To display this within the guide, a set of sample HTML codes will be used. You can see it below. Feel free to follow along with the sample or use your own code, as well.
For the CSS, a separate stylesheet was used. You can see it referenced in the sample code above. If you are not familiar with using a stylesheet, please check out the CSS Basics for Beginners post to get caught up in no time.
Default HTML Font Size Values
With no work applied to the page, the HTML font size will be set at its default value of 16px. If you are not familiar with that expression, the number is the size and the “px” is the shorthand for pixels. This is how the page output should look on the screen.
This image explains the sizes shown on the HTML page.
In this guide, the focus will be on changing the size of the paragraph (p) element in the HTML document. The heading tag was included to show how it is automatically set to a particular size.
The consideration for this is that you should use the appropriate HTML element tags for their intended purpose. The paragraph tags should be used for general information and heading tags should be used for subject headings. You could change the size of a paragraph element to seem like a heading, but it would not look correct in terms of code.
Changing the HTML Font Size Using CSS
To set your own desired HTML text size, the CSS style option is there to help. You will need to manipulate the aptly named style property “font-size” to make the change. You may set this property on the separate CSS stylesheet or within the HTML element directly using inline CSS styling.
To understand how to do this in either format, the syntax of the property needs to be understood. In the sample CSS code below, you can see the paragraph element is set with the font-size property setup.
The font-size property is followed by a colon. After that, a size value is provided and then a semicolon ends the statement.
Property Values for Font-Size
The HTML font size can be altered by using one of the following property values in the CSS.
- Pixels
- Em
Using Pixels
Pixel values for font size can be set by providing a numeric value followed by the two letters of p and x. There is no space between the number and letters. Take a look at the sample CSS below.
With a pixel size set at one, the output would come out like this.
If you were to set the pixel size to 50, the resulting output would appear as seen below.
Using em Units
Another option is to use the em values instead. An em unit is relative to the set font-size value. In this example, there is no value set so the em unit takes the default browser value of 16px — 16px equates to 1 em.
If you have set a dedicated font value then the em value will work from that. There is a bit of math involved if you want to get the numbers correct. You can use the following formula to calculate the em pixel value.
pixels/16=em
Conversion Examples:
If you have 12 pixels and want to use em units instead, you can use this process.
12px/16=em (Divide 12 by 16)
0.75 (12 pixels equates to 0.75 em units)
If you use 2em and want to know how many pixels that is, input it like this.
Xpx/16=2em. (Multiply 16 by 2)
32px = 2em (32 pixels is equal to 2 em units)
Take a look at the following CSS example. The value of font-size is set to 1em.
Remember that since there is no other font size set, your browser will automatically equate the 1em value to be 16px.
Now, take a look at what happens when you change the HTML text size to a value of 4em instead.
Final Thoughts: Using Pixel or EM Units?
Setting the HTML font size is just that easy with the pixel and em values. However, pixel values are considered to be absolute. This means that the size is set as you define it and is not relational to other elements of the page. This means that it might not look correct when the window of a browser is resized.
Using the em values instead provides an option that is relative to the set font size. If you simply have not set font size, then the default of 16px for an h2 heading will be used for that value. This can be great if you need the size of the font to scale in relation to other elements.
This does not mean one is inherently always a better choice. If you know the intended use of the page and target devices, using the pixel values can be a fine choice. However, if a user needs to zoom in or simply access the site on a much smaller screen, the use of em values could help mitigate potential issues where the content falls out of its container or becomes invisible among other page elements.
If you spend time studying this, you will find that some web designers have moved away from using pixels as sizing values completely. This is because they feel it can cause more issues on larger sites or just prefer em units instead for the flexibility.
Ultimately, you will have to decide on your own unit preference. Just remember that options exist for a reason and you should never cut yourself off from either as you never know when you might absolutely need it. If you want more options to work with, check out the Udacity CSS Content Hub to build your toolbox.
_____________________________________________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
