Typography
Stacklists
Sentences and words do not exist by themselves
Sentences and words do not exist by themselves, but have natural, inevitable, unavoidable interactions with their surrounding spaces, words, and other sentences. Sentences are not independent of their spatial context, and interactions can create meanings and harms. Sentences survive content-indifferent and content-hostile spacings, but surviving is not thriving. Text space should not be owned and governed by generic productions grids, which make for convenient production but inconvenient meaning. Space can and should be content-responsive, actively contributing to meaning – forever practices in poetry, maps, math, computer code, comics, theater/movie scrips, posters. Subtle visual spacing differentiates and clarifies sentences, and meaning becomes more consequential, memorable, retrievable.
Central-axis text
Central-axis provides a clear signal of the next line, so that readers and speakers don't have to search on the left margin, sometimes accidentally skipping down a line. Ragged-left typography is used for dialogue in novels and scripts. In central-axis, each line is activated at both left and right margins – unlike squared-off conventional text. Readers/speakers are aware of the length of the next line at both its beginning and end. That knowledge may also help readers detect the pace and rhythm of the words, as in reading poetry aloud.
The pernicious issue with pangrams
The far more pernicious issue with pangrams, as a means for evaluating typefaces, is how poorly they portray what text actually looks like. Every language has a natural distribution of letters, from most to least common, English famously beginning with the
E
that accounts for one eighth of what we read, and ending with theZ
that appears just once every 1,111 letters. Letter frequencies differ by language and by era — theJ
is ten times more popular in Dutch than English; biblical English unduly favors theH
thanks to archaisms like thou and sayeth — but no language behaves the way pangrams do, with their forced distribution of exotics. Seven of the most visually awkward letters, theW
,Y
,V
,K
,X
,J
, andZ
, are among the nine rarest in English, but pangrams force them into every sentence, guaranteeing that every paragraph will be riddled with holes. A typeface designer certainly can’t avoid accounting for these unruly characters, but there’s no reason that they should be disproportionately represented when evaluating how a typeface will perform.To abandon control
In print the designer is god. An enormous industry has emerged from WYSIWYG, and many of the web’s designers are grounded in the beliefs and practices, the ritual of that medium. As designers we need to rethink this role, to abandon control, and seek a new relationship with the page.
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”
Typographic grid
Just one of many examples of beautiful typography and layout throughout the book. Love the page design.
A state of energetic repose
Read the text before designing it.
Discover the outer logic of the typography in the inner logic of the text.
Make the visible relationship between the text and other elements (photographs, captions, tables, diagrams, notes) a reflection of their real relationship.
Give full typographic attention even to incidental details.
Invite the reader into the text.
Reveal the tenor and meaning of the text.
Clarify the structure and the order of the text.
Link the text with other existing elements.Induce a state of energetic repose, which is the ideal condition for reading.
Simple forms
The concept that “the simpler the form of a letter the simpler its reading” was an obsession of beginning constructivism. It became something like a dogma, and is still followed by “modernistic” typographers.
This notion has proved to be wrong, because in reading we do not read letters but words, words as a whole, as a “word picture.” Ophthalmology has disclosed that the more the letters are differentiated from each other, the easier is the reading.
Without going into comparisons and the details, it should be realized that words consisting of only capital letters present the most difficult reading—because of their equal height, equal volume, and, with most, their equal width. When comparing serif letters with sans-serif, the latter provide an uneasy reading. The fashionable preference for sans-serif in text shows neither historical nor practical competence.
Typography exists to honor content
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspired to a kind of statuesque transparency. Its other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time.
The higher courts
Refer typographic disputes to the higher courts of speech and thinking.
Type is idealized writing, and its normal function is to record idealized speech. Acronyms such as CD and TV or USA and UFO are set in caps because that is the way we pronounce them. Acronyms such as UNESCO, ASCII, and FORTRAN, which are pronounced not as letters but as words, are in the process of becoming precisely that. When a writer accepts them fully into her speech and urges readers to do likewise, it is time for the typographer to accept them into the common speech of typography by setting them in lower case. Other acronymic words, such as laser and radar, have long since traveled the same road.
Pure but silent
Architects build perfectly proportioned kitchens, living rooms and bedrooms in which their clients will make, among other things, a mess. Typographers likewise build perfectly proportioned pages, then distort them on demand. The text takes precedence over the purity of the design, and the typographic texture of the text takes precedence over the absolute proportions of the pure but silent page.
An end in itself
Typography, like language, is more important to me for what it allows to happen than for anything it accomplishes on its own. I hope that in writing a book on the subject I have not given the impression that either typography or design is an end in itself.
Respect
Respect the text first of all, the letterforms second, the type designer third, the foundry fourth.
The needs of the text should take precedence over the layout of the font, the integrity of the letterforms over the ego of the designer, the artistic sensibility of the designer over the foundry’s desire for profit, and the founder’s craft over a good deal else.
A gradual refinement
The steel rail is an artifact whose form has been carefully optimized. This gradual refinement of the design was done not by a single brilliant engineer but by more than a century of industrial evolution. The rail was never meant to be an object of beauty, but its cross section has all the elegance of fine typography.
The Elements of Typographic Style
A Book by Robert BringhurstTo Make a Book, Walk on a Book
An Essay by Craig ModThe ability of the physical world — a floor, a wall — to act as a screen of near infinite resolution becomes more powerful the more time we spend heads-down in our handheld computers, screens the size of palms. In fact, it’s almost impossible to see the visual patterns — the inherent adjacencies — of a physical book unless you deconstruct it and splay it out on the floor.
Web Design is 95% Typography
An Article by Oliver Reichenstein95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.
What of the lowly page number
An Article by Marlon J. EttingerStatement of intent, chronological guidepost, or cheap trick to inflate the length of a text, page number placement is anything but an afterthought. Behind these innocuous and overlooked symbols, I found many stories to be told.
Care for the Text
An Article by Robin RendleWhenever I’m stuck pondering the question: "How do I make this website better?" I know the answer is always this: Care for the text.
Without great writing, a website is harder to read, extremely difficult to navigate, and impossible to remember. Without great writing, it’s hardly a website at all. But it’s tough to remember this day in and day out—especially when it’s not our job to care about the text—yet each and every <p> tag and <button> element is an opportunity for great writing. It’s a moment to inject some humor or add a considerate note that helps people.
…These are the details that make a good website great.
In search of visual texture
An Article by Rachel PruddenI’m now more inclined to attribute Looseleaf’s power to its visual texture than to some cognitive media-style abstraction. And the visual texture owes more to the beauty (yes, beauty!) of the original pdfs from the Vasulka Archive. Perhaps the demo is best understood not as a prototype generic tool, but as a specific curated experience in its own right, with form and content claiming equal importance in its overall success.
Even so, I think there are some general lessons that can be drawn from this demo:
- Content is not inert
- Visual texture lets content breathe
- Visual texture lets the eye wander without losing itself
Chartwell
A FontThis set of tools for easily creating graphs is conveniently disguised as a set of fonts. OpenType features are used to interpret and visualize the data. The data remains as editable text, allowing for painless updates.
Whomst styles?
An Article by Robin SloanThis is a “whostyle”: an attempt to carry the ~timbre~ of an author’s voice, in the form of their design sensibility, through into a quotation. It’s the author who defines their whostyle; the quoting site just honors it, a frame around their words.
I think the whostyle makes a few arguments. Among them:
- Text is more than a string of character codes. Its design matters, typography and layout alike; these things support (or subvert!) its affect, argument, and more.
- The web should be more colorful and chaotic, along nearly every dimension. The past five years have brought a flood of new capabilities, hugely expressive — let’s use them!
- Quoting is touchy, and anything you can do to cushion it with respect and hospitality is a plus.
Unicode Arrows
A Fragment by Rachel Binx↬ welcome to the best part of the unicode spec ↫
APL386 Unicode
A Font by Adám BrudzewskyAPL font based on Adrian Smith's APL385 font with a fun, whimsical look, inspired by Comic Sans Serif.
APL (named after the book A Programming Language) is a programming language developed in the 1960s by Kenneth E. Iverson. Its central datatype is the multidimensional array. It uses a large range of special graphic symbols to represent most functions and operators, leading to very concise code. It has been an important influence on the development of concept modeling, spreadsheets, functional programming, and computer math packages. It has also inspired several other programming languages.
A Pattern Language
- Its place in the web of nature
- 9. Scattered Work
- 21. Four-Story Limit
- 51. Green Streets
- 53. Main Gateways
Its place in the web of nature
This is a fundamental view of the world. It says that when you build a thing you cannot merely build that thing in isolation, but must also repair the world around it, and within it, so that the larger world at that one place becomes more coherent, and more whole; and the thing which you make takes its place in the web of nature, as you make it.
9. Scattered Work
Problem
The artificial separation of houses and work creates intolerable rifts in people’s inner lives.
Solution
Use zoning laws, neighborhood planning, tax incentives, and any other means available to scatter workplaces throughout the city. Prohibit large concentrations of work without family life around them. Prohibit large concentrations of family life without workplaces around them.
21. Four-Story Limit
Problem
There is abundant evidence to show that high buildings make people crazy.
Solution
In any urban area, no matter how dense, keep the majority of buildings four stories high or less. It is possible that certain buildings should exceed this limit, but they should never be buildings for human habitation.
51. Green Streets
Problem
There is too much hot hard asphalt in the world. A local road, which only gives access to buildings, needs a few stones for the wheels of the cars; nothing more. Most of it can still be green.
Solution
On local roads, closed to through traffic, plant grass all over the road and set occasional paving stones into the grass to form a surface for the wheels of those cars that need access to the street. Make no distinction between street and sidewalk. Where houses open off the street, put in more paving stones or gravel to let cars turn onto their own land.
53. Main Gateways
Problem: Any part of town—large or small—which is to be identified by its inhabitants as a precinct of some kind, will be reinforced, helped in its distinctness, marked, and made more vivid, if the paths which enter it are marked by gateways where they cross the boundary.
Solution: Mark every boundary in the city which has important human meaning—the boundary of a building cluster, a neighborhood, a precinct—by great gateways where the major entering paths cross the boundary.
66. Holy Ground
Problem
What is a church or temple? It is a place of worship, spirit, contemplation, of course. But above all, from a human point of view, it is a gateway. A person comes into the world through the church. They leave it through the church. And, at each of the important thresholds of their life, they once again step through the church.
Solution
In each community and neighborhood, identify some sacred site as consecrated ground, and form a series of nested precincts, each marked by a gateway, each one progressively more private, and more sacred than the last, the innermost a final sanctum that can only be reached by passing through all of the outer ones.
70. Grave Sites
Problem
No people who turn their backs on death can be alive. The presence of the dead among the living will be a daily fact in any society which encourages its people to live.
Solution
Never build massive cemeteries. Instead, allocate pieces of land throughout the community as grave sites—corners of parks, sections of paths, gardens, beside gateways—where memorials to people who have died can be ritually placed with inscriptions and mementos which celebrate their live. Give each grave site an edge, a path, and a quiet corner where people can sit. By custom, this is hallowed ground.
80. Self-Governing Workshops and Offices
Problem
No one enjoys their work if they are a cog in a machine.
Solution
Encourage the formation of self-governing workshops and offices of 5 to 20 workers. Make each group autonomous—with respect to organization, style, relation to other groups, hiring and firing, work schedule. Where the work is complicated and requires larger organizations, several of these work groups can federate and cooperate to produce complex artifacts and services.
104. Site Repair
Problem
Buildings must always be built on those parts of the land which are in the worst condition, not the best.
Solution
On no account place buildings in the places which are more beautiful. In fact, do the opposite. Consider the site and its buildings as a single living ecosystem. Leave those areas that are the most precious, beautiful, comfortable, and healthy as they are, and build new structures in those parts of the site which are least pleasant now.
106. Positive Outdoor Space
Problem
Outdoor spaces which are merely “left over” between buildings will, in general, not be used.
Solution
Make all outdoor spaces which surround and lie between your buildings positive. Give each one some degree of enclosure; surround each space with wings of buildings, trees, hedges, fences, arcades, and trellised walks, until it becomes an entity with a positive quality and does not spill out indefinitely around corners.
109. Long Thin House
Problem
The shape of a building has a great effect on the relative degrees of privacy and overcrowding in it, and this in turn has a critical effect on people’s comfort and well-being.
Solution
In small buildings, don’t cluster all the rooms together around each other; instead string out the rooms one after another, so that distance between each room is as great as it can be. You can do this horizontally—so that the plan becomes a thin, long rectangle; or you can do it vertically—so that the building becomes a tall narrow tower. In either case, the building can be surprisingly narrow and still work—8, 10, and 12 feet are all quite possible.
112. Entrance Transition
Problem: Buildings, and especially houses, with a graceful transition between the street and the inside, are more tranquil than those which open directly off the street.
Solution: Make a transition space between the street and the front door. Bring the path which connects street and entrance through this transition space, and mark it with a change of light, a change of sound, a change of direction, a change of surface, a change of level, perhaps by gateways which make a change of enclosure, and above all with a change of view.
126. Something Roughly in the Middle
Problem
A public space without a middle is quite likely to stay empty.
Solution
Between the natural paths which cross a public square or courtyard or a piece of common land, choose something to stand roughly in the middle: a fountain, a tree, a statue, a clock-tower with seats, a windmill, a bandstand. Make it something which gives a strong and steady pulse to the square, drawing people in toward the center. Leave it exactly where it falls between the paths; resist the impulse to put it exactly in the middle.
127. Intimacy Gradient
Problem
Unless the spaces in a building are arranged in a sequence which corresponds to their degrees of privateness, the visits made by strangers, friends, guests, clients, family, will always be a little awkward.
Solution
Lay out the spaces of a building so that they create a sequence which begins with the entrance and the most public parts of the building, then leads into the slightly more private areas, and finally to the most private domains.
134. Zen View
If there is a beautiful view, don’t spoil it by building huge windows that gape incessantly at it. Instead, put the windows which look onto the view at places of transition—along paths, in hallways, in entry ways, on stairs, between rooms.
If the view window is correctly placed, people will see a glimpse of the distant view as they come up to the window or pass it: but the view is never visible from the places where people stay.
135. Tapestry of Light and Dark
Problem
In a building with uniform light level, there are few “places” which function as effective settings for human events. This happens because, to a large extent, the places which make effective settings are defined by light.
Solution
Create alternating areas of light and dark throughout the building, in such a way that people naturally walk toward the light, whenever they are going to important places: seats, entrances, stairs, passages, places of special beauty, and make other areas darker, to increase the contrast.
159. Light on Two Sides of Every Room
Problem
When they have a choice, people will always gravitate to those rooms which have light on two sides, and leave the rooms which are lit only from one side unused and empty.
Solution
Locate each room so that it has outdoor space outside it on at least two sides, and then place windows in these outdoor walls so that natural light falls into every room from more than one direction.
168. Connection to the Earth
Problem
A house feels isolated from the nature around it, unless its floors are interleaved directly with the earth that is around the house.
Solution
Connect the building to the earth around it by building a series of paths and terraces and steps around the edge. Place them deliberately to make the boundary ambiguous—so that it is impossible to say exactly where the building stops and earth begins.
172. Garden Growing Wild
Problem
A garden which grows true to its own laws is not a wilderness, yet not entirely artificial either.
Solution
Grow grasses, mosses, bushes, flowers, and trees in a way which comes close to the way that they occur in nature: intermingled, without barriers between them, without bare earth, without formal flower beds, and with all the boundaries and edges made in rough stone and brick and wood which become a part of the natural growth.
179. Alcoves
Problem
No homogeneous room, of homogeneous height, can serve a group of people well. To give a group a chance to be together, as a group, a room must also give them the chance to be alone, in one’s and two’s in the same space.
Solution
Make small places at the edge of any common room, usually no more than 6 feet wide and 3 to 6 feet deep and possibly much smaller. These alcoves should be large enough for two people to sit, chat, or play and sometimes large enough to contain a desk or a table.
180. Window Place
Problem
Everybody loves window seats, bay windows, and big windows with low sills and comfortable chairs drawn up to them.
Solution
In every room where you spend any length of time during the day, make at least one window into a "window place".
190. Ceiling Height Variety
Problem
A building in which ceiling heights are all the same is virtually incapable of making people feel comfortable.
Solution
Vary the ceiling heights continuously throughout the building, especially between rooms which open into each other, so that the relative intimacy of different spaces can be felt. In particular, make ceilings high in rooms which are public or meant for large gatherings (10 to 12 feet), lower in rooms for smaller gatherings (7 to 9 feet), and very low in rooms for one or two people (6 to 7 feet).
197. Thick Walls
Problem
Houses with smooth hard walls made of prefabricated panels, concrete, gypsum, steel, aluminum, or glass always stay impersonal and dead.
Solution
Open your mind to the possibility that the walls of your building can be thick, can occupy a substantial volume—even actual usable space—and need not be merely thin membranes which have no depth. Decide where these thick walls ought to be.
205. Structure Follows Social Spaces
Problem
No building ever feels right to the people in it unless the physical spaces (defined by columns, walls, and ceilings) are congruent with the social spaces (defined by activities and human groups).
Solution
A first principle of construction: on no account allow the engineering to dictate the building’s form. Place the load bearing elements—the columns and the walls and floors—according to the social space of the building; never modify the social spaces to conform to the engineering structure of the building.
207. Good Materials
Problem
There is a fundamental conflict in the nature of materials for building in industrial society.
Solution
Use only biodegradable, low-energy-consuming materials, which are easy to cut and modify on site. For bulk materials we suggest ultra-lightweight 40–60 lbs. concrete and earth-based materials like tamped earth, brick, and tile. For secondary materials, use wood planks, gypsum, plywood, cloth, chickenwire, paper, cardboard, particle board, corrugated iron, lime plasters, bamboo, rope, and tile.
239. Small Panes
Problem
When plate glass windows became possible, people thought that they would put us more directly in touch with nature. In fact, they do the opposite.
Solution
Divide each window into small panes. These panes can be very small indeed, and should hardly ever be more than a foot square. To get the exact size of the panes, divide the width and height of the window by the number of panes. Then each window will have different sized panes according to its height and width.
247. Paving With Cracks Between the Stones
Problem
Asphalt and concrete surfaces outdoors are easy to wash down, but they do nothing for us, nothing for the paths, and nothing for the rainwater and plants.
Solution
On paths and terraces, lay paving stones with a 1 inch crack between the stones, so that grass and mosses and small flowers can grow between the stones. Lay the stones directly into the earth, not into mortar, and, of course, use no cement or mortar in between the stones.
249. Ornament
Problem
All people have the instinct to decorate their surroundings.
Solution
Search around the building, and find those edges and transitions which need emphasis or extra binding energy. Corners, places where materials meet, door frames, windows, main entrances, the place where one wall meets another, the garden gate, a fence—all these are natural places which call out for ornament.
Now find simple themes and apply the elements of the theme over and over again to the edges and boundaries which you decide to mark. Make the ornaments work as seams along the boundaries and edges so that they knit the two sides together and make them one.
250. Warm Colors
Problem
The greens and grays of hospitals and office corridors are depressing and cold. Natural wood, sunlight, bright colors are warm. In some way, the warmth of the colors in a room makes a great deal of difference between comfort and discomfort.
Solution
Choose surface colors which, together with the color of the natural light, reflected light, and artificial lights, create a warm light in the rooms.
251. Different Chairs
Problem
People are different sizes; they sit in different ways. And yet there is a tendency in modern times to make all chairs alike.
Solution
Never furnish any place with chairs that are identically the same. Choose a variety of different chairs, some big, some small, some softer than others, some rockers, some very old, some new, with arms, without arms, some wicker, some wood, some cloth.
252. Pools of Light
Problem
Uniform illumination—the sweetheart of the lighting engineers—serves no useful purpose whatsoever. In fact, it destroys the social nature of space, and makes people feel disoriented and unbounded.
Solution
Place the lights low, and apart, to form individual pools of light which encompass chairs and tables like bubbles to reinforce the social character of the spaces which they form. Remember that you can’t have pools of light without the darker places in between.
253. Things From Your Life
Problem
“Decor” and the conception of “interior design” have spread so widely, that very often people forget their instinct for the things they really want to keep around them.
Solution
Do not be tricked into believing that modern decor must be slick or psychedelic, or “natural” or "modern art", or “plants” or anything else that current taste-makers claim. It is most beautiful when it comes straight from your life—the things you care for, the things that tell your story.