When starting a website design it can be overwhelming to trying and figure out colors, fonts and font sizes. Here are some things to consider and resources that can help speed up or assist you in your web design. So let’s look into some key areas that we can focus on to help get the right start.
Colors can be easy or hard to work with. It can be somewhat easy if you have a company brand guide to work from. Even then there is a difference using colors for print and colors for the web. You need a few variations for most colors which the brand guide might not provide. For example, a button or links, they need to have an unclicked, hover, active, and potentially a disabled state; which all may need a different color or variation of the original color used. A key consideration to have when selecting colors is contrast. Even if you don't have to worry about accessibility, it's still important to have good color contrast to help those without visual impairments to read text easily. The last link below is a website that will help you check if your text and background color have enough contrast from each other and if they are AA or AAA (grading for accessibility) compliant.
Fonts can be essential to telling the story of the content of a site. It's important to have good variation of font styles to help with readability. Using the default browser fonts are a good starting point but it's nice to have something different. If you have a brand guide that suggest the fonts that should be used, then you can try and match those or find the web font version. Most of these fonts are available from different font services that have costs monthly or annually. Another alternative comes from the great people at Google, Google fonts are open source and maintained by the community. They are free to use and some have a wide range of styles and weights.
Just as color contrast and the use of different fonts is important in calling out information, the use of good type size variation can add another layer of readability. You should have a clear distinction from one heading size to another. For a long time when I first started designing for the web I struggled to have good clear variation from one heading style to another. Recently I stumbled upon this little gem, (link below and image above) that helps give a starting point when trying to figure out heading font sizes. How it works is by setting the base font size or the body copy size of your site, choose different scale ratios. To the right the website calculates and displays the different heading sizes. From here I take the information and adjust them as needed to better fit in the design.
Now of course this isn't a fix all for web design, but this is a great starting point when designing. Having a good foundation of colors, color contrast, fonts and font sizes can drastically help any site to read better and assist visitors in finding information.