Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-08-31T10:58:06Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}
[[Category:English]]
[[Category:Typography Basics]]

{{BR}}
= Introduction =

Typography is the art and technique of arranging written language so that it is '''legible, readable, and appropriate for its purpose'''. You meet typography in workshop instructions, safety notices, invoices, menus, labels, websites, presentations, packaging, technical documentation, and job applications. Good typography helps people find information quickly and reduces avoidable confusion.

In this aiMOOC, you learn the vocabulary and practical decisions behind clear type. The course is designed for apprentices, trainees, and vocational students who create documents or visual communication for real work situations. You do not need specialist design software. You can apply the same principles in word processors, presentation tools, layout programs, web editors, and many workplace systems.

{{#ev:youtube|https://www.youtube.com/watch?v=sByzHoiYFX0|500|center}}

'''Learning goals:''' By the end of the course, you should be able to distinguish a [[English:Typeface|typeface]] from a font, identify common type categories and letter anatomy, control spacing and alignment, build a clear [[English:Visual hierarchy|visual hierarchy]], judge readability and accessibility, and improve typography for a practical workplace task.

{{BR}}
= What Typography Controls =

Typography is more than choosing a typeface. It includes decisions about typeface, style, weight, size, line length, line spacing, letter spacing, word spacing, alignment, contrast, and the relationship between different text levels. These decisions affect how fast a reader can scan a page, where the eye goes first, and whether the message feels formal, technical, friendly, urgent, or calm.

A useful vocational rule is '''purpose before decoration'''. Start by asking: Who will read this? What must they notice first? Where will they read it? What mistakes would matter? A decorative solution that weakens clarity is usually a poor workplace solution.

{| class="wikitable"
! Decision
! Main question
! Workplace example
|-
| Typeface
| What visual voice fits the message?
| A clean family for a maintenance checklist
|-
| Size and weight
| What needs the strongest emphasis?
| A large bold warning heading
|-
| Spacing
| Can the eye move comfortably through the text?
| Clear line spacing in an instruction sheet
|-
| Alignment
| Can the reader scan the structure quickly?
| Consistent left alignment in a form
|-
| Hierarchy
| What should be read first, second, and third?
| Title, task step, then supporting note
|}

{{BR}}
= Typeface, Font, and Family =

A '''typeface''' is the overall design of a set of letters, numbers, punctuation marks, and other symbols. A '''font''' is a particular implementation or variation of that design, such as a specific weight or italic style. In everyday software, people often use the two words interchangeably, but the distinction is useful when you work with design systems or production files.

A '''type family''' may contain several related fonts: regular, italic, medium, semibold, bold, condensed, and other styles. Using several weights from one family can create hierarchy while keeping a document visually consistent.

[[File:Free Serif.svg|450px|frameless|center]]

'''Practical example:''' A company form might use one type family throughout. The title could be bold, section headings semibold, and body text regular. This creates contrast without introducing several unrelated typefaces.

{{BR}}
= Common Typeface Categories =

The most useful beginner distinction is between '''serif''' and '''sans serif''' typefaces. Serif letters have small finishing strokes on parts of the letterform. Sans serif letters do not have those serifs. Both categories can work well in print and on screens when the design, size, spacing, and context are appropriate.

[[File:Difference between serif fonts and sans serif fonts demonstrated on the letter pair Sy.jpg|500px|frameless|center]]

'''Display''' typefaces are designed to attract attention, especially in headings, posters, packaging, or short labels. Their strong personality can be useful in small amounts, but they are often tiring in long body text. '''Monospaced''' typefaces give each character the same horizontal advance width and are common in coding, data displays, and some technical contexts.

{{#ev:youtube|https://www.youtube.com/watch?v=YekEQIJ-J5U|500|center}}

When choosing a typeface, judge the actual letterforms and the job they must do rather than relying only on category labels. A good choice supports the content, includes the characters you need, works at the required sizes, and is licensed for the intended use.

{{BR}}
= Letter Anatomy and Typographic Lines =

Knowing basic letter anatomy helps you compare typefaces and diagnose readability problems. The '''baseline''' is the line on which most letters sit. '''Cap height''' describes the height of capital letters. '''X-height''' describes the height of a lowercase x and is a useful reference for the apparent size of lowercase letters. An '''ascender''' rises above the main lowercase body, while a '''descender''' falls below the baseline.

[[File:Typography Line Terms.svg|600px|frameless|center]]

Other useful terms include '''stem''' for a main vertical or diagonal stroke, '''counter''' for an enclosed or partly enclosed space inside a letter, and '''serif''' for a finishing stroke. You do not need to memorize every anatomical term before you design, but you should be able to explain why one typeface is easier to distinguish at a small size than another.

[[File:Typeface - Anatomy.jpg|550px|frameless|center]]

{{BR}}
= Spacing: Kerning, Tracking, and Leading =

Three terms are especially important in production work.

'''Kerning''' adjusts the space between particular pairs of characters. Pairs such as AV, To, or WA can look uneven if their shapes are not optically balanced. Good fonts usually contain kerning data, but headlines and logos may still need careful checking.

[[File:Kerning EN.svg|550px|frameless|center]]

'''Tracking''' changes the overall spacing across a range of characters. Small tracking adjustments can affect density and tone, but extreme tracking can damage word recognition. Do not use tracking as a substitute for choosing a suitable typeface or line length.

'''Leading''' is the vertical spacing between lines of text. The term comes from traditional typesetting, where strips of lead could be inserted between lines. In digital layout, it is commonly discussed as line spacing or baseline-to-baseline distance. Too little makes lines collide visually; too much breaks the connection between lines.

[[File:Leading.svg|450px|frameless|center]]

A practical method is to set a comfortable body size first, then adjust line spacing while reading a full paragraph. Judge the result in the real medium and at the real viewing distance.

{{BR}}
= Alignment, Measure, and White Space =

Text alignment creates structure. '''Left-aligned''' text is a strong default for English body copy because readers can return to a consistent starting edge. Centered text can work for short headings, invitations, or labels, but long centered paragraphs are harder to scan. Right alignment can be useful for short special cases. Justified text creates even left and right edges, but poor word spacing can create distracting gaps or "rivers."

[[File:Alignment.PNG|500px|frameless|center]]

'''Measure''' means the length of a line of text. Lines that are extremely long can make it difficult to find the next line; very short lines can interrupt reading rhythm. There is no single perfect line length for every typeface, language, device, or workplace context, so test the real content instead of treating one number as a universal rule.

'''White space''' is not wasted space. It separates groups, gives headings room to work, and makes relationships clearer. Alignment and white space therefore work together with typography.

{{#ev:youtube|https://www.youtube.com/watch?v=a5KYlHNKQB8|500|center}}

{{BR}}
= Hierarchy and Emphasis =

A typographic hierarchy tells the reader what matters first. You can create hierarchy through size, weight, position, spacing, case, and typeface contrast. The strongest element should correspond to the most important information, not simply to what looks dramatic.

For a maintenance instruction, a useful order might be: document title, safety warning, task heading, numbered action, supporting explanation. For an invoice, it might be: company identity, invoice label, amount due, due date, then detailed line items.

Use emphasis selectively. '''Bold''' is usually more effective than making every important phrase bold. ALL CAPS can be appropriate for short labels, but long passages in all capitals often reduce the distinctive shapes that support fluent reading. Underlining should be used carefully in digital interfaces because readers may interpret it as a link.

A good beginner strategy is to use one type family with two or three clearly differentiated text styles. Add a second typeface only when it has a real function and pairs well with the first.

{{BR}}
= Readability, Legibility, and Accessibility =

'''Legibility''' concerns how easily individual characters can be distinguished. '''Readability''' concerns how comfortably longer text can be read and understood. They are related, but not identical. A highly decorative heading can be legible for three words and still be unsuitable for a full page.

For practical work, test typography under realistic conditions: distance, lighting, screen size, print quality, protective covers, motion, time pressure, and the reader's familiarity with the content. A label that looks attractive on a large monitor may fail when printed at actual size.

For web content, accessibility includes sufficient text contrast, the ability to resize text, and layouts that continue to work when users change spacing. WCAG 2.2 requires normal text to reach a minimum contrast ratio of 4.5 to 1, with defined exceptions, and requires content at Level AA to tolerate specified user text-spacing overrides without loss of content or functionality. These are testing requirements, not a command to force every page to use one fixed spacing value.

A practical accessibility checklist is:
# Use real text instead of images of text when the visual effect can be achieved with text.
# Check contrast rather than judging it by eye alone.
# Keep body text comfortably sized and allow resizing.
# Avoid relying on color alone to communicate meaning.
# Test longer words, numbers, symbols, and accented characters that the workplace actually uses.
# Check that increased line, paragraph, letter, and word spacing does not break the layout.

{{BR}}
= Choosing and Pairing Type =

Choose type by function. Start with body text because it carries the most reading. Then choose headings and supporting styles. Look for clear character shapes, adequate language support, useful weights, reliable numerals, and a license that permits your intended output.

When pairing typefaces, combine fonts that are different enough to create purposeful contrast but similar enough to feel coherent. Contrast may come from serif versus sans serif, width, weight, or proportion. Avoid pairs that are almost the same but not quite; the result can look accidental.

Test a typeface with real content such as product codes, dates, prices, safety terms, technical units, names, and mixed upper- and lowercase text. A specimen made only from the alphabet can hide problems that appear in production.

{{BR}}
= Typography in Vocational Practice =

Typography decisions change with the job.

{| class="wikitable"
! Context
! Priority
! Typography focus
|-
| Workshop instruction
| Fast, safe scanning
| Clear hierarchy, durable contrast, unambiguous labels
|-
| Hospitality menu
| Choice and tone
| Category hierarchy, prices, spacing, consistent alignment
|-
| Retail sign
| Distance reading
| Large key message, strong contrast, short wording
|-
| Office form
| Accurate entry
| Clear labels, aligned fields, predictable sections
|-
| Technical drawing note
| Precision
| Consistent notation, compact but legible text, reliable symbols
|-
| Website or app
| Responsive reading
| Scalable type, contrast, spacing, accessible interaction
|}

In production, always check the final output. Fonts can substitute unexpectedly, text can reflow, a PDF can clip characters, and a printer can change perceived weight or contrast. Proofreading typography therefore includes both language and layout.

{{BR}}
= A Simple Workplace Typography Workflow =

Use this repeatable process when you receive a typography task:
# Define the audience, purpose, medium, viewing conditions, and required information.
# Build the content structure before styling it.
# Choose a readable body typeface and necessary weights.
# Establish a small hierarchy for title, headings, body text, labels, and notes.
# Adjust line length, leading, tracking, and alignment using real content.
# Check contrast, resizing, symbols, special characters, and accessibility needs.
# Proof the final print, PDF, sign, slide, website, or device view at realistic size.
# Ask another person to find key information and explain what they noticed first.

This workflow turns typography from a matter of taste into a testable communication process.

{{BR}}
= Interactive Tasks =

{{BR}}
== Quiz: Test Your Knowledge ==

{{MC}}

'''What does kerning adjust?'''
(Space between particular character pairs)
(!Space between entire paragraphs)
(!Height of capital letters)
(!Width of the page)

{{E}}
<br>

{{MC}}

'''Which term describes the overall design of a set of characters?'''
(Typeface)
(!Baseline)
(!Leading)
(!Margin)

{{E}}
<br>

{{MC}}

'''What is the baseline?'''
(The line on which most letters sit)
(!The top edge of a page)
(!The space between paragraphs)
(!The width of a capital letter)

{{E}}
<br>

{{MC}}

'''Which feature is typical of a serif typeface?'''
(Small finishing strokes on letterforms)
(!Every character has equal width)
(!Only capital letters are included)
(!Letters always lean to the right)

{{E}}
<br>

{{MC}}

'''What does leading control in modern typography?'''
(Vertical spacing between lines)
(!Color contrast between text and background)
(!Horizontal page margins)
(!Shape of punctuation marks)

{{E}}
<br>

{{MC}}

'''What is tracking?'''
(Overall spacing across a range of characters)
(!Spacing between one selected letter pair only)
(!Height of lowercase letters)
(!Position of images on a page)

{{E}}
<br>

{{MC}}

'''What is the main purpose of typographic hierarchy?'''
(To guide the reader through levels of importance)
(!To make every text element equally strong)
(!To replace proofreading)
(!To reduce every line to the same length)

{{E}}
<br>

{{MC}}

'''Which alignment is usually a strong default for English body text?'''
(Left alignment)
(!Random alignment)
(!Vertical alignment)
(!Circular alignment)

{{E}}
<br>

{{MC}}

'''Which statement best describes readability?'''
(How comfortably longer text can be read)
(!How many fonts are installed)
(!How wide the page margins are)
(!How many colors a logo contains)

{{E}}
<br>

{{MC}}

'''What should you do before approving workplace typography?'''
(Test the final output in realistic conditions)
(!Judge only the font name)
(!Add as many typefaces as possible)
(!Convert every sentence to capitals)

{{E}}
<br>

{{BR}}
== Memory Game ==

<div class="memo-quiz">
{|
|-
| Typeface || Overall design shared by a family of characters
|-
| Font || Particular implementation or variation of a typeface
|-
| Kerning || Pair-specific adjustment of character spacing
|-
| Tracking || Overall character spacing across selected text
|-
| Leading || Vertical spacing between lines of type
|-
| Baseline || Reference line on which most letters sit
|-
| Hierarchy || Visual ordering that shows levels of importance
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==

<div class="lueckentext-quiz">

{| class="wikitable"
! Match the correct terms.
! Topic
|-
| '''Serif'''
| Finishing stroke attached to a letterform
|-
| '''X-height'''
| Reference height of the lowercase x
|-
| '''Ascender'''
| Part of a lowercase letter rising above the main body
|-
| '''Descender'''
| Part of a letter falling below the baseline
|-
| '''Measure'''
| Length of a line of text
|}
{{E}}

<br>
...
<br />

{{BR}}
== Crossword Puzzle ==

<div class="kreuzwort-quiz">
{|
|-
| Kerning || What word names spacing adjusted between particular character pairs?
|-
| Leading || What word names vertical spacing between lines of type?
|-
| Tracking || What word names overall character spacing across selected text?
|-
| Baseline || What line do most letters appear to sit on?
|-
| Serif || What finishing stroke can appear on a letterform?
|-
| Hierarchy || What visual ordering guides readers through levels of importance?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=Typography+Basics </iframe>

{{BR}}
== Cloze Text ==

<quiz display=simple>
{'''Complete the text.'''<br>
|type="{}"}
Typography arranges written language to support { readability } and communication. A { typeface } is the overall design of a set of characters. A particular implementation or variation of that design is a { font }. Small finishing strokes on some letterforms are called { serifs }. Pair-specific spacing is known as { kerning }. Overall spacing across selected characters is called { tracking }. Vertical spacing between lines is called { leading }. Most letters sit on a reference line called the { baseline }. A clear { hierarchy } shows readers which information is most important. Before production, you should test typography in realistic { conditions }.
</quiz>

<br>

{{BR}}
= Open-Ended Tasks =

{{BR}}
=== Easy ===
# [[English:Typography Audit|Typography Audit]]: Photograph or collect three examples of workplace typography and explain what each example helps the reader do.
# [[English:Typeface Specimen|Typeface Specimen]]: Create a one-page specimen for one type family showing regular, italic, bold, numbers, punctuation, and a short workplace sentence.
# [[English:Letter Anatomy|Letter Anatomy]]: Draw or digitally label a word to show baseline, x-height, ascender, descender, stem, counter, and serif where applicable.
# [[English:Hierarchy Redesign|Hierarchy Redesign]]: Take a plain block of workplace text and redesign it with only size, weight, spacing, and alignment to create three clear levels of importance.

{{BR}}
=== Standard ===
# [[English:Typeface Comparison|Typeface Comparison]]: Set the same instruction in a serif and a sans serif typeface, test both at realistic size, and justify which one better fits the task.
# [[English:Workplace Template|Workplace Template]]: Design a reusable form, checklist, menu, instruction sheet, or service notice with a consistent typographic hierarchy.
# [[English:Typography Interview|Typography Interview]]: Interview a colleague, trainer, printer, designer, or supervisor about common typography problems in their work and summarize the most useful advice.
# [[English:Readability Test|Readability Test]]: Create two versions of the same paragraph with different line length and leading, ask at least three people to read them, and compare the results.

{{BR}}
=== Advanced ===
# [[English:Signage System|Signage System]]: Develop a small signage system for a workshop, shop, kitchen, office, or training area and justify type size, hierarchy, contrast, and viewing-distance decisions.
# [[English:Multi-Format Typography|Multi-Format Typography]]: Adapt one message for an A4 sheet, a phone screen, and a presentation slide while keeping the same information hierarchy.
# [[English:Accessibility Review|Accessibility Review]]: Audit a real digital document or webpage for contrast, resizing, text spacing, images of text, and clarity, then propose evidence-based improvements.
# [[English:Typography Video Tutorial|Typography Video Tutorial]]: Produce a short instructional video that demonstrates kerning, tracking, leading, alignment, and hierarchy using your own examples.

{{:Open Task - Create a MOOC}}

{{BR}}
= Learning Assessment =

# [[English:Typography Diagnosis|Typography Diagnosis]]: Given a poorly designed workplace notice, identify at least five typography problems, rank them by impact, and explain the order in which you would fix them.
# [[English:Production Proof|Production Proof]]: Compare a screen design with its printed or exported version, document any font substitution, reflow, clipping, or contrast changes, and recommend corrections.
# [[English:Design Justification|Design Justification]]: Create a typographic solution for a specific audience and medium, then defend each major choice using purpose, hierarchy, readability, and accessibility.
# [[English:Transfer Challenge|Transfer Challenge]]: Apply the same content to two different vocational settings and explain which typography decisions must change and which principles remain stable.
# [[English:User Test|User Test]]: Ask unfamiliar readers to locate three key pieces of information in your design, record where they hesitate, and revise the hierarchy based on evidence.
# [[English:Accessibility Reasoning|Accessibility Reasoning]]: Explain how a design can look attractive yet still fail users who resize text or change spacing, and propose a more robust solution.

<br>
<br>

{{BR}}
= Evidence of Learning =

{| class="wikitable"
! Area
! Evidence
|-
| Knowledge
| You accurately use terms such as typeface, font, baseline, x-height, kerning, tracking, leading, alignment, measure, and hierarchy.
|-
| Skills
| You select and combine type purposefully, control spacing and alignment, establish hierarchy, and test readability in context.
|-
| Products
| You produce clear vocational documents, signs, forms, screens, or presentations with consistent typography.
|-
| Quality assurance
| You proof final outputs for reflow, substitution, clipping, contrast, special characters, and realistic viewing conditions.
|-
| Accessibility
| You can identify typography choices that may exclude users and can revise layouts so resizing and spacing changes remain usable.
|-
| Transfer
| You can adapt the same principles to unfamiliar workplaces, media, audiences, and communication risks.
|}

<br>
<br>

{{BR}}
= OERs on the Topic =

The English Wikipedia article on [[English:Typography|Typography]] gives a broad overview of the field, including type arrangement, spacing, history, and related practices.

<iframe> https://en.m.wikipedia.org/wiki/Typography </iframe>

<br>

Further open or freely accessible learning resources include [https://edu.gcfglobal.org/en/beginning-graphic-design/typography/ GCFGlobal: Beginning Graphic Design - Typography], [https://www.w3.org/TR/WCAG22/ W3C: Web Content Accessibility Guidelines 2.2], and [https://commons.wikimedia.org/wiki/Category:English_typography Wikimedia Commons: English typography media].

{{BR}}
= Linked Learning Areas =

{| align=center
{{:D-Tab}}
'''[[English:Typography Basics|Typography Basics]]'''
# [[English:Typeface|Typeface]]
# [[English:Font|Font]]
# [[English:Serif|Serif]]
# [[English:Sans-serif|Sans-serif]]
# [[English:Kerning|Kerning]]
# [[English:Leading|Leading]]
# [[English:Visual hierarchy|Visual hierarchy]]
# [[English:Graphic design|Graphic design]]
# [[English:Information design|Information design]]
# [[English:Accessibility|Accessibility]]
|}

Typography connects directly with [[English:Graphic design|graphic design]], [[English:Visual communication|visual communication]], [[English:Printing|printing]], [[English:Web design|web design]], [[English:Technical communication|technical communication]], [[English:Office administration|office administration]], [[English:Marketing|marketing]], and many forms of vocational documentation. The same basic questions apply across these areas: what must the reader notice, understand, remember, and do?

{{BR}}
= aiMOOC Projects =
[[Category:English]]
[[Category:Typography Basics]]
[[Category:Vocational Education]]
[[Category:Typography]]
[[Category:Graphic Design]]
[[Category:Visual Communication]]
[[Category:Media Design]]
[[Category:Technical Communication]]
[[Category:AI_MOOC]]
[[Category:GPT aiMOOC]]
{{MT}}

English:Typography Basics - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt