Font Style using CSS, Best font for blogging, how to design font using CSS property

Font Style using CSS Property

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!

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

Font Properties
font-size increase or decrease the size of a font
font-family set the type of font (unknown as font family)
color can set font color using Hex Code/ name / or RGB)
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 properties for font 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 using CSS: Best Font for Blog and Webpage Designing

digital marketing software


CSS Style Examples