Starting with a basic stylesheet.
- Know the Content – Know the type and amount of content you’ll be placing on the page.
- Try On Paper – Try to print out the page unstyled, and then go about hierarchically numbering content elements.
- Color Palette
In a comment at the top of your CSS file, list the primary colors you’ll be using followed by the secondary colors. - Web Fonts
Select the web fonts appropriate for your design. - Import Fonts
Import them to your stylesheet all in one line. - Fallback Fonts
Determine the fallback fonts for each web font. - Size
Determine the font-size and line-height of the body element (e.g. 1.25em and 1.6). - Separate Paragraphs
either with margins or indent. - Heading Type-Scale
Type-scale your heading elements – use type-scale.com. - Line Heights
Evaluate the best line-height for each heading (e.g. 1.1, 1.15, 1.2). - Add Baselines
Use www.basehold.it using the appropriate line-height value - Vertical Rhythm for Paragraphs
Make the text of your paragraphs sit on the baselines. - Vertical Rhythm for Headings
Adjust your heading too (e.g. margin values), but in a way that does not disrupt the paragraph text. - Styling Other Elements
Style the <abbr> elements to be as high as the x-height of your paragraph text, forced in all caps. - Heading Color
Initially, make all headings share one color. - Title Styling
Give each title the appropriate amount of weight, size, position, alignment, color, casing, typeface pairing, letterspacing, style, and any other property needed to emphasize its importance over others. - White Spaces
Adjust the white spaces by setting values for the width/max-width, padding, and margin properties of all text containers. Use the * measure technique. - Colors & Background Colors
Adjust color and background colors of the text and titles on the newly created white spaces. - Link Colors
Color the links and add bottom-borders or italic styling if necessary. - Responsive Typography
Create media queries dedicated adjust font settings for optimal legibility.
