Question about typography and colors.

Hello.

I have a question about the fonts and colors of the page. I create a theme for Wordpress and wonders what are the good practices and how to do it to be good?

So, regarding colors. Should I give the opportunity to change every element on the page? Any dots, dashes, etc.? (I do not use the page builder). Or maybe a few global colors? Which solutions are the best for you? The ability to change the color of each item seems interesting, but then the user has a million color controls which can be overwhelming.

And the second question about fonts. Suppose I have such a simple html:

https://codepen.io/anon/pen/XLVGQj

It is obvious that if I put 50px padding on this div, it will not be equal because h1 has a line-height other than span. So I can change the padding-top to a smaller one. What’s the problem? If I give the user the option to change the font, and each font has a different design, practically always the distance at the top and bottom will be different (and I will not give the user the option of changing the padding-top depends of font because that is pointless). How do you solve such a thing?

Thank you very much!

Here is how I am doing:

I agree with this and that is the way how I am coding my themes (which are without page builder) - with few global colors. For all same colors in the design I leave one “Global” color (for example pricing header, buttons background, some divider …). Also I leave some other global selectors there - like preloader background, footer background, menu background, menu items colors …

About Fonts padding (if any of customers will ever ask for this) - I think a small custom CSS fix will do the job and that is ok.

1 Like

Thank you very much!

One more question. For example, you have a body background and footer background. Body is white. The footer is black. So you give the choice of font color for both body and footer, or do you write any script that automatically calculates a font color that will be readable on a given background?

Make it simple - 4 colorpickers - 2 for background colors and 2 for colors.

Sometimes customers use “strange” color combinations - so give them a freedom to set any color (no scripts).

1 Like

Thank you again :slight_smile:

Last question (I promise) what about the font weight? The coolest design is when we mix font weights. Some give the user the option to choose font weight, but then they use exactly the same on the whole page. Is it better to not give the option to choose font weight or to give and do the same on the whole page?

You will struggle to achieve proper hierarchy if any one styling especially font weight is restricted to a single uniform rule.