postcard · Typography

Typography – What I have learnt…

At the start of this course i had never learnt about Typography, this was all new to me. The first assignment brief on the Type Tour poster was my first insight into looking at different styles of type and how they each communicate their own message.

I gained an understanding of the different types used for different audiences / subjects and also what effects bad design in type can cause, like kerning issues could mean the message is read completely wrong.

During the design process you have to be making a note of the visual message it perceives. I researched the history of type, going back to the hieroglyphics and how the alphabet evolved into our language today. I learnt how to use different softwares like In-Design, Photoshop and Illustrator to experiment with Type.

Making the Zine taught me how we can create great type without the use of digital applications. Its easy to go straight to the computer, but the effect of handmade type is more real and fun! I learnt how to use Type with imagery, making sure the positioning is right so as not to compromise the image and ensure they compliment each-other.

I noted how type should be invisible by reading about The Crystal Goblet, it shouldn’t overshadow the important product / message itself.

I learnt about the basics –

  • Kerning
  • Sizing
  • Type families
  • Serif
  • Sans-Serif
  • Script
  • Weight
  • Styles
  • Type Anatomy
  • Widows & Orphans

I gained and understand of which type is best to use for print and the web and how combinations of type can work well together.

 

postcard · Typography

Good Typography

Al­most all texts com­mu­ni­cate a set of points. Some­times a text also needs to in­struct the reader, Other texts of­fer warn­ings or ad­mo­ni­tions. In every case, good ty­pog­ra­phy supports and re­in­forces the mes­sage. Good ty­pog­ra­phy makes the text more effective.

Ty­pog­ra­phy that re­in­forces the mean­ing of the text, even if aes­thet­i­cally un­pleas­ant, is a success.

Some­times typography isnt pretty but is effective for its purpose.

The script font used on the sec­ond sign could be called “pret­tier” than the stan­dard high­way-sig­nage font. But a high­way sign has a spe­cial pur­pose: it’s meant to be read quickly, from long dis­tances, at odd an­gles, and un­der vari­able light­ing and weather con­di­tions. The high­way-sig­nage font stays leg­i­ble un­der all these con­di­tions. It con­sti­tutes good typog­ra­phy be­cause it sup­ports the sign’s message.

A re­lated example:

Here, the same font is used in all three ver­sions of this sign. But the first two signs fail to de­liver the mes­sage—the speed limit is 75—be­cause the ty­pog­ra­phy un­der­mines the text. The most im­por­tant el­e­ment is the num­ber 75. Also im­por­tant is the cap­tion speed limit. Only the third ver­sion gets the bal­ance right. It’s the only ex­am­ple of good ty­pog­ra­phy among the three.

#noticing · postcard · Typography

Invisible and Decorative Type

Decorative Styles
This is the largest category and also the most diverse. Rarely used for lengthy blocks of text, decorative typefaces are popular for signage, headlines and similar situations were a strong typographic statement is desired. They frequently reflect an aspect of culture – such as tattoos or graffiti – or evoke a particular state of mind, time period or theme. Many – such as psychedelic or grunge designs – are time-sensitive and fall out of fashion. Some decorative typefaces use unorthodox letter shapes and proportions to achieve distinctive and dramatic results. Some even appear three-dimensional.

 Screenshot 2016-06-02 11.16.24
Invisible Type
The Cyrstal Goblet –
Beatrice Warde says the text is like a fine wine and ty­pog­ra­phy is the vessel that con­tains it. She ar­gues that the ideal vessel for wine is one that shows rather than hides the wine’s virtues—the tit­u­lar crys­tal gob­let.
Ac­cord­ing to Warde, ideal ty­pog­ra­phy should like­wise be in­vis­i­ble, let­ting the in­trin­sic virtues of the text show through. Ty­pog­ra­phy shouldn’t di­min­ish the mean­ing.
Pre­sen­ta­tion mat­ters specif­i­cally be­cause it’s not mean­ing­less. It re­in­forces our
core mes­sage by adding its own com­ple­men­tary meaning.
#noticing · postcard · Typography

#Noticing Design development

I started off with a grid in Indesign to place my photographic letters in order

