3 Basic Parts To A Changing Font Attributes
Written by Kamal Kaushal
Fonts and CSS
The font tag has been deprecated in favor of cascading style sheets, so it is a good idea to get familiar with how to change the font color, size, and face with CSS. The one advantage is that working with CSS; you have much more control over the look of the font, including size in pixels and other aspects of typesetting.
Font properties in CSS are one of the most common ways to make your page more distinctive and unique. It is easy to change the color, size, and even face (the font itself) of your text with CSS font properties. ncolor nfont-family nfont-size
There are three basic parts to a font:
Color
This is the color the font will display as on the screen. nsize
This is how large or small the typeface will render on the screen. nface
This is the font family, what is often referred to as the actual font.
Font Colors
To change the color of the text, simply use the CSS color style property. You can use either color names or hexadecimal codes. As with all color on the Web, it is best to use browser safe colors. Try the following styles in your Web pages:
Colorizing the Web
Using Browser-safe Colors
Font Sizes
When you set the font size on the Web you can set it in relative sizes or be very specific using pixels, centimeters or inches. However, the more exact font sizes are meant to be used for print and not for Web pages, where everyone who views your Web site might have a different resolution, monitor size, or default font setting. Thus, if you choose 15px as your standard size, you might be unpleasantly surprised to see how large or small your font renders to your customers.
I recommend you use ems. Ems allows your page to remain accessible no matter who is viewing it, and ems are meant for screen rendering. Leave your pixels and points for print rendering. To change your font size, put the following style in your Web page:
Deciding on Font Sizing in CSS
Font Faces
The face of your font is the actual font that is used. You can declare any font that you would like, but remember, if your reader doesn't have that font installed their browser will try to find a match for it, and their page will not look like you intended.
To address this problem you can specify a list of face names, separated by commas, for the browser to use in order of preference. Keep in mind that a standard font on a PC (such as Arial) might not be standard on a Macintosh. So you should always view your pages with a minimally installed machine (and preferably on both platforms) to make sure that your page looks as designed even with minimal fonts.
One of my favorite font sets is This set is a sans-serif font collection and while geneva and arial do not look terribly similar, they are both fairly standard on Macintosh and Windows computers. I include helvetica and helv for customers on other operating systems such as Unix or Linux that might not have a robust font library.
Article author
About the Author
Further reading
Further Reading
Article
What Is a Slug Generator and Why Do I Need One?
Create SEO-friendly URLs effortlessly with our online free slug generator. Perfect Slug Maker for bloggers and webmasters!
September 14, 2026
Article
Unlock a High-Converting Dental Marketing Plan That Wins
Want more patients and revenue? Learn the secrets to creating a dental marketing plan that converts, grows your clinic fast, and beats the competition.
September 13, 2026
Article
What Makes SEOGDK a Leader in Digital Marketing Innovation?
Discover SEOGDK, a leading digital marketing blog started in 2011 to empower digital marketing professionals, bloggers, and entrepreneurs via its SEO guides, blogging tutorials, affiliate marketing resources, digital marketing insights, reviews, and web technologies.
September 13, 2026
Article
How AI SEO Services in India Are Transforming Search Rankings and Organic Growth
SEO looks different than it did even two years ago. Keyword research, content planning, and technical audits now run through AI tools that process in minutes what used to take a research team days.
September 13, 2026