Compose to a Vertical Rhythm. “Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.” So says the typographer Robert Bringhurst, and just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost. On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained. The basic unit of vertical space is line height. Establishing a suitable line height The easiest place to begin determining a basic line height unit is with the font size of the body copy.
Spacing between paragraphs With our rhythmic unit set at 18px we need to ensure that it is maintained throughout the body copy. Front-end Style Guides. We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned to produce style guides as part of a rebranding project. A style guide provides details such as how much white space should surround a logo, which typefaces and colours a brand uses, along with when and where it is appropriate to use them. Design guidelines Some design guidelines focus on visual branding and identity. Some guidelines go further, encompassing a whole experience, from the visual branding to the messaging, and the icon sets used.
The BBC’s Global Experience Language. Code standards documents We can make a similar argument for code. The front-end developer’s style guide Easier to test. Firefox Web Browser - Brand Toolkit. GEL (Global Experience Language) Styleguide — Paul Robert Lloyd. This document is a guide to the mark-up styles used throughout the site. Parts of this markup guide are attributable to Dave Shea, and licensed under a Creative Commons License. Sections The main page header of this guide is an h1 element. Any header elements may include links, as depicted in the example. The secondary header above is an h2 element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an h2 unless you need a header level of less importance, or as a sub-header to an existing h2 element. Third-Level Header The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy.
Fourth-Level Header The header above is an h4 element, which may be used for any form of page-level header which falls below the h3 header in a document hierarchy. Fifth-Level Header Sixth-Level Header Grouping content Paragraphs All paragraphs are wrapped in p tags. ! Figures.