Typography

From Getting Involved!
Jump to: navigation, search

Typography is the art of improving readability. Letters play such an important role in our lives that we hardly notice them consciously. Typography is an applied art, although one we encounter in everyday life. Saying that there is an art to typography means that texts with bad typography irritate readers. Although Word, [OpenOffice] or [LibreOffice] can help us write and design texts, we should increase awareness of what goes into this process. The goal of this section is to support you in putting your texts and materials into the right context by using the proper letters and fonts.

[edit] Enhancing Comprehensibility

The main definitions for this toolbox
Typography enhances comprehensibility. Important aspects of typography include logical structure, order, and overview. However, typography works only when the texts themselves are clear, logically assembled thoughts presented in a clear textual structure. The box on the right shows how we define this structure.

People often define these elements more associatively or after a text is already written. But by developing a text associatively without having such a strucure in mind means that you will spend a lot of time applying a structure afterwards. The resuilt may be that neither the text nor the design looks convincing. Instead, you should follow these principles for achieving synergy between letters and text:

  • Use functions like headlines, citations, and accentuations in a hierarchical way, in the same style throughout the whole document
  • Limit your concept to only a few font-faces, font-sizes, and styles.
  • Use style sheets and paragraph styles for formatting.
  • Make decisions about the text structure before you start writing. Follow them throughout all of the text
  • Standardize and apply text styles.
  • Rephrase illogical or badly structured parts.

[edit] Styles

The choice of your typography makes a statement about you to your internal and external stakeholders. Your type design represents your values, goals, and your style. Therefore, typography is a core element of your Corporate Design.

Font styles are often categorized based on historical developments such as in DIN 16518]. An illustrative presentation of this approach can be found here: designguide.at].

Following this chronological order, we see that 20th century was marked by an increasing popularity and number of sans serif fonts, developed from antiqua or designed after new constructivist geometrical principles. The diversity of antiqua variants that were developed with the latest technology is also striking. Many of them transcend old systems and categories and combine different styles and influences. More to the history of letters and publication: Online Exhibition of the German Museum of Books and Writing

In Corporate Design typography has become more important in the last 20 years. A lot of money has been spent on corporate typefaces, which means they were developed individually based on the needs of a contractor. We recommend following the idea behind corporate typeface and typeset. For example:

  • Conscious choice of a typeface and typeset that best suits your goals, values, and approach
  • Integration of typography in a general design concept, following a Corporate Identity
  • Reflection on the various perceptual patterns of different stakeholders

[edit] Macro-Typography

Page spread: The red lined space for content is defined in relation to the whole space.
These basic definitions also include those elements where fonts meet with content and other design elements on paper or a screen. For example:
  • Page spread (relation between content space to non-printed space)
  • Grid system
  • Line-height, gutter margins, letter-spacing (tracking)
  • Font families, faces, sizes
  • ...

[edit] Choice of a Font

The internet is an amazing resource for fonts. But often the cheap fonts that are available have disadvantages. For example, free fonts often have no special characters from languages other than English.

When planning bilingual publications you demand and need more from a font. Your font must contain characters for all the languages you use. The advantage of standard fonts in big word processing programs and computer systems is that they cover a lot of languages. If you'd like to use special fonts, make sure that people working with your texts are able to install these fonts as well. Some criteria for the selection of fonts

  • The combination is right - the fonts match
  • Completeness: They contain all the necessary characters
  • Representation: The fonts represent you appropriately to most stakeholders
  • They are legal to use
  • They might work in the different types of media you want to use

[edit] Terminology

Typesetters developed a specific terminology that they are still using today. It involves typo and print democratization - and they are right unless typesetting request love to the detail and accuracy. Miccro-typography especially involves some specific terms. We will explain a few:

Term Explanation

Signs or
Fonts

Letters, interpunctuation marks, special characters, other characters - designed in the same form and style.


Face or
Style

The varieties of a font: condensed. light, italic, bold, semibold, or extrabold/black...


Font faimly

All faces of a font belong to one family. The Open Sans family, used here, has ten font-faces.

Character set

All glyphs/letters that a font includes - Western, Arabic, Central European, Cyrillic...

