Articles Tagged with “Typography”
22/06/2007: A New Look for TobyInkster.co.uk
This site has had a few facelifts recently. Hopefully this one will stick. It’s based on two main principles:
- Use Hoefler Text for copy. It’s an absolutely gorgeous font which comes with Mac OS X that I was recently using on a printed document. Hoefler has a delicious set of italic glyphs — they were properly designed in their own right — they’re not just sloping versions of the roman (non-italic) glyphs. It also uses ascending/descending numerals, which look a lot nicer in the normal flow of text than block numerals do. Garamond and Georgia are reasonable substitutes when it’s not available.
- The Guardian (newspaper, not website) looks good; copy it! That’s where I got the idea for the small blue “TobyInkster.co.uk” heading at the top of each page.
I’ve combined this with a few other minor ideas:
- Numbers and bullet points from lists hang into the margin. The last couple of versions of my site did that too.
- Use classical ratios for font sizes. Assuming your browser default text is 12pt, then…
22/06/2007: Typography in demiblog
I’ve said it already, and I’ll say it again: typography is a very important and oft-neglected aspect of web design. demiblog is my CMS; although great typography requires the conscious effort of the author/typesetter, and can’t be handled automatically by a CMS, there are certainly steps a CMS can take to ease the burden on its users; in this article I’ll outline some of demiblog’s features that help typography.
The Asterism
Let’s start with the most suprious of features. In printing, it is common to mark a break in the flow by a centred paragraph consisting of just three asterisks (* * *).
If you create a paragraph in demiblog which consists of just three asterisks and no spaces in between then demiblog will detect this as a dividing mark and can be configured to replace it with a different dividing mark. This can be something as dull as an HTML <hr> tag, which adds a bevelled…
16/06/2007: Typography Links
Most of the really pleasant web designs I see seem to display more than a little evidence of classical typographic knowledge. Here’s my collection of typography-related resources, including links to some classic (and some common) fonts.
Tips and Tricks
- Mark Boulton: Five Simple Steps to Better Typography
- Richard Rutter & Mark Boulton: Web Typography Sucks
Particular Characters
- Mark Boulton: The Right Glyph for the Job (ellipsis, quotes, ligatures)
- Mark Boulton: Dashes
- A List Apart: The Trouble with EM ‘n EN (dashes, hyphens, spaces, quotes, primes, ellipsis)
- “Jukka Korpela: Dashes and…
Fonts
A lot of web designers like to set specific font sizes on their web pages. Why do they do this? Simply because they don’t trust people to have decent default font sizes and assume that they can pick a better size. With an open mind, let’s examine whether this is a logical assumption. There are three possibilities when it comes to default font size…