For my own reference, but useful general tips nonetheless!
Cover credit: AnalyticsIndiaMag
Typography Tips
Use no more than 2-3 typefaces in a page as additional typefaces increases cognitive load.
Use 125%-150% line height for paragraph text to make your webpage feel more spacious!
Keeping lines of text under 100 characters chunks text and makes it more readable.
Use typefaces that look noticeably different for header and paragraph text. Some pairings I really like are: Libre Baskerville & Source Sans Pro, Domine & Roboto, and DM Serif Display and Proxima Nova.
When creating text hierarchy try to use no more than two mechanisms to differentiate text: (1) font weight, (2) font size, (3) alignment/indentation, and (4) color.
Skip weights and double point sizes between different text elements used. For example, if your header text is 32px bold, then make the paragraph text 16px regular — rather than something like 24px semibold for the header text.
Great type resources: Google Fonts, Font Pairings
Alignment/Spacing Tips
Avoid centering text unless it's a small chunk.
Align left to right if targeting english-speaking folks as people read left to right.
Aligning things to each other can make design look clean and consistent! Using a 12 column grid can be a helpful place to start!
Use negative space to help differentiate elements from each other.
A general rule of thumb: in most cases, you'll want at least 12-16px of padding between different elements or from the edge/corners of the page.
Great alignment/spacing resources: CSS Grid Generator
Color
Use neutral tones to allow your primary colors to shine. Neutral tones (whites, greys, and blacks) can balance out bright colors and give them emphasis.
Use tints and shades to add dynamism to your project. Have a hover state or pressed state? Use tints and shade to indicate these changes.
Great color resources: Coolors Color Palette Generator, Contrast Checker for Accessibility, Grabient (Gradient Tool)
Miscellaneous
- Avoid harsh drop shadows! A good example of not too harsh drop shadows is Stripe.com.
- A great resource for royalty free images: Unsplash.com
Top comments (0)