Color
Another aspect to consider is the color for your typefaces. This is a very design-dependent step. Were you given a color palette as part of your design brief? Then use those. But if you're planning your own project then you can use the tools below.
Adobe Color CSS (Formerly known as Adobe Kuler) let's you create color sets for your projects. If you use SASS/SCSS you can then turn the colors into variables to use in your CSS.
Dudley Storye creataed a color Thesaurus that makes it easier to see what the colors will look like in the page. We can combine the colors from the chart with text to test
For this section I've created an Adobe Color CC Palette.
It may not have al the colors I need and I'm in no way required to use all the colors in the palette but I will set them up anyways so we can see what it looks like in all the colors available to the palette.
[codepen_embed height="577" theme_id="2039" slug_hash="LVjVzY" default_tab="result" user="caraya"]See the Pen Example Colored Headings by Carlos Araya (@caraya) on CodePen.[/codepen_embed]
The first palette is fairly cool, let's see what other colors look like on our heading text; to do so, I've chosen a second palete from Color CC.
[codepen_embed height="573" theme_id="2039" slug_hash="ZGJGXq" default_tab="result" user="caraya"]See the Pen Colored headings, take 2 by Carlos Araya (@caraya) on CodePen.[/codepen_embed]
We can also test color with our paragraph formatting. I will pick the second color palette for this experiment. Notice how the lighter colors make things harder to read and the darker colors help... When we discuss accessibility concerns we'll touch on color blindness and contrast as necessary elements of your typographical design.
Technical note: In the example below there are two values for color in each selector. I coded it that way to provide a fallback solution for older browsers that do not support RGB color syntax. If the browser doesn't support RGB colors the rule will be ignored and the browser will move to the hexadecimal color and, hopefully, will render it without an issue.
[codepen_embed height="969" theme_id="2039" slug_hash="gpxpXg" default_tab="result" user="caraya"]See the Pen Colored Paragraph Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]
Even different shades of gray/grey may have an impact. In the last color example I've picked different shades of grey for each paragraph color. As with many things related to type, the best color for your text will depend on the typeface you choose.
[codepen_embed height="969" theme_id="2039" slug_hash="pJrJdK" default_tab="result" user="caraya"]See the Pen Paragraph in Shades of Gray/Grey by Carlos Araya (@caraya) on CodePen.[/codepen_embed]