Lessons:12Length:2.3 hours
4.2 Planning Element Margins
All web-based text elements have spacing baked into them that can be tweaked for the browser via CSS. In the last lesson, we covered setting up line-heights and roughed out the space between headings and paragraphs. We’ll now refine these values into specific margin values in this lesson.
1.Introduction
1.1Web Typography Basics in Figma00:44
1.1
Web Typography Basics in Figma
00:44
2.Font Selection
2.1Font Classifications16:30
2.1
Font Classifications
16:30
2.2Font Combining16:47
2.2
Font Combining
16:47
2.3Font Stacks15:42
2.3
Font Stacks
15:42
3.Text Size and Size Flow
3.1Establish the Smallest and Largest Text13:31
3.1
Establish the Smallest and Largest Text
13:31
3.2Create a Size Flow14:42
3.2
Create a Size Flow
14:42
4.Line-Height and Margins
4.1Line-Height and Rough Spacing08:04
4.1
Line-Height and Rough Spacing
08:04
4.2Planning Element Margins27:30
4.2
Planning Element Margins
27:30
5.Additional Spacing
5.1Indentation, Letter Spacing, and Drop Caps08:33
5.1
Indentation, Letter Spacing, and Drop Caps
08:33
5.2Style Modifications: White Space08:02
5.2
Style Modifications: White Space
08:02
5.3Style Modifications: Site Layout05:26
5.3
Style Modifications: Site Layout
05:26
6.Conclusion
6.1Wrapping Up01:56
6.1
Wrapping Up
01:56
