Introduction to CSS Font Properties
The following article provides an outline for CSS Font Properties. Cascading Style Sheets, more popularly known as CSS, is an easy design language designed to make simpler the producing webpages look great. CSS deals with the appearance and experience a part of a web page. Applying CSS, you are able to control the color with the text, the style of fonts, the spacing among paragraphs, how columns will be sized as well as presented, the things background images or colors being used, layout styles, variants in display several devices as well as, screen sizes in addition to a number of various other effects. CSS is simple to understand as well as grasp; however, it gives effective control of the demonstration of the HTML document. Most often, CSS is usually combined with markup languages HTML or simply XHTML.
- CSS refers to Cascading Style Sheets.
- CSS identifies how HTML elements should be shown on screen, on paper, and also consist of media.
- CSS will save a lot of work. For example, it could control the layout of multiple web pages all at one time.
- External style sheets will be kept in CSS files.
Different CSS Font Properties
Below are the different CSS font properties:
Font Collection: In CSS, you can select the font you want to use for the text inside of a particular element by setting the font-family property in a style rule, but before we get into details of font-family, we will have to understand how to use font names because when we create a web page, we don’t always know what our user will use to view the web page.
Five Font Categories in Standards CSS
- The first of these categories are the categories of serif fonts. An example of a specific font that would fit in this category would be Times or Times New Roman as well as Baskerville, Century, and Schoolbook.
- Those are specific font names, like Baskerville, Century, and Schoolbook; those are the font names you might see in a dropdown list when selecting a font inside of a word processor because the word processor knows exactly what is installed on your machine. But to CSS, all these fonts would fall under the category of serif fonts.
- There is also a set of sans-serif fonts, and a popular font that falls into this category is Arial. In case you did not know, serif, so there are small lines at the end of a letter, make the letters look fancy and embellished. For example, you can see the difference in the R letters that are below.
- The R on the left is an Arial, which is sans-serif, literally without the embellishments, while the R on the right is Times New Roman, and it contains a few extra little strokes here and there. Generally speaking, people find the sans-serif fonts easier to read on an LCD and LED display.
- There are also categories for cursive fonts, which look a bit like handwritten letters and fantasy fonts, which can look like anything, but most designs are not going to make heavy use of these fonts because they can be hard to read and also a little bit unpredictable.
- Finally, there is a category for monospaced fonts. These are the fonts that give equal spacing to every letter, and that’s probably the font you want to use in your text editor that you use to create CSS and the font you would want to use on a web page to display code in a web page.
Results in the Web Browser:
Output:
Results in the Web Browser:
Output:
Results in the Web Browser:
Output:
Results in the Web Browser:
Output:
Results in the Web Browser:
Output:
Font Families
Below explanation shows the font families:
- Many CSS designs will set the font-family property to the name of a specific font like Arial. However, there’s always a chance that the specific font you want, like Arial, that it’s not available on a given user’s system. And that’s one of the reasons you can specify as many fonts as you would like in a comma-delimited list, and the browser will use the first one that matches.
As per the above screenshot, we have 1st choice, a 2nd choice, and if neither of those fonts is available, we are falling back to the generic sans-serif because even if the browser does not have any of the other fonts, it must provide a default font for that category. Of course, that raises the question of what fonts are safe to use for web design. Generally speaking, you can’t go wrong with Arial, Verdana, Times, and Courier, but we have also provided a list here of other fonts that are commonly available on multiple platforms.
- Helvetica is a common font that you are seeing listed in many style sheets, but Helvetica is not available on Windows. Windows provides Arial instead.
- Font-family is one of those properties that is inherited. So if we set it at the body level, then the paragraphs and the divs and the anchors that are inside of that body will pick up that font family by default unless we override it. For instance, this header here, this h1 tag, inherits the font-family from the body, but it does not have to be that way.
Output:
We can say that for the h1, the font family should be Times New Roman, Serif, and if you refresh the web pages, the change has been reflected.
Font Sizing and Styles
Below is the detailed information on font sizing and styles:
- Another characteristic of fonts that you will want to control is the size, and when setting the size, you will first have to pick between absolute or relative units.
- Absolute sizes are commonly specified in pixels, and pixels give you very precise control over the font size.
- Relative units like percentages or the keywords larger or smaller or ems allow you set font size based on some baseline, so 2em would be twice the size of the baseline and 0. 8em would be 80% of the baseline. Many people today use ems for relative font sizing. One reason is relative sizes allow a user to scale up the text using their browser, and this is something they might want to do because the text is hard for them to see. Relative sizes allow that to work.
Results in the Web Browser:
Output:
- Some of the other properties of a font that you can set are the font style to force italic font or the font-weight to make a font bold. And the font-variant property will bring in a typeface that uses only capital letters.
Results in the Web Browser:
Output:
- The first thing we want to do is deemphasize that h1 element a little bit. It needs to be an h1 element because it is the primary header for this page, but it’s a little bit too large for our point of view. So let me set the font size to 1.2ems. That will bring that down a little bit because typically, an h1 tag is going to be well beyond 1.2ems. The next issue we want to address is the code listing here. We want this to be a monospace font, and there are a couple of different wants to achieve this for code as per below.
Results in the Web Browser:
Output:
Results in the Web Browser:
Output:
Here we want to use pre tag, which means this is preformatted text and please don’t try to manipulate it.
Results in the Web Browser:
Output:
It is shorthand properties of font style. Like font-style italic, font-size 0.9em and font-family serif.
Results in the Web Browser:
Output:
Conclusion
How to specify fonts using CSS and the difference between a specific font like Arial and the generic categories of web fonts like serif and sans-serif. We also manage font sizing and the pros and cons of relative sizes versus absolute sizes; finally, we use font properties and learn to load fonts with the font family.
Recommended Articles
This has been a guide to CSS Font Properties. Here we have discussed different CSS font properties and five font categories in standards CSS with browser results and outputs. You can also go through our other suggested article to learn more –
9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
