Monthly Archives: August 2013

Pinterested: Back To School

pinterest-backtoschool2

Ready for a new semester? Even if you’re not yet ready for all the homework and exams in store for you, our Back To School pinboard is a collection of images and fonts that are reminiscent of playgrounds, chalkboards, and learning how to connect your letters in writing with that thing called cursive that will help ease your mind. From fonts that remind you of elementary school like Lemonade Std Regular to fonts that hold memories of pep rallies and high school football games such as Yearbook Std Solid and Princetown Com.

CSS font-size Property

Just so you know, we’re not all print all the time here at FontShop. In fact a great majority of my work here has been conveyed solely over the internet. In terms of graphic design, print’s my first love, but I distinctly remember some time in late 2009 that I heard something about webfonts, the canvas element, pseudo-selectors, transitions, and a number of other experimental and not-widely-supported web technologies, and thought, ‘I need to really dig down into this stuff.’ One ambitious autoinitiated web project later (it was something similar to Readability, before I knew it existed, indeed, perhaps before it did exist), and I was happily up to my nose in markup, CSS, JavaScript, and preprocessing, feeling good about the direction of the internet and electronic media in general.

Picture 1

Since then I’ve tried to keep up with at least the aspects that touch web typography, but I’m not a current practicing web designer, or a specialist in web composition. That distinction goes to people like Eric Meyer. I am though, like most typographers, a natural fiddler and figure-outer, and so briefly I’d like to share one tiny but important practice regarding sizing type on the web.

body { font-size: 100%; }

This is it. Start by specifying the font-size as 100%. Assuming that you are capable of controlling all other viewing conditions, this is the equivalent to specifying 12pt, 16px, 1em, the keyword medium, or its associated number value, 3. Actually, after testing it, I would never recommend using those old html number values, but the rest hold up. From here, all other font-size specifications should be in em units, e.g. this: h1 { font-size: 3em; }

So why percent? And why 100%?

First, percent holds up where the others don’t, namely in not interfering with font scaling, user overrides, and not wrecking everything in older browsers. About 100: It behaves predictably, and it’s large enough to comfortably read on just about any screen. (The text you’re reading now is set to 100% or 16px.) A caveat: There’s a strain of thought regarding font-size that says 16px is an unusual reference size, so why not shift the scale so that 1em is the same as 10px, 1.4em the same as 14px, and so on? To do so, divide 10 by 16, and set your body font-size at this percent, 62.5%. Then set subsequent elements in relation to this, in em units. This is easily achievable and works reliably in most browsers, but still gives you problems in the older browsers. So weigh your options, and stick with what you know works in the majority of cases.

Speaking of sticking with what works, you should also consider doing the opposite: abandoning older browsers for newer ones, taking advantage of newer CSS functionality, and letting a service such as Modernizr or Sass deliver more primitive CSS to the old browsers.

Hang on, what kind of new CSS functionality?

One that directly relates to this subject is calc(), which lets you do simple math in your CSS. It’s really handy for specifying fractional units simply, and for mixed-unit calculations. Another is a new unit of measure, rem, which unlike em, functions as a constant, referencing the root em rather than the em specified in the parent element.

So what size is it going to be, really?

We’ve arrived at the saddest part of this piece on sizing. At this point in time there’s no definitive answer. With screen resolutions all over the place, a pixel is not a pixel is not a pixel, and while absolute units such as the point, (1 in = 72 pt) ought to stay absolute, apparently doing so would break old designs, and we’re stuck with them being reduced to the task of stand-in multipliers for relative units. So an inch is 96 reference pixels, a point is 1.333333px, and a physical pixel may be anywhere from 1px to 2px or more in reference pixels.

The good news

Scale-2

If there’s anything I’ve learned about web standards in the past five years, it’s that people who care about this stuff are in a position to set the standards. At TypeCon in Atlanta back in 2009, there was a panel discussion about what form commercial webfonts would ultimately take. It was less than a year after that that all major browsers were planning to support the new format, woff. Standards bodies followed the lead of the browsers. So ultimately we’re the ones driving this.

That’s it for now. Thanks to Pieter van Rosmalen’s Nitti for setting this week’s nameplate. Using Type continues here Thursday.

Novel and Auto

Let’s take a quick look today at the pairing of Christoph Dunst’s Novel and Underware’s Auto (that’s Akiem Helmling, Bas Jacobs and Sami Kortemäki).

Novel-and-Auto-1 Novel-and-Auto-2
Novel prominently displays its calligraphic roots, particularly in its compact italic. This naturally extends a close relation to Auto, a low contrast sans with a well-developed calligraphic flair. That’s understating it. Auto is to my knowledge the first typeface to initially ship with multiple sets of italics, each in a distinct style.
Novel-and-Auto-5

Together, Auto’s young voice and Novel’s classic finish strike a chord full of depth and interest.

