Please enable JavaScript.
Coggle requires JavaScript to display documents.
TYPOGRAPHY - Coggle Diagram
TYPOGRAPHY
STYLING
Categories
Serif
Professional
Newspapers
Sans-serif
Modern
Monospace
Code
FontFamily
Primary, Secondary, ...generic
WebSafe
Available
Computers
Most
Body
Apply
FontWeight
100 to 900
Bold
Bolder
Normal
Lighter
FontStyle
Normal
Italic
FontSize
Color
'#123
Means
'#123123
Body
'#333
SIZING
Relative
Use
Html
62.5%
Media-query
Override
Displays
Set
Everywhere
Relative
Html
Visualize
Type-scale.com
Same
All
Headings
FontFamily
SYSTEM
Default
Benefits
Performance
Boost
NoFlash
Look
Native
Modern
Experience
Better
Drawback
Variation
Using
font-family
-apple-system
Autocomplete
FORMATTING
Text
Align
Left
Center
Right
Justify
Discouraged
Indent
First
Line
Units
Decoration
Underline
Line-Through
Dotted
Wavy
Overline
Transform
Capitalize
Uppercase
Lowercase
WhiteSpace
Control
Wrap
Nowrap
Disable
Wrap
Width
<num> ch
Overflow
Hidden
Text-Overflow
Ellipsis
Column
Count
Gap
Rule
3px dotted color
Direction
Ltr
Rtl
EMBED
Sources
Fontsquirrel
fonts.com
myfonts.com
Formats
Ttf
Otf
Eot
Woff
2.0
Generator
Upload
Ttf
Optimal
Select
Download
Copy
Woff
2.0
Check
Stylesheet.css
Registering
Change
Name
FontFamily
UrlPath
FLASH
Unstyled
Text
Minimize
'@font-face
Font-Display
Auto
Swap
Fallback
Block
Discouraged
Optional
Fallback
Same
Cache
Puts
Characters
Remove
Font
Generator
SERVICES
Example
Fonts.google.com
Fonts.adobe.com
Fonts.com
Fontdeck.com
Optimization
<link rel="preconnect"
SPACING
Vertical
Properties
Margin
Line-Height
Number
Multiplier
1.5
General
Heading
Top
Increase
Bottom
Decrease
Margin
3rem 0 1rem
Horizontal
Letter-Spacing
Value
-ve
Can
Px
Header
Look
Better
Word-Spacing
Between
Words
Px
Width
LineWidth
Ideal
50-70ch
Unit
ch
Width
Zero