HTML: Using CSS Effectively

Tweet

This discussion is sort of a continuous guide. You may add some tips in the discussion later. The part I'm writing is not merely focused on design. When most of us hear about CSS, all that comes in our mind is designing with all the visuals. But for me, they mean the freedom to make text more readable and attractive. Most designers think that a wacky and animated site would be appealing, but it's the opposite. Most people just websites with too much art and animation. They make people feel dizzy and the result, they don't read what you want to share. You may be focusing on the unimportant things than the critical content. Now, to make your text easier to read and comprehend, the following can be done: 1.) Select font faces that are easier to read -- change font-family to faces like the likes of Verdana, Arial, Helvetica, etc 2.) Put enough space between text (Users hate reading crammed text with no enough space between the lines. -- change line-height to a greater value such as 1.5em to make a 1.5 times the original text space (similar to putting 1.5 spacing in MS Word). 3.) Use relative font sizes. When I mean relative, you only have to set the font-size in body selector a value in px (12px is recommended) then the rest such as h1, p, or others with 1.2em or other values. This means the text with 1.2em size will get 12px * 1.2 font size. 4.) Limit your text boxes (div) to a lower width. Many people complain of reading text from the extreme left of the screen to the right. Break them down so that the user is not distracted from their eyes long travel. All of these methods may reduce reading speed but INCREASE COMPREHENSION, which is more important if you want to advertise or feature something. Also, do not create too long articles, you may split them into pages. Have fun.