Novel-and-Auto-3

Novel-and-Auto-4

As is somewhat commonly the case with newer text faces, Novel has its own companion sans already, Novel Sans, complete with a condensed weight, and rounded and monospaced variants.

New Fonts This Week

Ladislav by Suitcase
ladislav
Trim Mono by Letters From Sweden
Webfonts Availabletrim-mono
Melody Family by Filmotype
melody-family
Hemlock by Filmotype
hemlock
Triplex Sans CE + Greek by Emigre
triplex_sans
Triplex Serif CE + Greek by Emigre
triplex_serif

Continuing Promotions

Grota by Latinotype$19 until 28 August

Lavigne Text, Lavigne Display, Medusa, and Winco by ReType30% off until 31 August

Webfonts Available

Sudtipos Collection30% off until 31 August, promo code: TYPECON

Herman Mono Bold Italic Pop and Bex Light Pro by Geen BitterFREE until 1 September

Zulia Pro by Sudtipos30% off until 7 September

Analfabeto, Designal, Frankie Dos, and Peter Sellers by Type–Ø–Tones20% off until 30 September

Buyer’s Guide: New Fonts Page

Looking for new fonts? If you follow the FonShop blog, then you may have noticed that we mention new fonts every Tuesday. And since our team loves to create lists, we made the ultimate list of just new fonts. Bookmark the New Fonts page and keep updated on latest fonts that FontShop carries.

NewFontsPage

Pinterested: Alphabetized

pinterested-alphabetized

How many of you are excited to start a new school year? Ok, maybe you’re not excited for all the new books you have to read or all the lectures you have to sit through, but we have something that will keep you interested. Our Alphabetized board is a collection of interesting finds that showcase full alphabet designs ranging from posters, unique fonts, home decor, and character sets designed just for fun.

Cooper and Brandon Grotesque

It may surprise you to find out that Cooper Black is only one weight of Oz Cooper’s self-titled work, Cooper, which also includes a light weight, and a medium weight for text. Today we pair the Cooper family with Hannes von Döhren’s Brandon Grotesque.

Cooper-and-Brandon-Grotesque-1 Cooper-and-Brandon-Grotesque-2Together, the historic influences and softened details of each serve as a solid enough area of cohesion, while the overall difference in tone allows Brandon to ably direct the reader’s path. Just one note on Cooper—consider spacing the type more loosely to perform better at smaller sizes. The below example is set without any added spacing.
Cooper-and-Brandon-Grotesque-4 Cooper-and-Brandon-Grotesque-5

Brandon Grotesque additionally comes in a text variant, Brandon Text, for setting body copy. Inverting our relationship, here’s Cooper in the role of display face, with Brandon Text’s refit lowercase ably handling the opposing task.
Cooper-and-Brandon-Grotesque-3

Great Pairs land here each week.

New Fonts This Week

HWT Arabesque by Hamilton Wood Type
Webfonts Available
week33_hwt-arabesque
HWT Bon Air by Hamilton Wood Type
Webfonts Available
week33_hwt-bon-air
Catchwords by Hamilton Wood Type
Webfonts Available
week33_hwt-catchwords
Geometric by Hamilton Wood Type
Webfonts Available
week33_hwt-geometric
Republic Gothic by Hamilton Wood Type
Webfonts Available
week33_hwt-republic-gothic

Continuing Promotions

Grota by Latinotype$19 until 28 August

Lavigne Text, Lavigne Display, Medusa, and Winco by ReType30% off until 31 August

Webfonts available
 

Sudtipos Collection30% off until 31 August, promo code: TYPECON

Herman Mono Bold Italic Pop and Bex Light Pro by Geen BitterFREE until 1 September

Zulia Pro by Sudtipos30% off until 7 September

Analfabeto, Designal, Frankie Dos, and Peter Sellers by Type–Ø–Tones20% off until 30 September

Buyer’s Guide: exljbris EULA

EL

In 2008 exljbris released it’s first commercial typeface, Museo, with several weights offered for free. This strategy worked well, turning Museo into a bestseller. The foundry has continued to add additional typefaces, such as Anivers and Fertigo, with free weights. Below are some highlights from their EULA.

Basic EULA Rights

  • Desktop use supports up to the maximum number of simultaneous users specified in the applicable license, starting with 1 users.
  • You may provide the font to a designer, printer, or other service bureau that is exclusively working on your behalf only if they agree to the terms of the original license and retain no copies of the font software on completion of the work.
  • Non-editable embedding is allowed.

Restrictions

  • You cannot distribute the font or make it accessible to third parties beyond the scope of the original license.
  • You cannot embed the font into software or hardware products.

See exljbris EULA

If you have additional questions you can always email FontShop’s Support Team for help.

EULA highlights will be posted every other Monday. Next up is TypeTogether.