Screenshot 2016-05-25 22.19.53Screenshot 2016-05-25 22.39.23Screenshot 2016-05-25 22.56.15

I added a darker background the photographs stand out

Screenshot 2016-05-25 23.03.06

Exploring Typefaces on Dafont

I started to experiment with the Brady Bunch typeface on my design

Screenshot 2016-05-27 14.09.36

Screenshot 2016-05-27 14.25.59

As the collage of letters isn’t immediate to the eye what is says, i decided that the typeface needed to be more clear and easier to read

As #noticing is used on Instagram i decided to check out which font they used – Proxima Nova

I couldn’t use Proxima nova font without paying so i looked for a similar typeface.

Avenir is a close font to Proxima Nova, which is clean, simple and easy to read

avenir

I experimented with this font on my design and the best placement for it to anchor the photograph

Screenshot 2016-05-27 14.46.10Screenshot 2016-05-27 14.44.01Screenshot 2016-05-27 14.43.19

I decided to change to background to a less harsh colour, reducing the black to a dark grey. This makes it softer to the eye without compromising the overall effect of the design.

Placing the text beneath the photograph on the right hand side works well with anchoring what the photograph says.

Screenshot 2016-05-27 15.02.30

Final design for front of Postcard. The typeface works well because it compliments the images by being clear and easy to read. Having the colour in white makes it stand out on the darker background and sits well with the style of the photographs being in black and white

Screenshot 2016-05-27 15.15.52

Back of Postcard

I research some designs with interesting type on the back of a postcard. I liked the way the type was used instead of a base line on the card. A postcard is quite informal so the type can be playful with the layout

Screenshot 2016-05-27 15.12.50Screenshot 2016-05-27 15.13.07Screenshot 2016-05-27 15.13.29

Designing the postcard -I started by using the same typeface Avenir as used on the front of the postcard. I repeated the word #Noticing in a vertical line to create the base line

Screenshot 2016-05-27 15.27.53

I experimented with using a typewriter type face with adding in more detail – Note here / Address here. I also added in a logo for a museum to give the postcard design a real effect

Screenshot 2016-05-27 15.50.17Screenshot 2016-05-27 15.43.11

I added in a box in the top right hand corner to use as a stamp guide

Screenshot 2016-05-27 16.15.33

Final design back of postcard – I decided not to use the added text of guides for where to place the address and note as the design works well without adding extra type

Screenshot 2016-05-27 16.17.12

#noticing · postcard · Typography

Walking artists working with Type

Hamish FultonScreenshot 2016-06-01 11.32.33

This artist has produced typography art through his individual walking experiences.

One of his quotes that i love is –

“AN ARTWORK MAY BE PURCHASED BUT A WALK CANNOT BE SOLD”

 

Screenshot 2016-06-01 11.34.34

P – Clear font and spacing works well

M – 4th line is visibly harder to read compared to the other larger text

I – Colours are a good contrast with the RED and BLACK highlighting which text goes with other text in the frame

Screenshot 2016-06-01 11.34.49

P – Use of capital letters are bold & clear in the collage of words

M -Can be hard to read the initial message in the middle of all the words

I – Random words are placed in the sky text =, such as Raven, cloud

Screenshot 2016-06-01 11.35.31

P – Type frames the image well in the middle, drawing in my eye. Black & white bold text work well together

M – Side text can be harder to read at an angle

I – Interesting how the eye follows the flow of the text around the frame, yellow is different and works ok for its purpose

Richard Long

Screenshot 2016-06-01 11.52.34

P – Using the blue text to highlight the title and subheading work really well

M – Font is quite boring for a Tsunami

I – Style and flow of the information is interesting and easy to read

Screenshot 2016-06-01 11.52.23

P – White font against the bold colours stand out. The sections of type separate the Title, Subtitle and Description

M – Punctuation could have been used in the bottom description

I – Good combination of different typefaces compliment eachother

 

 

 

research · Typography

Type History

Type Technology — The

Four Revolutions

Gutenberg (ca. 1450-1480) & The Impact of Printing

GutenbergBefore the printing press, books were produced by scribes (at first, primarily based in monasteries, although by the 12th century there were many lay copiers serving the university market). The process of writing out an entire book by hand was as labor-intensive as it sounds (try it some time): so much so that a dozen volumes constituted a library, and a hundred books was an awe- inspiring collection.

