Typography:

(from the Greek words τύπος (typos) = form and γραφή (graphe) = writing)

“Is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern times, typography has been put into motion—in film, television and online broadcasts—to add emotion to mass communication.”

Wikipedia

I must be honest and say that I’m still on the typography learning curve. It takes a bit of time, experimentation, reading and more practice. However, for me it’s one of the more interesting parts of Web Design and well worth the study it needs to be successful at it. In the end though it’s up to you, the visitor to tell me if I got it right here on “The Miner Bits”.

On this page I’ll talk about what I’ve done with the typography on ‘The Bits’ and demonstrate some aspects of the subject that you may find interesting. I’ll also list several good typographic and web-typography resources; if you’re interested in the subject I highly recommend that you take a look.

Before getting into too much detail let’s take a look at some basics of typography. You’ll notice that some of the material on this page repeats what is in some of the links here in the basics area…Oh well, repetition can be a good thing.

image of carved wooden typefaces

Wood Type   1) “Clarenden Extended”   2) “Unidentified Typeface”   3) “Norwich Aldine”

Some Basics of Typography

Maximization of shareholder wealth through separation of ownership from management whenever single-loop learning strategies go wrong, motivating participants and capturing their expectations. The balanced scorecard, like the executive dashboard, is an essential tool the components and priorities for the change program by moving executive focus from lag financial indicators to more actionable lead indicators. From binary cause and effect to complex patterns, quantitative analysis of all the key ratios has a vital role to play in this by adopting project appraisal through incremental cash flow analysis. Benchmarking against industry leaders, an essential process, should be a top priority at all times that will indubitably lay the firm foundations for any leading company highly motivated participants contributing to a valued-added outcome. Presentation of the process flow should culminate in idea generation, exploiting the productive lifecycle empowerment of all personnel, not just key operatives.

Basics of Typography Resources

“A Specimen, a broadsheet with examples of typefaces and fonts available.

Printed by William Caslon, letter founder; from the 1728 Cyclopaedia.”

Type On The Web

Type in print and type on a screen are similar and different at the same time. Printed type has very a high resolution (sharpness of each letter) compared to type on a screen. I’m sure you’ve noticed how type looks and the various screens you use in your day-to-day life. Type on the web needs to be treated differently than in print in order to make it easier to read.

There are a number of factors that affect how type will look on a screen; one is the screen you’re viewing the type on; its size, resolution, ambient lighting, etc. A few other factors are listed in the opening paragraph from “Type rendering” in the Typekit Blog.

“When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks.”

Web Type Resources

  • “Type Study”

    The section of the Typekit blog has some very good articles on the subject of web typography from the very basic how-to’s on up to fairly advanced topics. Make sure to check out the ‘Previous Entries’ link at the bottom of the first page. Typekit is also the web font service I use, more on that below.

  • “Type Rendering”

    A collection of articles discussing how fonts are rendered on your screen and why it matters… From the Typekit Blog

  • №4

“Love Will Tear Us Apart” – Typographic Tattoos

From ‘Typographic Tattoos by Tattify’

Typefaces, Fonts and “The Miner Bits”

Maximization of shareholder wealth through separation of ownership from management whenever single-loop learning strategies go wrong, motivating participants and capturing their expectations. The balanced scorecard, like the executive dashboard, is an essential tool the components and priorities for the change program by moving executive focus from lag financial indicators to more actionable lead indicators. From binary cause and effect to complex patterns, quantitative analysis of all the key ratios has a vital role to play in this by adopting project appraisal through incremental cash flow analysis. Benchmarking against industry leaders, an essential process, should be a top priority at all times that will indubitably lay the firm foundations for any leading company highly motivated participants contributing to a valued-added outcome. Presentation of the process flow should culminate in idea generation, exploiting the productive lifecycle empowerment of all personnel, not just key operatives.

‘Font’ vs. ‘Typeface’: Which Is It?

“Font or Typeface?”

This is a very clear-cut discussion of the two terms. Various typographers give their input on the topic: my favorites are this one by Stephen Coles

“When you talk about how much you like a tune, you don’t say: “That’s a great MP3”. You say: “That’s a great song”. The MP3 is the delivery mechanism, not the creative work; just as in type a font is the delivery mechanism and a typeface is the creative work.”

