Best practices for choosing and using fonts in web design
Choosing the right fonts is crucial for readability and aesthetics. Stick to 2-3 font families to maintain a clean design, and ensure high contrast between text and background for readability. Use web-safe fonts or optimized web fonts to enhance performance and accessibility.
Webomatic Global Font
6 Headline font sizes
Display - The power is in the use of the perfect font
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
Above title - This text goes above the title
H1 - The power is in the use of the perfect font
Subtitle - This text goes below the title
H2 - The power is in the use of the perfect font
H3 - The power is in the use of the perfect font
H4 - The power is in the use of the perfect font
H5 - The power is in the use of the perfect font
H6 - The power is in the use of the perfect font
Paragraph - The power is in the use of the perfect font
60%
Brukes på lyse bakgrunner
+ overskrifter på mørke bakgrunner
30%
Brukes på mørke bakgrunner
+ overskrifter på lyse bakgrunner
10%
10%
10%
Webomatic Global Color
8 Color Swatch Legend
Color #6
Paragraph text on
Drunk-Tank Pink
Color #8
Paragraph text on
Black Glaze
Color #7
Paragraph text on
Gold Ore
Color #7
Paragraph text on
Caribbean Blue
Color #1
Used for Hover states
Color #2
Title color on Light version
This should be a Dark color
Color #3 - Accent Color
Buttons, Icons, Links
Color #4
Highlights and backgrounds
Choose a light color
Color #7
Paragraph text on light version
Color #7
Paragraph text on light version
Color #8
Paragraph text on light version
Color #2
Paragraph text on light version
Color #5
Alternate Highlights and backgrounds
Color #6
Paragraph texts on Dark version + Backgrounds on Light version
Color #7
Paragraph texts on Light version
Color #8
Everything that is White
Light text on dark background
COOKBOOK 101
Visualize Your Colors & Fonts On a Real Site
A meal just isn’t complete without dessert. But instead of reaching for store-bought sweets or those unimaginative brownies from a box.
60%
30%
10%
A A a - A A a
A A a - A A a
A A a - A A a
A A a - A A a
60%
Brukes på lyse bakgrunner
+ overskrifter på mørke bakgrunner
30%
Brukes på mørke bakgrunner
+ overskrifter på lyse bakgrunner
10%
10%
10%
Webomatic Global Color
8 Color Swatch Legend - Shades
Color #8
Paragraph text on Dark version
Color #8
Paragraph text on Dark version
Color #2
Paragraph text on dark blocks
Color #2
Paragraph text on light blocks
Color #1
Used for Hover states
Color #2
Title color on Light version
This should be a Dark color
Color #3 - Accent Color
Buttons, Icons, Links
Color #4
Highlights and backgrounds
Choose a light color
Color #7
Paragraph text on light version
Color #7
Paragraph text on light version
Color #8
Paragraph text on light version
Color #7
Paragraph text on light version
Color #5
Alternate Highlights and backgrounds
Color #6
Paragraph texts on Dark version + Backgrounds on Light version
Color #7
Paragraph texts on Light version
Color #8
Everything that is White
Light text on dark background
COOKBOOK 101
Visualize Your Colors Fonts On a Real Site
A meal just isn’t complete without dessert. But instead of reaching for store-bought sweets or those unimaginative brownies from a box.
60%
30%
10%
A A a - A A a
A A a - A A a
A A a - A A a
A A a - A A a
A A a - A A a
A A a - A A a
Webomatic Global Color
8 Color Swatch Legend
Color #1
Used for Hover states
Color #2
Title color on Light version
Should be a dark color
Color #3 - Accent Color
Buttons, Icons, Links
Color #4
Highlights and backgrounds
Color #5
Alternate Highlights and backgrounds
Color #6
Paragraph texts on Dark version + Backgrounds on Light version
Color #7
Paragraph texts on Light version
Color #8
Everything that is White
How to use opacity on light background
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
How to use opacity on light background
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
The point of
The point of using dummy text for your paragraph is that it has a more-or-less normal distribution of letters. making it look like readable English.
Global Font
6 Headline font sizes
H1 - Above title - This text goes above the title
The power is in the use of the perfect font
Subtitle - This text goes below the title
The power is in the use of the perfect font
The power is in the use of the perfect font
The power is in the use of the perfect font
The power is in the use of the perfect font
The power is in the use of the perfect font
Paragraph - The power is in the use of the perfect font