This remained true until the invention of movable type, the perfection of which is attributed to Johannes Gutenberg* (although the Chinese had it several centuries earlier, and a Dutch fellow named Coster may have had some crude form a decade earlier). Gutenberg, (Picture) although a man of vision, did not personally profit from his invention. He worked for over a decade with borrowed capital, and his business was repossessed by his investors before the first mass-produced book was successfully printed — the Gutenberg Bible of 1454, printed in Mainz by Fust* and Schoeffer*.

Gutenberg’s basic process remained unchanged for centuries. A punch made of steel, with a mirror image of the letter is struck into a piece of softer metal. Molten metal is poured into this, and you get type. The type is put into a matrix to form the page of text, inked, then pressed into paper.

Within several decades typesetting technology spread across Europe. The speed with which it did so is impressive: within the first fifty years, there were over a thousand printers who set up shops in over two hundred European cities. Typical print runs for early books were in the neighborhood of two hundred to a thousand books.

Some of these first printers were artisans, while others were just people who saw an opportunity for a quick lira/franc/pound. The modern view of a classical era in which craftsmanship predominated appears unjustified to scholars: there has always been fine craft, crass commercialism, and work that combines both.

To those who have grown up with television, radio, magazines, books, movies, faxes and networked computer communications it is difficult to describe just how much of a revolution printing was. It was the first mass medium, and allowed for the free spread of ideas in a completely unprecedented fashion. The Protestant Reformation might not have occurred, or might have been crushed, without the ability to quickly create thousands of copies of Luther’s Theses for distribution.

Many groups sought to control this new technology. Scribes fought against the introduction of printing, because it could cost them their livelihoods, and religious (and sometimes secular) authorities sought to control what was printed. Sometimes this was successful: for centuries in some European countries, books could only be printed by government authorized printers, and nothing could be printed without the approval of the Church. Printers would be held responsible rather than authors for the spread of unwanted ideas, and some were even executed. But this was a largely futile struggle, and most such restraints eventually crumbled in the western world.

Industrial Revolution

Steam, Line-casting & Automated Punch-cutting (start 1870-95; end 1950-65)

Amazingly, the printing press and the science of typecutting had only minor refinements from the late 1600s to the late 1800s. Towards the end of this period, the industrial revolution brought major innovations in printing technology. Rotary steam presses (steam 1814, rotary 1868) replaced hand-operated ones, doing the same job in 16 per cent of the time; photo-engraving took over from handmade printing plates.

Typesetting itself was transformed by the introduction of line-casting machines, first Ottmar Mergenthaler’s* Linotype* (1889), and then the Monotype* machine. Essentially, line-casting allowed type be chosen, used, then recirculate back into the machine automatically. This not only introduced a huge labor savings in typesetting, (again, on the order of the 85% reduction in printing time), but also rendered obsolete the huge masses of metal type created by the previously existing type foundries.While typesetting and printing speeds increased phenomenally, so did the speed of punchcutting*. In 1885, Linn Boyd Benton* (then of Benton, Waldo & Company, Milwaukee) invented a pantographic device that automated the previously painstaking process of creating punches. His machine could scale a drawing to the required size, as well as compressing or expanding the characters, and varying the weight slightly to compensate for the larger or smaller size — this last being a crude form of the optical scaling done by skilled typographers making versions of the same font for different sizes.

In optical scaling, the thickest strokes retain the same relative thickness at any size, but the thinnest strokes are not simply scaled up or down with the rest of the type, but made thicker at small sizes and thinner at large display sizes, so as to provide the best compromise between art and readability. (Linn Boyd Benton was also a type designer, and father of the prolific Morris Fuller Benton*, designer of dozens of faces including New Century Schoolbook. He managed manufacturing at ATF from 1892 until 1932, the year of his death.)

The economic impact of all these advances on the type industry cannot be overstated. For example, in the United States, the majority of type foundries escaped a bankruptcy bloodbath in 1892 by merging into a single company, called American Type Founders (ATF). Ultimately twenty-three companies merged into ATF, making it far and away the dominant American type foundry.