Special character

All glyphs that do not belong to the limited standard typeset in English. Examples include the German Ä, Ö, Ü, interpunctuation (such as the dash – used correctly here instead of the shorter "minus" -) or ligatures.

Ligatures

Signs that unite difficult letter combinations like "ffl". A ligature substitues f-f-l with only one letter: ffl

line-height

space between the rows

Alignment or range

Flush left means that the text is aligned at the left margin, flush right at the right. Justified means that the text is aligned at both margins of the column or page.

Unicode

In contrast to the limited ASCII format for digital files, unicode contains more characters and it integrates characters of different languages.

Open Type Font (OTF)

The new standard for font files. Beyond normal characters it often contains special characters. It still uses digital formats that are true type (TTF) and Postscript (PS).

[edit] Micro-Typography

The development of typography is connected with the history of book printing. Therefore we have different rules and conventions in different countries. We demonstrate this with the example of quotation marks.

»A German citation with French quotation marks pointing to the inside«
«A Russian citation with French quotation marks pointing to the outside» 

Typefacts shows an easy to understand introduction.

[edit] Names and Special characters

Especially in international publications, you must follow language rules. Special characters help to make things clearer, even if they don't mean anything to you. A Hungarian can see the difference between Ö and Ő, an English author might use a simple O for both, which might sometimes give a word an incorrect meaning. Förderung means support in German, while Forderung means request.

Transcriptions should be used consistently. Not everybody knows that Lodsch, Lodz und Łódź are the same city. The same for Lemberg, Lwów, Львов, or Lviv – here national perceptions play a role.

Supporting institutions and invited individuals also want to be mentioned with accuracy. They often have rules set up as to how and where they want to appear in a publication.

In Russian, the Theodor-Heuss-Kolleg is a Коллегия им. Теодора Хойсса.

Which is different than Коллегия имени Теодора Хойсса. 

The Robert Bosch Stiftung  has chosen to keeps its full name in German, and should not
be translated into Robert Bosch Foundation . 

The same applies for individuals

Prof. Dr. Petra Kullová
Krzysztof Jagiełło

[edit] Numbers

Often you have to include numbers like telephone numbers or bank account numbers. Here you find traditions specific to the country involved. But the same thing applies here as it did for micro-typography in general: Be consistent. Germany uses the following system:

According to German DIN 5008 and International Telecommunications 
Union Standard E.123, Telephone numbers should be listed as: +49 30 315174-80 or 030 315174-80

Rule: The functional parts are separated from each other by a space character (or a dot): country city number -extension

International Bank account number (German notation): DE11 2222 2222 2222 2222 22
Bank Identifier Code: ABCDE6FG

Rule: Starting from the left, the IBAN number is seperated in 4-digit columns. The BIC is set without separators.

Date after ISO 8601: 2004-07-11

Rule: YYYY-MM-DD.

[edit] Typography on the computer and on web

Browsers will by default only display those fonts that a user has installed. Fonts can be simply installed by copying to a folder:

Windows: C/Windows/Font
Linux: home/.fonts (or double-click on the file and follow the instructions for installing the font) 
Mac: /Users/Your_username/Library/Fonts (or use font book to install).

[edit] Standard fonts

Usually, only the fonts belonging to an operating system are installed. Fonts that are included in Microsoft Office's bundle are also widespread, but one cannot assume that everyone has these fonts. This is why only a very few different fonts are used on the web.

Sans-serif fonts: Arial, Sans-serif, Helvetica, or Verdana
Serif fonts: Times New Roman, Times, or Georgia

Watch out! Verdana and Georgia are clearly distinguishable fonts. Arial and Sans Serif, on the other hand, almost look the same to an average user – they have different names because they belong to different operating systems.


[edit] New method: font-face

When using the style sheet language "CSS" and the CSS-command "font-face," a browser can also display other fonts. Today, this works quite well – although not for print previews of documents. But: The fonts have to be permitted for this method. Using a font that is protected by copyright is liable to prosecution.

[edit] Tools & Resources

We have compiled some useful sites and tools for using typography: Typography resources

Personal tools
Namespaces
Variants
Actions
In other languages