Typography
Main typeface : Open Sans
Open Sans is a humanist sans-serif typeface designed by Steve Matteson and commissioned by Google. It was designed with an "upright stress, open forms and a neutral, yet friendly appearance", being especially designed for legibility across print, web, and mobile interfaces. The character repertoire contains 897 glyphs.
Open Sans is available in a large number of variants for a font with an open license. There are 5 variants for weight and each one has an italic version, totalling 10 variants.
This implementation of Open Sans from Google Web Fonts project should work ok, but if font rendering in testing on older OS versions looks poor consider using an approach where the main font is Trebuchet MS on XP, Segoe UI on Vista, and Open Sans on Win 7 (and everywhere else)
Body copy typeface : Georgia
While Open Sans is great for almost all type, where multiple paragraphs of body copy are likely to be used - for example on the main content area of a paper or document - a well sized and spaced serif is a good contrast and has great readability. Georgia is the serif font of choice, with suitable fallbacks thro Times and .serif defaults.
Georgia is a well proportioned web font with great weighting at all sizes.
It also has a nicely drawn italic that contrasts well, and t3xt f19ur3s.
Bold is quite heavy so is best used in small doses or only on Headings (H4, see below).
Ordered and unordered lists
Within a long section of body copy there are a few types of list available in the standard Redactor content editor:
- Ordered lists with automatic numbering
- Unordered lists with a bullet placed to the left
- Note that the numbered list has been styled to remove the . dot
- This styling includes correct x.xx sub-list numbering
- Georgia is the only standard webfont that uses text figures
- They are also known as old style or hanging numbers
- Like lowercase letters they have ascenders and descenders
- They are generally nicer to read in order lists
- And that is an ordered list
The above is clearly a numbered ordered list, below is an example of a bulleted, unordered list with sub-lists available if required
- Nam id orci sed enim eleifend porta a eget urna
- Vivamus fermentum vehicula orci, et feugiat arcu pulvinar dignissim
- Donec sagittis felis nec magna varius a scelerisque augue posuere
- Mauris ullamcorper enim ac est fringilla bibendum
- Proin interdum bibendum mi, id dapibus nulla egestas
- Integer imperdiet arcu in enim lobortis
A few more text styles
The Redactor WYSIWYG editor also allows a little formatting of text for quoted blocks:
Redactor is the most fantastic yet beautiful and easy-to-use WYSIWYG editor on jQuery. It is lightning fast, small, scalable, and powerful.
You can easily make your web project much more attractive for your customers and visitors by implementing the Redactor as your default text-editor.
That's what they say, anyway. Within this longcopy style for document text there are four levels of heading available, so I'll show these in the context of a block of long text to make more sense.
Vivamus ac lectus – Heading one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis quam at nibh rhoncus vestibulum semper est elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lectus ac neque ullamcorper congue eget ut nisl.
Vivamus viverra – Heading two
Donec tincidunt ultricies viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas in suscipit mauris. Praesent congue bibendum tincidunt. Integer ac neque eget lectus rutrum convallis. Vivamus viverra sodales risus, nec pulvinar dui lacinia quis.
Vulputate dictum – Heading three
Proin nec lacus in urna fermentum laoreet dictum vitae massa. Duis pulvinar accumsan enim vel cursus. Vestibulum porttitor pellentesque commodo. Maecenas eu mauris eget erat dapibus ullamcorper ac id sapien. Sed molestie vulputate dictum. Etiam et sem leo, ut pulvinar libero.
Vulputate lacus – Heading four
Proin nec lacus in urna fermentum laoreet dictum vitae massa. Duis pulvinar accumsan enim vel cursus. Vestibulum porttitor pellentesque commodo. Maecenas eu mauris eget erat dapibus ullamcorper ac id sapien. Sed molestie vulputate dictum. Etiam et sem leo, ut pulvinar libero.
Typescale
Open Sans has a similar visual feel to the current font, Trebuchet, while offering a wider range of weights and has more modern spacing and hinting to look good at all sizes.