When developing a website, there are 3 important items which play a major role showcasing your online identity, these 3 items are fonts, tags and colors.
Let’s quickly understand how to rightly use these items when designing and developing your website.
Gone are the days when we use to install fonts on server and use them on website, this practice still happens but over time this will slowly go away, nowadays big players like Adobe, Google Fonts have made their fonts available through scripts which can be easily used while making a website. While adobe is paid, Google Fonts offer free fonts and they have a huge library to select from.
When using fonts from Google Fonts, we have to keep in mind few things which are important, one your selected font should not be pixelated/ rough when used, second it should load faster. Let’s understand both these points. Font pixelation means fonts showing rough edges as and when we increase or decrease the font size while using it on site, for example – Raleway font, this is a nice font but for certain odd font size numbers the font shows rough edges. So when choosing the font make sure you are verifying the over all look and feel for your desired font sizes.
Next is to make the font load faster, when you select a font from google, make sure you check the load time which is shown when you select the font weight, ideally 400,500 or 600, 700 should be selected, do not go for extra bold or heavy bold, keep the speed moderate, fast or faster.
Many designers tend to include the font script in css file using the @import, I would like to defer here, it is always a good practice to load the font from your header file, this improves performance of the site and font loads faster.
Always keep the body font between 400, 500 weight, no need to shout by using semi-bold.
Tags are also important while developing a website, H1-H6, should be always used and each tag should have different font size and weight, Search engines give a lot of good ranking, indexing where tags are used. Try to use separate font family for tags, and a global one for body i.e. paragraph, ul, li.
Colors can either or make your site a success or failure, use colors which are relative to your logo, business and theme, The best practice to use colors is to make a color palette from the logo colors. And then use the palette colors accordingly in your site.
Use flat colors like google does, use consistent color codes through out the site, do not use different hex codes for same color, it always a good practice to get this sorted out with your designer during mock-up preparation, so that the same is followed during development phase.
Well as promised I kept my article short and to the point, we are experts when it comes to designing, developing, should you have any query or a requirement feel free to contact me, I will be happy to answer your questions.