Preview image. Unlock full-res
Type-hierarchy page laying out H1, H2, copy, and detail styles with specs on the sides and large live specimens down the center.
Summary
A type-hierarchy page pairing written specs for H1, H2, copy, and detail styles with large live specimens of each.
Visual description
Pure-black background, monospace header (OPERA ONE / TYPOGRAPHY / STYLES AND HIERARCHY / ©OPERA 2023). A three-line "STYLES AND HIERARCHY" headline sits top-left. Below, the content is organized into four labeled blocks on hairline rules: H1 and H2 in the left column, COPY TEXT and DETAILS in the right column, each listing font (Be Vietnam Pro or Space Mono), weight, case, leading, and a "Download Here" link. The center column shows large specimens: "BROWSE WITH INTELLIGENT TAB ISLANDS." (H1, all-caps black) and "WITH TAB GROUPING SYSTEM ENSURES THAT EVERYTHING IS EASY TO FIND AND ACCESS." (H2). Copy and detail samples sit at right in regular and monospace.
Key takeaway
Putting the spec (font, weight, case, leading) next to a real sentence set in that exact style, so each tier of the hierarchy is both defined and demonstrated on the same line. The H1/H2/copy/detail four-block grid is a clean, complete type scale.
Reuse notes
A directly reusable type-hierarchy spread for any guideline. Showing live specimens beside the numeric specs is the convention to copy. The four-tier structure (display, sub-head, body, fine print) covers most needs.
