Should We Change HTML Defaults?
I want to talk a little about typography in Html.
Let’s take an example markup with some headings and a paragraph of text:
There are no default styles defined in the Html standard for heading and paragraph elements. In most modern browsers you will see this by default (default CSS settings are mentioned in HTML <h1> to <h6> Tags article on w3schools.com):
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Tip: Use h1 to h6 elements only for headings. Do not use them just to make text bold or big. Use other tags for that.
By default, browsers will add equal margins at the top and bottom of headings.
Here are margins highlighted for each element:
You may find such style in books, but it is rarely can be seen on the web. Let’s take a look at some examples.
Bootstrap CSS framework
Bootstrap is a popular framework for building sites and applications. Default styles applied to headings and paragraphs by Bootstrap influence lots of sites. Font family, size, and other settings will differ from site to site, but the trend to remove top margin, a use equal bottom margin will stay:
Here are margins highlighted for a default Bootstrap css:
Apple developer site
Here are styles from the Apple site for developers (paddings are highlighted in green):
And one more example, this time from the Dropbox site:
In modern web sites, headings are usually outlined more either from the top or bottom, but not equally from both sides. This differs from the standard rendering of modern browsers, which follows a more traditional, book-like approach.