6 Degrees Networking - Edinburgh Soirée with Brian Halliday

Paragraphs are the core building block of typography online. You want to make sure you’ve got a good line-height and horizontal width—aka measure—for good readability. If you stack your lines too close together, or too far apart, lines become harder to read. Like a staircase where the steps are too shallow or too steep. The standard line-height online is something between 1.5 and 2.0 ems.1 If your lines stretch too far across the page reading can feel like a tedious marathon. The standard single-column width online is about 70-90 characters.

If you look at the source code you’ll notice how the .sidenote to the right was written before this paragraph, which it is supposed to directly relate to. You’ll probably want to set up your asides in the same manner.

These are the simple beginnings of Type-a-file. We’ve put in a lot of work to make good typography easier for you. Colors & structure we leave to you, but typographically, we got you covered. Download the file and follow the instructions for installing and setting it up. Now we’ll get into some of the fancier elements we’ve built into Type-a-file.

Puttin’ on the Ritz

Sometimes you want an opening phrase to pop. You could just put it in bold tags, but wouldn’t you rather use semantic markup?2 We’ve created a class called .run-in so that you can! Best practices claim you’ll usually want to keep those run-ins to one line.

Typically you want a nice, steady vertical rhythm to your page. Of course, some folks don’t Speaking of intelligently deviating…think that it’s actually necessary on the web to stick to a baseline grid, but it can be a great guide from which you can intelligently deviate. Speaking of intelligently deviating, there are some key elements that make great deviations from the monotony of paragraphs: the “quotes.” These include blockquotes and a special Type-a-file class named “pullquote.” The latter is above, the former below:

Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.

Robert Bringhurst

Delineate, Demonstrate, Define

This Type-a-file would of course be incomplete without specifications for lists, codes & definitions. It’s fairly common to indent both blockquotes and list elements, but seriously consider left aligning your text for these items and outdenting their bullets & other visual demarcations. It can present a cleaner appearance while also drawing focused attention to information points.

1. This is a list that is well ordered.
2. It starts with one and goes to two.
3. Then it has a third item.
4. Followed by the fourth, and—in this case—last item.

• Un-ordered lists are just as simple.
• The only difference being that the items are marks by bullets instead of numbers.
• Don’t forget that lists can have list titles.
• Finally we’ve reached the last un-ordered item.

Eventbrite registration form

This is a paragraph within a fieldset.

Standard Input Standard Input Standard Input Button