And this one by Norbert Florendo…

font is what you use, and typeface is what you see.”



About “Web–Safe Fonts”

“Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor's operating system.” Wikipedia



Choosing & Combining Fonts

“…communication comes before style”

“Many times, a typeface just strikes you for some reason as appropriate. Your right brain knows it but your left brain can’t understand why. If you can make it work based on that alone, go for it.”

Douglas Bonneville……in Smashing Magazine

Let’s take a look at one aspect of Web Typography that is as far away from being technical as it possibly can be: choosing fonts and combinations of fonts.

If there is a formula for deciding which fonts to use and which go well together I haven’t found it anywhere…yet. But, fortunately there are specimens of great typography and truly useful advice for us reaching from the present back for centuries. I’ve spent a good amount of time reading typography websites and books looking for tips on how to best use, pick, typeset and combine fonts. What I’ve found are many excellent resources with information on how to choose fonts, how to best set them and how to do all this with CSS to put good typography on the web. Some of the best, in my opinion are:




Typefaces of “The Miner Bits”

Now for some real fun!

Below is a list of all the typefaces used here in The Miner Bits. Each is a favorite of mine…Let’s take a look:

Serif Typefaces

  • FF Tisa Pro – The first serif typeface in the list is also among my favorites. You can see it in the text areas of the “How To Free-View Stereo Images” and “A Modest 3D Gallery” pages.

    Here’s what Typekit says about the FF Tisa Web Pro.

    “Mitja Miklavčič drew FF Tisa to meet the technological and aesthetic requirements of modern magazine use. His goal was to develop a softer, more dynamic version of a nineteenth-century slab serif wood type. A large x-height and pronounced serifs make FF Tisa extremely legible in text sizes and its unique design details and a fairly upright italic become evident in display applications. The typeface was selected by the TDC judges for a Certificate of Excellence in Type Design in 2007.”
  • Garvis Pro – is next serif typeface and it can be found on the “Talk To The Bits” page (or go HERE to choose a different color ‘contact us’ page).

    Here’s what Typekit says about the Garvis Pro.

    “Inspired by both turn of the century neoclassical forms and Dutch Fleischmann Type, Garvis is designed to bring the character of those typefaces into more modern times by increasing the sturdiness of the forms without losing their character. At display sizes, this typeface displays the subtle inconsistencies commonly found in traditional metal type printing. This detail is designed to virtually disappear at text size so as not to become distracting while still giving the text a warm, human quality.
  • Jubilat – This sans–serif typeface can bee seen on the “Typography and The Miner Bits” and “Bits O’ Web Type” pages.

    And what does Typekit say about Jubliat?

    “Jubilat explores the history of the slab serif, with generous curves and efficient spacing in both dimensions. Its large lowercase and high contrast make it suitable for headlines, decks, and sidebars.”
  • Goudy Bookletter 1911 is a long time favorite of mine. ther’s something about it that says – time tested.

    Typekit has this to say about the typeface…Actually they don’t say anything about it. But the type foundry that created, The League of Moveable Type, does

    “Designed by Barry Schwartz and based on Frederic Goudy’s Kennerley Oldstyle. Notes from Barry: This font predates the League and is in the public domain. A few words on why I think Kennerley Oldstyle is beautiful: In making this font, I discovered that Kennerley fits together tightly and evenly with almost no kerning. Thus the following words from Monotype specimen books are just: “[W]hen composed into words the characters appear to lock into one another with a closeness common in early types, but not so often seen in later-day creations.” These are letters that take command of the space around them; notice, for instance, the bowed shapes of the V and W."

Sans–Serif Typefaces

  • Prenton – has quickly become my favorite sans-serif typeface. You’ll find in on the The Miner Bits’ homepage and the Infrared Gallery.

    Here’s what Typekit says about Prenton:

    “Born of an award winning pedigree, Prenton is an elegant and meticulously drawn sans serif typeface by Roy Preston of Great Britain. Perfect for intricate text settings, it is an extensive family of typefaces containing twenty-one weights in all. This wide-ranging variety provides a solid foundation for lengthy and complex typographic layouts.”

Typeface Resources

  • Typography articles on “A List Apart”. ALA is one of the best resources for all topics related to the web and this collection of articles on Typography contains valuable and useful information.