This guide illustrates the correct margin specifications between embedded content and various other elements. Each example precisely demonstrates the pixel measurements needed to maintain proper visual hierarchy and readability.
This paragraph precedes an embedded element. When transitioning from paragraph text to an embed, we use a 32px margin. This larger spacing acknowledges the significant visual shift that occurs when moving from text to embedded content. The 32px margin provides enough space for the reader's eye to transition between your content and the embedded external content.
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
This paragraph appears 32px below the embedded content above. When returning to paragraph text after an embed, we maintain the same 32px spacing to create symmetry in the document's vertical rhythm. Embeds create significant visual breaks in content, so the larger margin helps re-establish the reading rhythm when returning to text.
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
The 24px spacing between a heading and an embed follows the same pattern as heading-to-content spacing throughout the document. This creates consistency while acknowledging that the embed is content that belongs to the heading above it.
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
The 40px spacing before a heading creates a clear section break, regardless of what content type precedes it. This consistent approach to section transitions improves content structure and readability, particularly when an embed concludes one section before moving to a new topic.
This list precedes an embedded element
When transitioning from a list to an embed
We use a 32px margin
This acknowledges the stronger visual break that embeds create
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
This list appears 32px below the embedded content
The increased spacing helps transition from third-party to native content
While maintaining the overall document flow
Each content type receives appropriate spacing based on its visual weight
javascript// Placeholder code
const margins = {
standard: 24, // text elements
visual: 32, // images, tables, embeds
section: 40 // headings, dividers
};
console.log(`Embed margins: ${margins.visual}px`);Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
javascript// Placeholder code
const margins = {
standard: 24, // text elements
visual: 32, // images, tables, embeds
section: 40 // headings, dividers
};
console.log(`Embed margins: ${margins.visual}px`);
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Table header | Table header |
|---|---|
Table row | Table row |
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Table header | Table header |
|---|---|
Table row | Table row |
Multiple embeds in sequence need clear separation to be perceived as distinct elements:
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
The 40px spacing between consecutive embeds creates sufficient separation to indicate these are distinct elements, preventing them from visually merging into a single unit.
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
Note the 40px spacing between the divider and the embed. Dividers signal significant breaks in content, so the larger margin helps establish a clear separation between sections.
Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup
The 40px spacing from an embed to a divider creates a clear section break. This larger margin is used consistently for transitions between major content sections.
This visual guide demonstrates all embed margin specifications within our typography system:
Text Elements to/from Embed:
Paragraph to/from Embed: 32px
List to/from Embed: 32px
Code Block to/from Embed: 32px
Heading to Embed: 24px
Visual Elements to/from Embed:
Image to/from Embed: 32px
Table to/from Embed: 32px
Embed to Embed: 40px
Embed-Specific Spacing:
Embed to Caption: 12px
Embed Caption to Next Element: 24px (except headings: 40px)
Section Transitions:
Embed to Heading: 40px
Divider to/from Embed: 40px
These margin specifications create a balanced visual rhythm that enhances the reader's experience by:
Providing appropriate transitions between native and embedded content
Creating clear separation between distinct embedded elements
Maintaining consistent document flow
Supporting intuitive content hierarchy
Improving overall readability and content integration
Consistent application of these spacing guidelines helps readers process embedded content more effectively while maintaining the overall flow of the document.
Share Dialog
Meesh
No comments yet