Pinterested: Water You Waiting For

pinterest-wateryouwaitingfor2

As the end of summer is nearing, it’s still important to stay hydrated! August is National Water Quality Month in the US, so we went fishing in our ocean of fonts for some water-themed faces from Linotype’s WaterFlag Regular and F2F Whale Tree Std Regular to Electric Typographer’s Finfont — you can find these gems in our Water You Waiting For board.

Widows, Orphans, Keep Options

This will be very brief and to the point.

Using Type

Orphans are stranded bits of copy, a single word occupying its own line, such as the word type, above, at the top of the right column. Widows are longer bits of copy, a few words perhaps, occupying a single line that’s become estranged from its native text column, pushed to the top of the next column, alone.

Left unresolved, the presence of widows and orphans reveals to the reader the inattention of the typographer. They throw off the margins; they call undue attention.

Keep Options

In InDesign you can specify a minimum number of lines allowed to break between columns. To do it, apply a paragraph style to the paragraphs you’re working with and set the number of lines in the Keep Options page of that paragraph style’s dialog.

Keep Options in InDesignNote that the default Keep with Next value, 0, is probably best to keep at 0 until you know what you’re doing with it.

There. The two lines jumped over to clothe, feed, house, and otherwise eliminate the orphaned status of this previously lost word, type. Solved, right? No. What we’ve covered here is really just one aspect of the craft. The art of typography is creating the kind of flexible compositions that absorb the shocks—both of the problems, as well as those created by their solutions.

Picture 7

Look at the hole left behind in the left column created by our keep options. To fill it, we may have to bump something from a previous page, arbitrarily resize the text frame (and perhaps its surrounding text frames), try something funny with the leading or tracking, italicize some foreign words, or otherwise do some good old-fashioned copyfitting. Or, as I often do when setting longer works, most or all of these. A good layout will permit this kind of editing.

Okay. That’s it. Thanks to MVB Verdigris for setting our examples. Using Type continues here Thursday.

Malaussène Translation and T-Star

Malaussene-Translation-and-T-Star-1

Let’s look at a pairing of a couple of Gestalten faces, Laure Afchain’s Malaussène, and Michael Mischler’s T-Star.

Malaussene-Translation-and-T-Star-2

Alright, technically it’s called Malaussène Translation, and that’s because it’s the first of a series that explores different kinds of stroke contrast: translation, rotation, and expansion. If you haven’t read Gerrit Noordzij’s The Stroke, doing so will clear everything up in about a fifty pages. The face comes in four weights, the standard Roman, Italic, Bold—and then—out of nowhere a super-quirky topheavy black Display weight. Its overall feel in text is fresh and refined.

T-Star is a spare, rectilinear design in five weights, all but the heaviest accompanied by its italic. It also happens to have a monospaced variant in selected weights. Together the two serve to create an updated and contemporary palette capable of refreshing the eyes of their readers.

Malaussene-Translation-and-T-Star-3 Malaussene-Translation-and-T-Star-4
Malaussene-Translation-and-T-Star-5
Great Pairs land here each Wednesday.

New Fonts This Week

Zulia Pro by Sudtipos
week32_zulia
Proxima Nova Soft by Mark Simonson Studio
Webfonts Available

week32_poxima-nova-soft
Bobbi Bee by Baseline Fonts
week32_bobbi-bee

Continuing Promotions

Lavigne Text, Lavigne Display, Medusa and Winco by ReType30% off until 31 August
(Webfonts Available)

 

Four Seasons by Latinotype65% off until 15 August

Grota by Latinotype$19 until 28 August

Anafalbeto, Designal, Frankie Dos, and Peter Sellers by Type–Ø–Tones20% off until 30 September

.

Buyer’s Guide: Family Pages

New family pages are here and they have some great features that you should be aware of. But first let’s define what we mean when we mention the term family.

A family is a collection of related typefaces which share common design traits, common name, and are from the same foundry.

When you look at a family page you’ll be able to filter by product, format, and a series of popular sortable list. For this example, we’ll use Univers.

Family_ProdProduct

Singles will show you all styles that are available within the family. Packages with show you groups of those styles that are available. All will show you both singles and packages.

Family_FormatFormat

If you know the format you need to license your fonts in, then you can choose those formats here. Other includes legacy formats like PC PostScript and Mac PostScript. All will show you every format available.

Family_SortSort

You can also sort by Bestsellers, Weight and Width, Price, and Name.

We hope you like the new options and if you have additional questions you can always email FontShop’s Support Team for help.

Pinterested: Type Travels

pinterest-typetravels

Did you enjoy our travel-themed newsletter this week? We have a few vacation boards on Pinterest from past trips our very own FontShoppers have taken. From Tokyo to London, check out non-Western type in use and find Old English in the UK.

Follow

Get every new post delivered to your Inbox.

Join 59,466 other followers