Also around this time, the “point”* measurement system finally reached ascendancy. In the earlier days of printing, different sizes of type had simply been called by different names. Thus, “Brevier” was simply the British name for 8-point type of any style. Unfortunately, these names were not standardized internationally; 8-point type was called “Petit Texte” by the French and “Testino” by the Italians. Such a naming system also allowed wonderful confusion, such as “English” referring both to blackletter type, and a 14-point size; “English English” was thus a 14-point blackletter*!

Pierre Simon Fournier* had first proposed a comprehensive point system* in 1737, with later refinements, but what was ultimately adopted was the later version developed by Francois Ambroise Didot*. This put approximately 72 points to the inch (and now exactly 72 points to the inch on most computer-based typesetting systems).

Photocomposition

(Intertype et. al., start 1950-60, end 1975-85)

The first photo composition devices (the French “Photon” and Intertype‘s Fotosetter) made their debuts as early as 1944, but didn’t really catch on until the early 1950s. Typeface masters for photocomposition (Phototypesetting) are on film; the characters are projected onto photo-sensitive paper. Lenses are used to adjust the size of the image, scaling the type to the desired size. In some senses this technology was an “improvement,” allowing new freedoms, such as overlapping characters. However, it also pretty much eliminated optical scaling (see 2.2, above), because in the rush to convert fonts to the new format, usually only one design was used, which was directly scaled to the desired size.

Digital (start 1973-83)

The earliest computer-based typesetters were a hybrid between the above-mentioned photocomposition machines and later pure digital output. They each had their own command language for communicating with output devices. Although these machines had advantages, they also had problems. None of these early command languages handled graphics well, and they all had their own formats for fonts. However, some of these devices are still in service as of 1995, for use in production environments which require more speed and less flexibility (phone books, newspapers, flight schedules, etc.).

In the late 1980s PostScript*, developed by John Warnock* Charles Geschke*, gradually emerged as the de facto standard for digital typesetting. This was due to a variety of reasons, including its inclusion in the Apple Laserwriter printer and its powerful graphics handling. When combined with the Macintosh, the first widely used computer with a what-you-see-is-what-you-get display (WYSIWYG*) and PageMaker* (called the first desktop publishing program), the seeds were all sown for the current dominance of computer-based typesetting.

A portion of the high-end typesetting still involves printing to film, and then making printing plates from the film. However, the increasing use of high-resolution printers (600-1200 dots per inch) makes the use of actual printing presses unnecessary for some jobs. And the next step for press printing is the elimination of film altogether, as is done by a few special systems today, in which the computer can directly create printing plates.

Today, although PostScript predominates, there are a variety of competing page description languages (PostScript, HP PCL, etc.), font formats (Postscript Type One and Multiple Master*, Truetype* and Truetype GX, and today’s Open Type*) computer hardware platforms (Mac, Windows, etc.) and desktop publishing and graphics programs. Digital typesetting is commonplace, and photocomposition is at least dying, if not all but dead. Digital typefaces on computer, whether Postscript or some other format, are generally outline typefaces, which may be scaled to any desired size (although optical scaling is still an issue).

There has been considerable economic fallout from all this in typography. Although some digital type design tools are beyond the price range of the “average” user, many are in the same price range as the mid- to high-end graphics and desktop publishing programs. This, combined with the introduction of CD-ROM typeface collections, has moved digital type away from being an expensive, specialized tool, towards becoming a commodity. As a result of both this and the brief photocomposition interregnum, the previously established companies have undergone major shakeups. Major vendors, such as American Type Founders, have failed to successfully make the digital transition, and gone bankrupt instead (although at this time ATF has undergone a resurrection). More recently, even major digital type foundries have –dare one say foundered?– on the shoals of ubiquitous cheap typefaces.

Although there is a new accessibility of type design tools for hobbyists and professional graphic artists, the decreasing value of individual typefaces has resulted in a decrease in the number of working type designers per se (both independents and company-employed).

Editorial Design · Environment Brief · Typography

Type Face for magazine

I explored different type faces suitable for magazine use and readability.

I narrowed my choice down to three. These fonts reflect classic book forms and make for comfortable, pleasing reading for longform texts.

