A page may contain any number of different elements which each need to be styled relative to one another. It is useful, therefore, to have a single page containing a concise list of common elements such as headings, paragraphs and tables, so that these can be styled all at once.
Such a page should contain all the elements which could possibly appear on a page on your website, including h1, h2, p, etc.
It is also useful to lay these example elements out in a way that would commonly appear on a page.
<h1>Heading 1</h1>
<p><strong>Introductory paragraph</strong></p>
<h2>Heading 2</h2>
<h3>Heading 3.1</h3>
<p>Sub-section paragraph</p>
<h3>Heading 3.2</h3>
<p>Sub-section paragraph</p>An initial layout of headings and paragraphs similar to the one shown above provides a good start to styling the font size and spacing of the core text of your pages.
🛈 Dummy text can be used to simulate real paragraphs of text. Lorem Ipsum provides a generator to help with this.
More complex elements can be slowly introduced to the page layout and the existing styles updated until you are satisfied with look of your page.
When using the Gutenberg editor for WordPress, you can insert each element as a block. Try to include as many default block types as you can on your page to cover all the possible ways your content could appear.