5 Simple Ways to Style Font in HTML

Simple Font Modifications

If you’re new to building a webpage or are just looking for simple ways to modify the font on your webpage, I have a few tricks for you! To start, we will be using web-safe font, which are font types that render easily across most web browsers! Most of these fonts you’ll probably be familiar with, but there are ways to enhance their standard look for more enticing web design.

In order to render each of these modifications, I will be using this very simple HTML file. I have included three divs for each font and given them a class with their font name so that I can easily style each class with the correlated font. Then, I have given each div with the same class a different id (e.g. “small” “medium” “thick”) so I can style each element differently!

If you need a refresher on class and id attributes, check out my tutorial on Class and Id tags!

Note: There are many ways to set up this HTML file (e.g setting up a div for each font and nesting each corresponding div within in) but TBH I wasn’t sure how I was going to structure this tutorial, so I’ve built my HTML file like this:

All of my font modifications will be done on my CSS Stylesheet!

If you are unsure about stylesheets, check out my tutorial on How to Build and Link a CSS Stylesheet!

Let’s take a look at my 5 Simple Ways to Style Font in HTML!

1. Font-Family

Font-family is the type of font that your users will see when they go to your website! When you change your font-family, you are changing the type of font your user sees! Some of the most common, HTML safe fonts (most browsers will render these easily) are:

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Impact
  • Times New Roman
  • Verdana

To replicate this in your CSS Stylesheet:

2. Font-Weight

Font-weight is how thick your font will be! Some font-family types are more sensitive to font-weight, feel free to play around with it! The values that can be given to font-weight are:

  • 100 (lightest)
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900 (heaviest)

Font Styling

And to recreate this in your CSS Stylesheet:

fontem

3. Font-Size

Font-size is how large or small you want your font! The value of your font-size can be assigned in three different ways:

  • px
  • pt
  • ems

Font-size (px)

Pixels are your typical sizing when it comes to web design. One pixel basically equals one dot on your screen! The font size in px will stay the same across all web browsers and platforms your user is using(mobile, tablet, etc.)

To replicate in your CSS Stylesheet:

Font-size (pt)

Points are similar to Pixels, which is why I generally don’t use them when designing a web page. You typically will see Points(pt) when you are changing the text size in text documents such as Google Docs or Microsoft Word!

In your CSS Stylesheet:

Font-Size(ems)

Ems are interesting because they can change in scale based on the default text size of your webpage! If your default text-size for your webpage is 10px, then 1em will equal 10px and 2em will equal 20px! 

 

To recreate in your CSS Stylesheet:

4. Font-Style

Font-style is whether the text has a slant or not! There are two ways to style your font:

  • normal
  • italic

And in your CSS Stylesheet:

5. Color

Color is the colors your font will be! They can be indicated in three ways:

  • color name
  • rgb
  • hex
    Note: Find color codes here

And in your CSS Stylesheet: 

 

Bonus: Fun Examples!

You can use all of the five styling tips at the same time to create super fun text/font combinations!

TextExamples

Here’s how I did it:

FunFontsFunFonts

 

What’s your favorite font/color combo?! Comment below!

 

Also, don’t forget to subscribe to Tech Talk Code for new post updates!

 

 

Leave a Comment!