Typographical features

For this post I have looked at two websites which I have taken their information about typography as the are really helpful for understanding setting up text and types of text that I may use in the book I am making.

http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces/

1. Definitions

Legibility vs. readability

Legibility is concerned with the very fine details of typeface design, and in an operational context this usually means the ability to recognise individual letters or words. Readability however concerns the optimum arrangement and layout of whole bodies of text:
An illegible type, set it how you will, cannot be made readable. But the most legible of types can be made unreadable if it is set to too wide a measure, or in too large or too small a size for a particular purpose.(Dowding 1957, p.5; in Lund, 1999 )

Typographical features

There are many elements in the design of a typeface which can contribute to its legibility.

Serif / Sans Serif

“Serifs” are the small finishing strokes on the end of a character. “Sans serif” fonts do not have these small finishing strokes.

Examples of serif and sans serif letters

Point size

Point size is perhaps the element most used to describe the legibility of a type face, but it can also be the most deceptive. Point size is a legacy from the letterpress system, where each letter is held on a small metal block. The point size actually refers to the size of this metal block, and not the actual size of the letter. The letter does not have to take up the full area of the block face, so two fonts with the same nominal point size can quite easily have different actual sizes. ( Bix, 2002)

The difference between point size and actual letter size (Image © Bix, 2002)

X-height

X-height refers to the height of the lower case “x” in a typeface. It is often a better indicator of the apparent size of a typeface than point size ( Poulton, 1972 ; Bix, 2002 ).

X-height

Counters

Counters are the “negative spaces” inside a character. They are also good indicators of the actual size of the type.

Counters

Ascenders and descenders

Ascenders and are the vertical strokes which rise above the body of a character or x-height. Descenders are strokes which fall below the baseline of the x-height.
The difference between a Typeface and a Font:Typefaces are a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold belong to the Typeface Helvetica). Fonts, on the other hand are weights or stylse within that family (such as Helvetica Bold).

 Typeface Classifications:
Typefaces come in different designs. Some of these differences are subtle, while others stand out. On a broader sense, typefaces are usually classified into two categories : Serif and Sans serif. These two categories are not at all enough to support the deluge of typefaces that have been designed by many type designers. The following image gives a overview of the most basic classification of typefaces.

http://www.vanseodesign.com/web-design/grid-anatomy/

"Recently I’ve been trying to expand my knowledge and skills working with typographic grids. On the knowledge side I sought out definitions for the different parts of a grid, specifically a modular grid.

I couldn’t find much online and turned to some of the books I have instead. I assume other people have had the same trouble searching and thought it might be helpful if this information was more readily available online.
Most of the information in this post comes from Timothy Samara’s book Making and Breaking the Grid.

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid.
A little further down the page I’ve added an image showing these common grid parts, which you hopefully find helpful as you read through their descriptions below.

Format

The format is the area in which the design sits. In a book or magazine the format is the page. On a website the format is the browser window.
The format defines the live area of a design where type, images, and other media are present.

Margins

Margins are the negative space between the edge of the format and the outer edge of the content.
The proportions of margin help to establish the overall tension (or lack of tension) in a composition. The smaller the margin the more tension is created.
Larger margins create more whitespace and help focus attention on the positive space of the design. Larger margins also help the eye find a place to rest and can be a good area to place subordinate information.

Flowlines

Flowlines are horizontal lines that break the space into horizontal bands. They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.
When elements are aligned to the top of a flowline it’s called a hangline as the elements appear to hang from the line.
Type is often aligned to a series of flowlines equally spaced down the page called baselines. The base of the type sits on the line, hence the term. Aligning type to a baseline can help establish a vertical rhythm in a design.

Modules

Modules are individual units of space that are separated by regular intervals. Modules are the basic building blocks of grids. When repeated they create columns and rows.
Ideally the width of a module will be based on the measure of a line of text. The height would be based on some multiple of the type’s leading or line-height.
The upper left corner of a module is considered to be the active corner and the lower right corner, the passive corner.

Spatial Zones

Spatial zones are fields of adjacent modules. Each field can be assigned a specific function within the design.
A long horizontal field might be used to place long horizontal images. A long vertical field might be used for long blocks of text. A large rectangular field might be used for video.
Design elements will often be placed inside a field or spatial zone as opposed to a single module.

Columns

Columns are vertical bands of modules. There can be any number of columns in a grid. More columns leads to more flexibility, but can also make the grid difficult to work with.
Column widths can be equal or they can vary across a grid.

Rows

Rows are the horizontal equivalent of columns. Online it’s harder to plan for rows as the height of the format is often inconsistent and dynamic.
On some pages your design may call for a fixed height, though on most pages your design is allowed grow vertically with the content.

Gutters

Gutters are the spaces separating modules either vertically or horizontally. Typically we think of gutters as the space between columns, but they are also the space between rows.
The minimum width or height of gutters should be an ‘em’ though this should usually be larger to better separate columns from columns and rows from and rows. The height of horizontal gutters should be based on the leading or line-height of the type.

Folio

Folios are created when page numbers are placed consistently in the margin, usually above or below the composition.

Running Header or Footer

A running header is a guide at the top to indicate your position in a manuscript. You’d find information like title, chapter title, section title, author, etc located here. A running footer is then this information is placed at the bottom of the format.

Markers

Markers are placement indicators for subordinate or consistently appearing information. Markers can be used to denote the location of folios, page numbers, etc.
These last 3 are more commonly found as described in print, but there’s no reason they couldn’t also be used on a website.
For example blog posts aren’t usually given page numbers, but they often display the publication date. When present the date is usually shown at the top of the post, but there’s no reason it couldn’t be included in a running header or as a substitute for the page numbers of a folio."