Font Style using CSS Code

Font is one of key element in webpage designing or blog post, page appearance completely depend on font family you select, what font size and how much space you define that will make huge impact on your webpage appearance. so font style matters a lot!

style="font-size:18px;color:red;font-family:verdana;";

Here are some Font properties that you should play with while designing any web page.

  • font-size
    increase or decrease the size of a font
  • font-family
    set the type of font (unknown as font family)
  • color
  • font-style
    make a font italic or oblique
  • letter-spacing
    Setting up right letter space will change the look of your web page completely

How to design Font using CSS Style

Though you can set font property while writing content using in-line CSS, but that would increase your code size unnecessarily and will be difficult to maintain consistency throughout the website!

There are some good practices of writing CSS style, and especially for font style, you should always write it in some css file, so you can reuse the class, how you apply css style on font properties, which will decide the look and feel of the web page.

For Example we can write like this

We are learning Font CSS, so experimenting different ways to write font on web page, just to see how it appear on browser , but we are passionate about learning the best practice and will follow the same.
Here is the code (dirty ways of writing css)
We are <span style="font-size:18px;"> learning Font Style using CSS</span>, so experimenting
          <span style="font-family:'Arial Rounded MT';">different ways to write font </span> on web page, 
         just to see how it <span style="color:#f00;"> appear on browser </span>, 
         but we are passionate about learning the best practice and will follow the same.

Instead of doing above we could have created a css-class with all font details and use that class wherever we need, that would keep the code clean and maintainable

Here is how you can do that
<style>
    div
    {
        font-size: 20px;
        font-family: Verdana;
        color: red;
        font-stretch:expanded;
    }
</style>

Now all Font inside div will have same look and feel across the website
Here is anothe useful CSS font property you must use for designing reader friendly webpage

<style>
line-height:24px;
letter-spacing:2px;
</style>
Best Font for Blogging

Some very commonly used fonts in digital world are Arial, Verdana, Helvetica, Calibri, and Century Gothic.

Here are some awesome blogging font styles that popular blogger use in their blog!

Serif
Serif fonts are mostly used for printing, This font type is easier to read and maintain classy and traditional feeling!

Sans Serif
Sans Serif fonts are mostly used for corporate website designing; even this font type is very popular among blogger!

Verdana
Verdana is one of the most popular font type, looks good in any resolution, if you can set right size and letter spacing, Verdana font can make your page look elegant.

Calibri
Calibri is a sans-serif typeface family, Calibri is an excellent option for blogger, this font can make your content look clean and decent.

 
Font style in css code: set font family size color using css

Learn how to apply CSS style on webpage, free CSS tutorial for beginners.
Digital Marketing Software
CSS Style Examples