The heading uses matching type, set apart from the body
by a affixing its height equal to an integer proportion of rlh.
This can be achieved with padding or margin.
The former is prefered.
This variant of heading matches the body type's font-weight,
font-size and font-style.
It can be used to create a strong impression of uniformity in prose-heavy documents.
Loremipsum dolor sit amet, consectetur adipiscing elit.
Maecenas a nisl in sapien feugiat cursus eu vitae nulla.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Fusce pulvinar tellus sit amet augue tincidunt, et suscipit ipsum elementum.
Curabitur tincidunt metus at lacinia suscipit.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Phasellus sapien arcu, convallis accumsan nisi quis, luctus imperdiet tellus.
Proin at pretium odio, ac varius urna.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Duis sollicitudin dui tortor, a pulvinar leo congue id.
Praesent auctor magna ut nulla malesuada, et pharetra mauris hendrerit.
Nam aliquet nulla id lorem mattis tincidunt.
Heading variant two
The heading is identical to the prior,
except font-size is increased.
This is not necessary due to the large spacing
with the body, but can be used for extra emphasis.
Changing the font-size carries the risk
to start a mis-alignment of lines propagating down
into the block. It has to be met with the proper offset
in margin, or by setting the heading field height
as a proportion to rlh directly.
Aliquamerat volutpat.
Mauris sit amet leo nibh.
Sed augue lacus, tristique vel arcu viverra, lacinia ultricies leo.
Sed consequat tempor aliquam.
Quisque quis volutpat sapien.
Vestibulum id ligula ipsum.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Sed porta urna tellus, nec viverra orci ullamcorper id.
Aliquam pulvinar ut urna eget vehicula.
Phasellus iaculis sagittis lacus non sodales.
Curabitur egestas magna quis arcu interdum elementum.
Nam pharetra vitae lorem et molestie.
Vivamus vel lorem ut dolor blandit vehicula.
Nulla porttitor porta nisi, et ultrices nibh convallis sed.
Heading variant three
Headings can use a bolder font-weight
as the sole differentiation style
from the body type.
The margin-bottom is zero.
The margin-top is the amount
fitting in the heading field-height,
substracted the lines of the heading itself.
No heading style is shown without either
font-weight
and/or margin differentiation,
this style can be considered the minimum amount
of emphasis required for a heading to visually
appear as such.
Maurisdictum malesuada bibendum.
In hac habitasse platea dictumst.
Nam pulvinar ultrices nunc ut scelerisque.
Aenean euismod ultrices elit, at semper turpis laoreet a.
Vestibulum pharetra purus vel nisl viverra pulvinar.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Vivamus aliquet lacinia odio, vel sagittis odio cursus id.
Nam vitae sapien ut leo lacinia vestibulum.
Sed eu dolor et est eleifend pretium non a metus.
Nam pellentesque quis dolor eleifend interdum.
Mauris molestie molestie orci, luctus auctor ante tempus vitae.
Donec rhoncus, tortor a imperdiet porttitor, ipsum leo aliquam sem, et facilisis dolor enim id ante.
Heading variant four
The heading is boldface, set apart from the text
by one line-height.
For styles of minimum field-heights
set at three line-heights; this spacing
is specified concisely as margin-block: 1rlh.
For larger sections use a margin-bottom: 1rlh,
substract it plus the heading line count, and use the
remainder adding up to the desired height as margin-top.
Inid sapien sollicitudin, volutpat magna a, pellentesque justo.
Fusce commodo augue tellus.
Fusce nec nunc erat.
Nam rutrum velit ut consectetur porta.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Morbi sit amet pharetra justo.
Donec sed gravida dui.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nullamvitae commodo sem.
Integer dui lectus, faucibus in commodo eu, dignissim et justo.
Aliquam sit amet porta magna, ut dapibus nunc.
Maecenas nec tristique risus, non fermentum ante.
Ut ipsum velit, faucibus et justo sit amet, pulvinar fermentum ligula.
Aliquam pretium nunc quis ipsum finibus.non aliquet sapien vehicula.
Suspendisse hendrerit massa diam, eget blandit tortor mattis facilisis.
Donec efficitur dolor mauris, eget dictum elit fringilla et.
Heading variant five
Heading variant that uses an oblique font-style,
combined with a margin-bottom: 1rlh
to differentiate from the body type.
This is less emphasis versus the bold font-weight.
The margin are identical.
Vivamusultricies diam non arcu ullamcorper cursus.
In faucibus nisl ac augue eleifend ultrices.
In laoreet blandit lectus et viverra.
Fusce nec nunc erat.
Nam rutrum velit ut consectetur porta.
Nunc augue tortor, tempus in ultricies efficitur, maximus at neque.
Integer porta nulla justo, quis auctor lectus gravida ac.
Vestibulum ac leo dolor.
Quisque sed tortor nisi.
Duisat mauris quis neque vehicula finibus.
Morbi lacinia faucibus rutrum.
Duis ut diam facilisis, porttitor quam nec, viverra felis.
Ut quis lobortis nunc.
Sed eget accumsan purus.
Ut nec libero ut lacus feugiat ornare.
Fusce quis mauris id quam ornare mattis quis eu neque.
Quisque ullamcorper viverra lorem, eget aliquet magna blandit vel.
Donec euismod congue odio a egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla eget est faucibus, luctus erat a, pulvinar est.
Proin blandit mi id rutrum condimentum.
Fusce quis mauris id quam ornare mattis quis eu neque.
Heading variant six
Heading and body can share the type without margin,
adding a horizontal ruler to differentiate them.
The style is fit for headings in documents with less prose
and more visual variation, embeddings,
and block elements in paragraphs with their
own margin, padding. They tend to
nullify the differentiation created by the gaps
in other variants.
The ruler can be achieved in CSS with a box-shadow: 0 [vertical offset] 0 [color]
where the vertical offset is chosen as the ruler thickness.
In this sample, the thickness is 1px.
This effect can also be achieved with using the regular
border-bottom under box-sizing: border-box.
This is disadvantageous since absence of the latter
will create a mis-alignment, offsetting the body type
by the thickness of the ruler.
Sedmaximus tristique mollis.
Pellentesque a convallis quam.
Fusce tempus metus in orci luctus dapibus.
Suspendisse vehicula vestibulum libero a sollicitudin.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus nec odio id quam consequat egestas et a nisl.
Quisque sed tortor nisi.
Proin blandit mi id rutrum condimentum.
Donec aliquam vulputate purus, eget ultricies nunc eleifend ut.
Maecenas ultricies rhoncus dolor, sit amet iaculis augue egestas id.
Fusce nec nunc erat.
Nam rutrum velit ut consectetur porta.
Heading variant seven
Heading and body can share the type without margin
alternatively using a background shade and a
negative color for the heading.
This can be achieved with either negative filtering and
text background clipping; or directly via
the background and color
property combination.
Similar to the previous variant, this can be used
in documents that tend to include blocks within
sections that carry their own margin and padding.
Proin blandit mi id rutrum condimentum.
Donec aliquam vulputate purus, eget ultricies nunc eleifend ut.
Maecenas ultricies rhoncus dolor, sit amet iaculis augue egestas id.
Duis sollicitudin dui tortor, a pulvinar leo congue id.
Sedmaximus tristique mollis.
Fusce tempus metus in orci luctus dapibus.
Suspendisse vehicula vestibulum libero a sollicitudin.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus nec odio id quam consequat egestas et a nisl.
Quisque sed tortor nisi.
Pellentesque a convallis quam.
Fusce tempus metus in orci luctus dapibus.
Suspendisse vehicula vestibulum libero a sollicitudin.
Vivamus nec odio id quam consequat egestas et a nisl.
Quisque sed tortor nisi.
Ut in viverra eros.