5 Top CSS Tips To Make Your Site Look Less Scary

Happy Halloween!

It may be the creepiest time of the year but that doesn’t mean your website has to look frightening. Here’s 5 top CSS tips to stop your site looking so scary:

Line Height

Improving line height on your paragraphs is one of the easiest ways to dramatically improve the look of your website. Try setting line heights to a relative value (say 1.8) to keep the height of your lines proportionate to the size of your text.

Padding

Padding is a web developer’s best friend. It increases the space around block level elements and can drastically improve the appearance of tables, buttons and lists.

List Style Image

Changing the default bullets on lists to an image you have designed can be a great way to improve the aesthetics of lists.

Font Weights and Styles

Make sure the font weights you specify in your CSS are appropriate for the font family you’re using. If you’re using an embeded font that doesn’t have a bold style, the browser will emulate the extra thickness needed for a bold CSS style. The same goes for italic font styles. This can look strange and ugly – make sure you stick to the font weights and styles provided by the fonts you’re using. Tip – remember that font families might need weights specified in numbers (e.g. 400, 600, 800) – especially if you’re serving fonts over Adobe’s Typekit.

Image Vertical Align

Ever notice gaps appearing at the bottom of your images and other elements? Try adding vertical-align: bottom; to images to get rid of this scary gap!