Screenshot 2016-05-19 21.48.34Screenshot 2016-05-19 21.49.16Screenshot 2016-05-19 21.49.44

I decided on Minion Pro as my type face as it is It is one of the most popular typefaces used in books and magazines, particularly intended as a font for body text in a classical style, neutral and practical while also slightly condensed to save space.

It is suitable for different text sizes and small print. It is an early member of what became Adobe’s original program, which created a set of type families primarily for book and print use, many like Minion in a deliberately classical style.

https://typekit.com/lists/good-for-longform

https://en.wikipedia.org/wiki/Minion_(typeface)

Ethics · Infographics · Typography

Typography Justification

The infographic below illustrates how to use as best practice in Typography. i like the examples shown and how things like combining two similar fonts doesn’t work well in design. I referred to these elements when thinking of the type we used in our Ethics poster.

font-infography

When we were discussing and justifying typeface for our poster, we all sat down in front of the screen to compare 2 typefaces – Bebas Neue on the left hand side and SF Old Republic on the right hand side.

Screen Shot 2016-04-11 at 10.50.28Screen Shot 2016-04-20 at 12.01.42The Bebas Neue typeface is a sans serif font family,clean lines and straightforwardness making it a good type for Print. However i think the type face is quite serious and the Ethics poster needs a softer typeface.

Screen Shot 2016-04-20 at 12.00.13

Screen Shot 2016-04-20 at 12.00.06The SF Old republic typeface is a clean and simple sans serif. It has a softer approach then Bebas Neue and works with both Capital and lower case letters. The only letter i didn’t like was the Y as it looks too angled. The type face is clear and works well on an informative poster. The combination of Capital letters in the Title and the lower case text meant that further typefaces didn’t have to be used, however it could be a design development to include another typeface to add to the over all effect of the infographic poster.

Screen Shot 2016-04-20 at 12.19.31

[INFOGRAPHIC]: The 10 Commandments of Typography

design · research · signifiers · Typography · Website analysis · Website design

Type on the Web

To be effective on a Web site, typography needs to be: clean, clear, appealing, and readable. Good web typography can attract, engage, and keep your viewer on your site.

Establish – and then follow – good typographic hierarchy. Use titles and subheads to create emphasis and get your point across before a viewer gets bored and clicks out of a page or a site. Also try using bold and italic versions, color, and case (caps, lowercase, or mixed case) to reinforce/emphasize content priority and maintain good flow.
Beware of small type. Type size is one of the most important factors when designing with type on the Web. Small type is hard to read at the lower resolution of most screens and monitors. Go larger rather than smaller to ensure optimal reading on all monitors, as well as on smaller screens: laptops, iPads, and hand-held devices.
Avoid justified text, as it frequently leads to bad spacing, including the dreaded rivers of white space. What the viewer sees on the Web, typographically speaking, is dependent on several variables, including: browser, monitor settings, font style and size preferences, as well as platform (Mac or PC). This means that line breaks vary from computer to computer, which can lead to some truly awful spacing if text is justified. Stick with flush left or centered type.
Use smart punctuation, including smart, or typographer’s quotes, as well as en and em dashes, rather than primes, double hyphens and other “dumb” typography. These professional typographic conventions are as appropriate on the Web as they are in print.
Use special effects sparingly. You can create visual confusion by going overboard with gradients, shadows, and other special effects. Using them occasionally and wisely will go a long way toward emphasizing your type and creating pages that are engaging/attractive. Similarly, use a light hand with busy or cutesy icons, buttons, and starbursts.

Create high contrast between the color of the type and the background. Achieve this by selecting light, neutral backgrounds for darker type (and the reverse). Avoid placing type on a busy background, which can make it hard to read.
Properly size typographic images to the required pixel dimensions. This is worthwhile for banners, logos, and teasers. Simply scaling up reduces sharpness, readability, and effectiveness. Simply reducing a web image makes for a larger file and a longer loading time.Screen Shot 2016-02-29 at 11.47.00

Build in plenty of “white” space (even when it is not white) around your type as well as in the overall design. Crowding type (as well as other elements) can make a Web page less inviting, more difficult to read, and just plain confusing.

 

http://www.fonts.com/content/learning/fyti/typographic-tips/8-tips-for-type-on-the-web