Choosing typefaces Print and Screen

One area I have been consciously trying to develop is my understanding of Type and Layout.  Since Typo I have been dipping into a couple of books:

And also checking some websites.
What is becoming evident with Typeface choice is whilst there are no hard rules there are Typefaces which are appropriate or inappropriate.

I found Will Harris through Typophile.  His website is a mine of information.  He recommends typefaces which can work together.
The best combos tend to be a serif and san-serif from the same Type designer or foundry.  Our from the same period

Ive had a look at Memphis the Slab Serif I have chosen for the logo for Circus.

Background

Egyptian, or slab serif, typefaces surged to popularity in the early 1800s. Memphis was the first Egyptian revival, designed by Dr. Rudolf Wolf in 1929 for the Stempel foundry. The letter shapes are geometric and stems and serifs have the same weight values.

Designer(s) Rudolf Wolf
Foundry(ies) Linotype , D Stempel AG
Release Year 1929
Country of Origin Germany
Classification Serif, Slab Serif, Geometric Serif
Original Format Metal (Foundry) Distributor(s) Adobe Tags geometric, slab serif

This http://typedia.com/search/release-year/1929 website is quite good as you can search for typefaces with the same release dates, authors and Foundries.
memphis-typeface_27

In addition to evolving from Modern “fat-face” typestyles, Dr. Rudolf Wolf’s conception for Memphis drew heavily from the 1927 geometric sans-serif typeface Futura by Paul Renner. Memphis may well be regarded as a serif variant of Futura, hence the appellation “Futura with serifs”.

I am going to try using Memphis and Futura.  Need to experiment as Futura is san serif font and so may not be the best choice for the body copy. Also Memphis is based on a display typeface so again may not work as a body copy typeface.

I am aware the Barbican use Futura across their literature.  Their Brand Guidelines are here.



A few tips on chosing web fonts

Hinting--this can make or break any screen font. Simple font shapes are easier to read. Slab serif, and sans serif faces tend to be easiest to read. Most people find serif faces more familiar--even on-screen. So sans serif type isn't necessarily most comfortable for people to read.

Larger x-heights help, because they give each letter more pixels to work with. Too high of an x-height, however, can make it difficult to distinguish between upper and lower case, and can make lines look crowded without extra leading.

Character spacing is crucial--
fonts that are too tight cause letters to touch on-screen. Touching letters make on-screen reading much harder. Faces with a little extra space between the characters are much easier to read on-screen. The two keys to making type readable are size and space. You can use any font you want, no matter how complex or wacky--if you use it large enough. But the best size to use for body text is the default browser size, normally +0 or "12" When you choose the default size, your visitors will see type set in the size they chose for their default--hopefully the size that's most comfortable for them and easiest to read. You can go one size smaller (-1 or "10") but I've found from thousands of reader letters, that readers are happiest when type is at the default size. They're so pleased that it's easy to read and can't figure out why it is on your site but not others. People would rather have larger type and scroll than smaller type and not scroll.

Biggest size don't - Points and Pixels
If you use CSS to specify the size of your type, do not use points or pixels as your unit of measure. This is a common mistake, and a bad one. When use you points or pixels, you lock out the browser's ability to make type larger and easier to read, so people are stuck with your size--which if you look around at sites that do this, is inevitably too small. Points and Pixels also create cross-OS problems. Font sizes on the Mac and Windows are different, and when you lock them in with these units of measure, they're going to appear too small on one system, and too big on another. So what do you use? Ems or %. an Em is the width of the upper case letter M in a font. This is a standard graphic design term (even if you haven't heard of it). Ems are scaleable, based on the visitor's default browser size. Percentages are just that--percentages of the default browser size. This means if people set their font larger, your sizes are scaled appropriately. So say your body size is the default, and your headers are 200%, they'll be twice the size of the default text. If you use these settings you can still set type with precision, without locking people into type sizes they find hard to read, which can cause them to leave without reading.

Line Length
One key to easy to read type is line length. The optimal length of a line of text should be between 40 and 70 letters long. Shorter than that and it's disruptive. Longer than that and people have a hard time finding the next line, so it slows reading. If you use the default browser font, a good rule of thumb is that your text blocks should be around 400 pixels wide. You may get a few people asking, "Why doesn't the text run from one side of my screen to the other," as if you are wasting space somehow. But if you did have very long lines, fewer people would read, and this would defeat the purpose of your site!

Horizontal Spacing / Tracking
Using CSS, it's also possible to change the "tracking" of type--the amount of space between letters. Because of the low resolution of the computer screen, letters that touch are doubly hard to read, so having a tiny bit of space between each letter, so they're distinct, is a real advantage. Georgia and Verdana have this. If you use default fonts, you don't need to add extra tracking, and you should not tighten the tracking to make the letters closer. It's a huge mistake that's guaranteed to make it harder to read your text. Use web-safe, undithered background colors and low-contrast backgrounds Solid colors are always less distracting, but low-contrast images can work for pages that use large text. The easiest-to-read text is black text on a white background. Patterned backgrounds decrease readability, so consider putting your graphics on the side, rather than under your text. Some people claim that lightly textured backgrounds help readability. But in reality, thee added "visual noise" and cluttered of these backgrounds really just makes each character less distinct and more difficult to read. So, keep your backgrounds pure. Don't set type in colors other than black People confuse colored text for links--and text set in colors is harder to read than text set in black