Language, WebDesign

Notes on fonts and font design.

Cool Fonts


'Timeless elegance'; old and sophisticated.

Powerful with a lot of glyphs. It's an Adobe font and is probablyexpensive.

based on roman typography!

Revival of monotype. Graceful, stable and elegant! More subtle than aDidot.

A classic futuristic font. Can be seen in places like Ableton'swebsite.

Both a legal font and an exceptionally legible one.

Organic, beautiful style – check this one out!

Freight Sans
fun and cartoonish font feel.

Open Sans
The new sans font with a neutral, flat design.

Gill Snas
warm british, a bit tall, crisp lines

New York signage lettering style.

luxe, aspirational look font. more compressed and exaggerated

'the ultimate modernist font' - incredibly legible, clean, and functiona

bold, condensed font for a large impact. looks very good in yellow, seeposter


  • source code pro
  • jet brains mono
  • pragmata pro
  • dank mono
  • victor mono
  • menlo
  • consolas
  • roboto mono
  • adore64
  • hermit light
  • opendyslexic mono
  • cascadia code pl
  • source code pro with emacs hasklig mode



Motion Design
Text in motion carefully chose to make text readable in videos and otheranimations. This text isn't visible all the time; rather, it's movingquickly and likely flashes past during a video.

Variable Fonts
One or more axes that provide variation between different extremes oftypeface design. These fonts allow for finer control over the design asit changes across the design space! A font can often be installed asregular, bold or both, and extended designs are expressed nicely.Formally, this is a specification that allows for multiple fonts to bepackaged in a single file.

A particular design of type. A single group of fonts; a set of fonts inthe same style, or 'font family'.

An instance of a typeface; a single weight of style within a typefacefamily.


The line on which type sits.

THe distance from baseline to the top of the lowercase letters,disregarding tall letters such as h.

cap height
The distance between a capital letter and baseline.

The stem above lowercase letters that extends above the alloted height.

Letters that extend below the baseline.

The main stroke of the letter (usually vertical).

Descending, decorative stroke on letters such as y and q.

The flair extending off of the edge of letters. Defines a 'font family'(serif vs sans serif).

The enclosed space within letters like o and g.

The small extension on lower half of the letter g.

The end of a stroke without a serif.

Partially closed negative space in characters like c, s, and n. This isalways rounded.

The curved part of the character enclosing the circular or curved partsof letters. This occurs in letters like o, d and b.

Adjusting the space between individual characters.

The spacing of a group of characters.

text should probably be left aligned

justifying text
adding a straight edge to text on boht sides

length of lines of text in a paragraph of column (column width)

Vertical line spacing. generating sufficient space between lines to makeit readable

Fusing characters that are next to one another that look very similar.These characters may look awkward when next to one another if theyaren't fused.

Breaking a word across a line and separating it with a dash; a techniquetypically used to prevent rag problems.

short dash '-'. used to divide words that break at the end of the lineor to connect parts of co mpound words such as 'ill-fated'. these areused to represent relationships between individuals rather th anseparating them.En-dash : slightly longer hthan the hyphe. used toindicate a range of values, such as a span of time or numericalquantities. sometimes the em-dash is used instead of the en-dash foraesthetic reasons, or a sm all amount of space is added befoer or afterthe dash for artistic purposes.Em-dash : longer than that!the em-dash istypically used to indicate a break in thought, and is normally followedwith and preceded by space. It can be used to describe a thought withina sentence as well – case in point!grid : guide by which graphicdesigners can organize, copy and add images in a flexible way whilemaking the concepts easy to absorb and understand.

The uneven vertical edge of a block of type – most commonly theright-hand edge. if the rag is not clean, it can be very distracting tothe eye; this can be fixed by reworking the line breaks or by editing acopy.

A single word or short line left at the end of a column. This isconsidered bad typography.

A line exists at the top of the following column! This can be fixed justlike the rag, by reworking the line breaks or editing the copy to removethese typography misdeeds.


printing press
Used a font based on blackletter, similar ot the font traditionally usedwith handwritten material. This wasn't good for printing. Roman type wascreated to solve this problem. First, Jenson, but the most recognizableroman font is Cambria.


created to save space and money when printing books and long formtexts.paved road for old style, transitional style and modern styles oftyping.


created 'old style' or 'Antiqua' of type : old style typefaces havethick serifs, low contrast. these are typically created from 1470 to1600.

Transitional typefaces

thin serifs with high contrasts between these types. Baskerville is onesuch font (which was created as an improvement to the caslon typeface!

Modern style

very thin serifs with extreme contrast between strokes. created toreject traditional styles, annoyed with typefaces based on handwriting!Modern style initiated by Firmin Didot and Giambatista Bodoni ; FirminDidot created modern style classification type, Didot, followed by theBodoni typefaces

William Caslon IV

sans serif typefaces – no projecting featues at the end of strokes!Helvetica : known as the favorite typeface, one of the most populat.variations on this include slab serifs and gemoetric sans. slab :magazines, newspaper headers; geometric : based on simple geometricshapes.

Susan Kare - great apple designer!

She did Chicago, a neat pixel sans-serif typeface – this could be coolto use, as well as Monaco - (kind of boring). Geneva is the thirdtypeface; it's inspired by helvetica and is a neo-grotesque typeface, arealist typeface including basic ligatures, long s and r rotunda asoptionals. bitmap fonts are very cool and I should look into using them!realist \~=grotesquemore reading (TODO)::


indents: indenting the first line of every paragraph has always been aconvention – to create a visual separation between paragraphsCreativeieaas : extreme indent, outdent. with room and for a cleaner, more openlook, separate paragraph s with an extra line rather than using tabindentation at all!arabesques :; graphic ordaments and embellishments –from simple geometric designs to ornate configurations. many are oftendigital recreations of historic designs. they have many uses - have funwith them

Classifying Type


Traditional typefaces with feet or arms hanging off of the end of letterstrokes, adding a thick or thin look to the letter. These are consideredthe easiest fonts to read. Serif fonts are 'fancy' fonts – they all haveembellishments. Times New Roman, a serif font, is the most used font asthe most common font found in newspapers.

baskerville, clarendon, garamond, georgia, trajan


Fonts without serifs and having an overall more even stroke weight.clean, modern, minima list

arial, futura, impact, myriad, tahoma


Fonts typically used only for attention-grabbing headlines. Only onedecorative font should be used, and not as the body font!


Script fonts are intended to mimic handwriting, so the letters oftentouch one another. These fonts should never be used with all-caps.


These fonts contain characters that are small pieces of art, used toenhance the design of the page. Dingbats are usually packaged with aspecific font and mimic its style.

Best Practices

Font Size

On computers, 72 pt. font corresponds to one inch on paper. Twodifferent font sizes at the same point can correspond to differentphysical sizes, and correct size does depend on use.


  • character and word spacing, kerning, – space between each character orletter, adjusted to create pleasing look

tracking, – adjustment of word spacing, similar to kerning but refers tospace between words rather than characters line spacing, leading –amount of space between lines of type – larger the type, the moreleading needed! , paragraph spacing, alignment, – alignment : textflowing on a page. center, left, right etc. justified : straight edge onboht sides! line breaks and rag, hyphens, – don't have more than twohyphenations in a row, don't have too many hyphenated lines in a singleparagraph, ensure the rag checks out, make sure that justified textlooks natural widows and orphans – paragraph spacing – at end: widow; attop of following; orphan! do not leave these distracting shapes! editthe copy to remove them.

never use bold serif type, apparently? john cane is very against it.