Typography & Lettering

In everyday speech, 'font' is used for both, and that's fine. In professional contexts, the distinction matters — a client saying 'use a different font' might mean 'change the weight' or 'change the whole typeface.'

A typeface family contains many fonts: Regular, Italic, Bold, Bold Italic, Light, Condensed, Extended. Variable fonts are single files that contain the entire family as a continuous spectrum.

What to avoid: two faces that are too similar (confusing) or too different (chaotic). Two Grotesque sans-serifs will look like a mistake, not a choice.

Safe starting point: use one typeface family at different weights, or pick one family with a companion designed to pair with it (many foundries design these specifically).

These associations are partly historical (the era the type was designed in or for) and partly acquired (what you've seen the type used for over your lifetime).

Good typeface selection means using those associations intentionally: a legal firm using a clean Old Style serif signals history and tradition; a tech startup using it signals seriousness and anti-tech-bro differentiation. Both can be right depending on the goal.

Weight contrast within a single family (bold heading + regular body) is safer and often more elegant than a two-typeface pairing for beginners.

Three typefaces in one design is usually two too many. Limit yourself to two, and use weight, size, and spacing to create all the hierarchy you need.

Color can support hierarchy — a gold accent on a key word draws the eye — but avoid using color as the only signal (accessibility: some readers can't distinguish colors).

Good hierarchy lets a reader scan the page and understand the structure before reading a single word. A reader should be able to answer 'what is this about?' from the hierarchy alone.

Centered alignment feels formal, traditional, ceremonial. Works for short passages (headings, invitations, menus) but creates an awkward reading path for body text.

Justified text (even left and right edges) feels structured and professional but creates irregular word spacing ('rivers') in narrow columns. Right-aligned is used for captions and pull quotes — rarely for body text.

The traditional rule: 1.5 times the lowercase alphabet (a–z) gives a good measure. Set your a–z string and multiply by 1.5.

In CSS, set your body copy max-width to 65–70ch (characters) — it's a reliable way to keep measure comfortable regardless of font size.

A bold heading next to a light body: clear contrast. Two medium-weight typefaces in the same line: apparent similarity that confuses hierarchy.

Apply this to every pair of elements on a page: do they contrast clearly, or do they create visual confusion? If in doubt, push the contrast further.

Problematic pairs include: AV, AW, AT, Ay, To, Wo, We, LT, LY, F+ round letter (Fo, Fe), VA, WA. These combinations consistently require attention.

Most type software kerns automatically using built-in kern tables. Manual kerning is needed for headline type, logotypes, and custom lettering — anywhere that a word will be viewed in isolation at large size.

Body text rarely needs tracking changes. Text set very small sometimes benefits from slight loosening (+10 to +20) for readability.

Tight tracking on display type (-25 to -50) creates a dense, powerful look for headlines. Never tighten tracking so much that letters touch or look squeezed.

Larger type (display/heading) needs less leading — sometimes even negative leading, where the leading is smaller than the point size.

Increasing leading increases apparent elegance and spaciousness. Decreasing it creates density and urgency. Very tight leading in body text makes columns hard to read; the eye can't find the next line.

Novice designers fill pages; experienced designers give text room to be read. The eye needs a place to rest.

In typographic terms: generous margins, consistent paragraph spacing, and appropriate leading all contribute to white space. Start designs with more white space than you think you need, then reduce if necessary.

This principle explains the characteristic look of all calligraphic and brush lettering. It mirrors how scribes wrote with quill pens — downstroke pulls the quill, upstroke lifts it.

In digital lettering, you can simulate this manually by varying stroke width, or use a pressure-sensitive tablet to let the software do it automatically.

Practice with a guide sheet under your paper, visible through the paper. Remove it once your hand has internalized the proportions.

Making your own guide sheets for your preferred letter height is better than using someone else's — it forces you to decide your proportions deliberately.

The enemy of consistency is rushing. Slow down by 30% from your natural speed. The strokes will smooth out; the letterforms will stabilize.

Inconsistency in hand lettering usually traces to one of three things: inconsistent pressure, inconsistent letterform proportions (x-height, slant), or inconsistent pen hold. Diagnose which before drilling more.

Pointed dip pen + flexible nib: maximum range of thick/thin. Requires ink and a glass surface. More learning curve, more expressive ceiling.

Parallel pen or broad-edge nib: creates thick/thin through angle, not pressure. Foundation of Italic and Gothic calligraphy.

Pen angle is kept constant throughout a hand. Rotating the pen to change it mid-letter is an error (except in some scripts where it's intentional). Tape marks on your pen shaft help maintain consistency.

Different scripts use different pen angles: Italic uses approximately 45°, Gothic (Blackletter) uses 40–45°, Foundational hand uses 30°, Uncial uses near-flat (0–20°).

Changing the ductus — even if the final result looks similar — affects the natural rhythm of writing and makes consistency harder to maintain.

Learning the ductus by tracing over exemplars (good letter models) is faster than guessing. Get a good exemplar for your script before starting practice.

The rule: flourishes should flow naturally from the letterform's structure, not be attached as an afterthought. The movement should feel like a continuation of writing.

In a composition, flourishes belong at the beginning and end of a piece, not scattered through it. They're punctuation marks, not filler — overuse kills their elegance.

Italic: Italian Renaissance (15th century). Humanist scribes simplifying Gothic. Slightly compressed ovals, consistent slant, 45° pen angle. The basis of most Roman handwriting today.

Gothic / Blackletter: Medieval Europe (10th–15th century). Dense, narrow, verticalized. Several subcategories: Textura, Fraktur, Rotunda, Bastarda. Associated with historical German printing.

Display type earns its place at: titles, poster headlines, cover type, logotypes, chapter openers. One or two uses per design. Never more.

The test: could you replace the display face with a neutral sans or serif and communicate the same information? If yes, reconsider whether the display face is earning its visual complexity.

Consistent depth length and consistent vanishing direction are the two rules of clean 3D lettering. Varying either looks like an error.

3D extrusions work best with bold, geometric letterforms that have clean corners. Script and delicate serif faces lose their character under extrusion.

Ligatures (connected letters) and customized letter spacing are the two main tools of logotype design. Look for letters whose curves naturally connect or whose forms can be unified.

Start with an existing typeface as a skeleton and trace-and-modify, rather than drawing from scratch. The proportions are already correct — you're editing, not inventing.

Arts & Crafts movement (William Morris, etc.) brought decorative borders, illuminated initials, and ornate typefaces back to fine printing in the late 19th century.

Understanding the history of ornamental type lets you use it with intention — a Victorian revival poster, an Art Nouveau-influenced label, a modern take on 19th-century circus type. Context is meaning.

Brand typography builds consistency: every touchpoint that uses the brand's typeface reinforces its personality. Inconsistent type use (mixing faces without system) undermines brand recognition.

The brief for a typeface in branding: what three adjectives describe this brand? Find a typeface that feels like those adjectives. Test it in context — at small and large sizes, in paragraph text and in a headline.

The most common failure: text placed on a busy image area without contrast treatment. Solutions: add a translucent overlay behind text, knock text out in white, blur the image behind the text zone, or reserve a clear area in the image for text.

When type and image have equal visual weight, they should reinforce each other — the image shows what the type says, or the type adds context the image can't provide. Redundancy (saying the same thing twice) wastes the relationship.

More complex: modifying letterforms so they represent meaning — a word where the letters visually enact what the word describes ('MELT' with dripping letters, 'BOLD' in extreme bold).

This is the intersection of typography and illustration. The risk: clever at the expense of clear. Type as image must still be legible; if readers can't read it, it fails as both type and image.

Without a style guide, typographic decisions drift over time — especially when multiple people are applying a system. The guide makes the system consistent without requiring constant oversight.

Build even a simple one-page type guide for every project. You'll use it while working, it demonstrates professionalism to clients, and it makes handoff smooth.

Margins: the space from the edge of the page to the type area. Inside margins (binding edge) in books are typically larger than outside margins. Top and bottom margins affect the visual 'weight' of type on the page.

Modules: subdivisions of the grid that create smaller units for placing images and secondary content. A modular grid has both columns and horizontal rows, creating a matrix of cells.

When all text aligns to the same baseline grid, the visual rhythm feels organized even when different sizes and typefaces are used.

In print design, baseline grid alignment is standard. In web design, perfect baseline grid alignment is harder to achieve — use approximate alignment through careful line-height choices.

Rules for breaking the grid: break it intentionally, not accidentally. Break it for important elements, not everything. Break the grid once per spread, not six times.

A layout that never breaks its grid is orderly but potentially rigid. A layout that always breaks its grid is chaotic. The dialogue between order and deviation creates dynamic, readable pages.

Key figures: Josef Müller-Brockmann (Grid Systems in Graphic Design), Emil Ruder, Armin Hofmann. Their work defined modern information design and remains foundational.

The style's influence is everywhere: corporate identity systems, wayfinding signage, newspaper design, and UI design all descend from Swiss-style grid principles. Learning the system teaches you why these things work.

From n: m (two arches), h (ascender added), u (n upside down), i (stem only), l (ascending stem), r (arch without closure). These six letters share almost identical construction.

Similarly, the 'o' is the mother of all round letters: c, e, d, b, p, q, g all derive their curve shape and size from the o's oval. The o's weight and tension defines the typeface's round character.

In type design: place as few nodes as possible. A smooth curve ideally has 4 nodes (one at each extreme point: top, bottom, left, right). Extra nodes create bumps and inconsistencies.

Oncurve nodes (on the path) and offcurve handles (the control arms) work differently in TrueType vs. PostScript/CFF fonts. Glyphs uses PostScript by default; learn that system first.

Similarly, the optical midpoint of a letter (where the crossbar of H or E looks centered) is slightly above the mathematical midpoint. Geometric center looks low.

Weight distribution in curves: strokes get thinner as they curve toward the extremes (top and sides) and thicker at the 45° stress positions. This 'optical weight distribution' mimics the natural behavior of a pen.

Display type (used at 24pt+) can afford: extreme contrast, delicate hairlines, tight spacing, unusual letterform details that would be confusing or illegible at text sizes.

Many professional typeface families have separate 'text' and 'display' optical sizes — the same design modified for its intended size range. This is the most sophisticated aspect of professional type design.

Lettering artists like Jessica Hische, Dana Tanamachi, and Mary Kate McDevitt create finished illustrations where the letters are the image. The distinction from type design: lettering is for one use, type is for all uses.

Because lettering is custom, it can do things no existing typeface can: letters that interact with illustrations, forms that are impossible mechanically, one-off visual ideas made permanent.

Form-following lettering: letters that conform to a shape — a sphere, an arch, a body of water. The letterforms adjust their perspective or curvature to follow the form.

Letters as containers: the counter spaces of letters contain small illustrations. Or letters built from objects: letters made of branches, tools, animals, architecture.

The trace should be cleaner and more consistent than the original sketch — it's not a faithful reproduction but a refined version. Smooth the wobbles, even the stroke widths, correct the proportions.

Use the Image Trace function in Illustrator only for rough initial positioning — always clean up the nodes manually. Auto-traced vectors have too many nodes and unclean curves.

Mockup templates (available free at sites like Mockup World, Unblast, Freepik) let you place your flat artwork on photographs of real products in seconds.

Build a mockup habit: for every finished lettering piece, spend 10 minutes creating 2–3 contextual mockups. These will become your portfolio's most compelling images.

On screen, font rendering varies by operating system: macOS renders type with a slightly different algorithm than Windows. What looks perfect on your screen may look different for your users.

Print uses points (pt) as the unit; web uses pixels (px) and relative units (rem, em, ch, vw). Relative units (rem especially) are preferred for accessibility — they respect the user's system font size setting.

Font loading strategy: use `font-display: swap` to show fallback text while the font loads, swapping when ready. This prevents invisible text during load ('FOIT').

Variable fonts are single font files that contain an entire family as a continuous spectrum (weight, width, slant). One file replaces many; loading cost is lower for families with many weights.

letter-spacing: accepts em values — works relative to font size. font-weight: specific numbers (400 = regular, 700 = bold) are more precise than keywords. max-width: set in ch units for measure control (65ch is comfortable for body text).

color: don't use pure black (#000) on white — use very dark grey (#1a1a1a to #222) for body text, or adjust contrast based on background. Pure black on white creates too much contrast and causes eye strain over long reading sessions.

Minimum comfortable font size for body text on screen: 16px (1rem). Many sites use 16–18px as their default. Smaller type requires smaller measures and more generous line-height.

Never use font-size smaller than 12px for any text. Avoid using text in images (can't be resized by the user, can't be selected, doesn't work with screen readers).

Include process: at least 3–4 pieces should show sketches → development → final. Art directors want to see how you think, not just what you finished.

Quality over quantity: 10 strong pieces is worth more than 20 inconsistent ones. Remove anything you'd be embarrassed to explain the decisions behind.

It's not a resume bullet — it's a voice. It should sound like you. Read 10 designer statements on Behance and notice which ones feel generic ('passionate designer committed to excellence') and which feel specific and real.

Write your statement by answering: what problem in the world would be worse if no one cared about type? Your answer is the beginning of your reason for doing this work.

Branding: wordmarks, logotypes, brand identity systems. Often commissioned through design agencies or directly from brands. Requires understanding of how type functions in systems.

Type design: designing original typefaces for sale through type foundries (Klim, Commercial Type, Emigre, Google Fonts). Long-term projects, requires high technical skill, rewards patience.

Good feedback is specific: 'the counter on the a is too small' is useful; 'it looks off' is not. When receiving vague feedback, ask follow-up questions: 'where specifically? What would better look like?'

The best feedback loops are ongoing relationships: a mentor, a critique group, a community. Typography is a field where experts are generally generous — reach out to people whose work you admire.