Getting a handle on feel, personality and function

Earnest is a free record-keeping iPhone app for freelancers and small businesses. You enter your individual income and expenses to get an idea of how much tax you’re due.

Earnest running on the iPhone

Early on in planning, we decided that the personality of our then-unnamed app had to counteract the mass of utilitarian finance apps already available. We thought it should feel like a trusted companion, not a soulless pocket calculator.

But while an affable personality could help shape the overall feel of the app, we didn’t want it to hijack important workflows. There had to be an appropriate balance.

My early moodboards

I was already cobbling together moodboards to help guide the creative direction, but we needed a name to begin working on the logotype. Names like MyRecordKeeper or iRecordKeeper were to be avoided – too formulaic, too vapid. The double entendre of the name Earnest injected a little life into this functional spec and hinted at the idea of a diligent, bookish worker. It also just sounded nice, and is short. (It’s not all science, you know.)

Earnest, the person

As I explained in my previous post, personifying type is something I do to help focus my choices. Selecting a small set of adjectives gives meaning to choices and keeps me from getting derailed by the latest trendy typeface.

We applied this same technique when thinking about the whole character of Earnest – wrapping our chosen adjectives in a sentence:

“He’s personable, plucky and a little mischievous, but at heart a loyal companion with integrity”.

If Earnest were a person, he’d probably be Russell from Pixar’s Up.

Narrowing my classifications

I started scouring my scrapbook for suitable typefaces and ruled out a serif face early on. Most people consider accounting stuffy and dull, and an authoritative serif was likely to emphasize that. Conversely, any sans serif worth considering had to be ballsy enough to do Earnest’s personality justice. If it lacked personality—or worse, felt like it was trying to make things ‘cool’—it wouldn’t work. Accounting isn’t cool, so let’s not pretend it is.

Earnest isn’t from the 13th century, either, so I knew I could forget about blackletter.

A script or calligraphic face was a possibility, depending on the style. It might end up feeling regal, which didn’t feel like a good fit for Earnest. But if it felt authentically handwritten it could help bring out those personable, loyal or even mischievous traits.

Finally, a slab serif would be able to stand confidently on its own, and depending on its particular features, could help bring out that plucky aspect of Earnest’s character without things descending into a kid’s birthday party invitation.

Getting my hands dirty

Each time I found what felt like a promising typeface, I set the word Earnest in the type preview tool on its foundry website to find the best weight. I then took a screenshot of each preview image and pasted a copy into A4 artboards in Illustrator.

My initial selection of typefaces

After collecting all of my options, I printed the artboards and stuck them on the wall to reassess and narrow the batch to two or three good contenders. (If I’d been using the Typecast design tool at the time and the fonts were available, I could’ve just set my choices up side-by-side in the browser to compare them, which would’ve would have been quicker.)

Hacking the CSS and inline values in the DOM Inspector

I then set Earnest again for each of my shortlisted choices, except this time I opened up the DOM inspector in my browser and hacked the dimensions of various site elements until the preview image was as wide as my monitor would allow.

I grabbed a new screenshot and repeated the process before pasting them onto a fresh Illustrator artboard and tracing them. With each option now a vector group, the characters could be kerned by hand to do each typeface justice before coming to a final decision. (Again, in Typecast, you could just resize them to full screen width in the browser all at once, and then output your type as a PNG.)

My final two contenders: Maple Black from Process Type Foundry and Farao Text Bold from MyFonts

Farao Text Bold has tons of character: its exaggerated terminals, huge x-height, contrasting tiny ascenders, severe shoulders, varied counters and practically non-existent aperture give it a real mid-sixties Hanna-Barbera vibe. But the eccentricity of its details and slouching letterforms make it feel just a bit too disheveled. It’s like a version of Earnest who’s taken early retirement in Miami and had one too many tequilas.

Earnest, for all his plucky and mischievous qualities, is still a record-keeping app. He helps with your money. It would have been easy to go that little bit too far and have the logotype come off as cartoony. Maple Black contrasts a similarly large x-height and short ascenders just like Farao, and its eyes and counters are almost comically small. But despite its exaggerated features, it isn’t as confrontational as Farao. It felt more like Russell: lovably chubby.

Having settled on Maple Black, I developed what I had into the finished logotype that you see at the end of this gif.

By forming a plan of attack before I began browsing for type and setting fonts, I was able to quickly work my way past the sea of typefaces that weren’t suitable for Earnest and more easily identify the best fit, rather than blindly fumbling around. Hopefully this example (and my tips for narrowing your type options) will help you feel a little less lost when it comes to choosing type and become more confident in your choices.

A big thank you to our guest author Robbie Manson for writing today’s post. For more from him, check out his work & articles, his top-notch talk from the New Adventures conference titled ‘The Mindful Designer’, and his tweets.

Guest authors are paid for their contribution, and all opinions are their own. If you’d like to write for the Typecast blog, get in touch with shelly dot wilson at typecast dot com

The research was commissioned by Monotype’s Brand Perfect initiative earlier this year and looked at the top 100 online consumer publications in the US, UK and Germany. Researchers observed that publishers have been slow to provide rich and contextually appropriate cross-platform experiences.

Only two out of the 100 titles in the study were responsive sites: British Vogue (UK) and Quartz (US). A modest 25% were optimized for tablet displays, with the majority defaulting to automatically scaled-down versions of their desktop sites (despite the fact that mobile smart devices like tablets and phones are predicted to outsell desktop computers two-to-one this year). And although many of the titles offered a mobile app version of their site, many of these were a replica of their print publication.

Winning by designing for the reader

But it wasn’t bad news for everyone. A panel of experts assembled by Brand Perfect selected British Vogue as the title offering the best cross-platform experience to readers.

“This feels like the most modern of the sites we’ve looked at today, in terms of understanding browser technology and its layout,” said Alex Ossman, panel member, Digital Creative & User Experience Consultant, and the creative lead on the BBC iPlayer. “Nice big font sizes; good amount of white space; good design grid.”

The panelists also admired Vogue’s design clarity, use of web fonts and HTML5, its adaptive design approach and its strong brand personality.

“It’s definitely the winner for me. And it’s also refreshing to see British Vogue have enough confidence in its brand to keep advertising clear of the homepage, which is perhaps analogous with a magazine’s front cover.”

The team at British Vogue attributes their site’s success to a number of factors: making typography and content the top priority throughout the process, questioning norms, finding new and better ways to work together, and frequent testing and iteration.

“[Before this redesign], our article templates were like countless other sites’,” says Gareth Williams, Lead Information Architect at Condé Nast Digital UK. We [had] site navigation on top, assuming if someone selected this article, the first thing they would want is full access to the whole site. The usual right column held advertising, boxes for most popular, what’s being shared on Facebook, photo section highlights, etc. We figured that people were most attracted to the words ‘most popular’ and ‘most shared’, and, therefore, the content underneath these. Our research showed that these long held industry truths were not true today.”

By adopting a content-first approach and getting rid of the distracting elements many publishing sites still hold on to, they were able to improve the way readers explore content.

“We threw away the idea that an article page, list page, gallery and homepage are all separate entities and aimed to build an experience that focuses on the user’s overall journey.”

Careful consideration of the typography and heaps of experimentation allowed them to establish and convey a strong visual brand identity not just on desktop, but across platforms and viewports.

“Typography and layout are essential to getting a brand’s voice right,” says Kat Windley, the team’s Lead Designer. “And in this case, being able to take full advantage of every screen size and density to ensure things like the images were as big and high-quality as possible and that the typography was rendered with real fonts instead of grainy images was crucial. Key to this was being able to design with web fonts in the browser from the beginning to test combinations and to continually evolve complimenting styles.”

According to Pete Miller, the team’s Head of Product Development, relying less on Photoshop and more on prototypes and rapid iteration improved how closely the team worked together as well as the quality of information they based decisions on.

“Our key on this project was throwing away the Photoshop-first approach and letting information architects, designers and developers work together to verify their concepts – building prototypes along the way,” he explains. “Then we continued that integrated partnership throughout the build process, allowing ourselves to keep evolving concepts as we found what was working and what wasn’t.

The goal is to now keep iterating in an intelligent and more frequent way, instead of focusing on large-scale and infrequent redesigns.”

If you’d like to hear more about Condé Nast Digital UK’s design process, check out their article on their content-first approach with Wired UK. Or have a look at our post Ditching the Shoehorn for tips on how to move published content from replica editions to web-friendly, multi-platform formats and still get typography that works everywhere.

When I began pursuing an interest in typography a number of years ago, it felt a little like I’d put Nada’s sunglasses on. My perspective changed, and I began to find typographic treasures among the most unremarkable of objects.

Suddenly the world looks very different
They Live, © 1988 Universal Studios

Finding the right typefaces for your projects can be tough, especially if you’re new to the field, but asking the right questions and opening your eyes to the type around you will help instill confidence in your choices. Here’s my approach.

Decide what you’re looking for, and what you’re not

Choosing type is an exercise in understanding your subject and interpreting its meaning in a visual form. To paraphrase Robert Bringhurst: typography exists to honor the subject. Arriving at an appropriate choice depends on balancing how a typeface feels with how it functions.

How it feels

What am I trying to reveal about the text or subject with my choice of typeface? Conversely, do I want to deliberately juxtapose meaning and visual form in order to achieve a particular effect? If I’m setting type for an article, I’ll read that article to understand its angle and the intentions of its author. If I’m looking for a typeface on which to base a logotype, I might start by discovering the principles that the individual or organisation holds itself to and use them as a basis for my choice.

If this project were a person, how would I describe them?

I’ll also note down a few adjectives to represent the characteristics my typeface should embody: for example charming, forthright, edgy. Often I’ll write a small user story-style description to illustrate how the adjectives are individually balanced.

Personifying seemingly abstract letterforms might feel strange at first, and you can’t guarantee that a typeface you perceive as charming, resolute or shrewd will be perceived the same way by others. But I find it to be a valuable exercise that triggers deeper thought about the validity of my creative direction and forces me to consider why I’m opting for a particular feel at all. Those adjectives become my guide – a small map to orientate me on my search – and force me to think twice before reaching for an old favorite or my latest shiny, new find. (Check out my other post to see how this helped me recently.)

Dig that alien typography
They Live, © 1988 Universal Studios

How it functions

A typeface that aligns well with a project’s values is useless if it can’t perform its intended function. So, what practical applications must the typeface fulfill, and in which contexts will it be used? Is this for longform content in a book or on a website, or headings on a poster? Does it need to support multiple languages, have OpenType features, old-style numerals or other advanced features that only a large character set can provide? Is it available in enough formats to cover the different media in which it’ll eventually be used?

If I’m setting a five letter logotype and the typeface will never be used again, I might be able to get away with a smaller character set or relatively poor kerning because I can work manually with the characters with such little text. But I’m not going to set a book in a face that hasn’t already proven it can excel in demanding conditions.

Consider classification

Should I look for a serif, sans serif, slab serif, script, ornamented, blackletter or calligraphic typeface? How will choosing one over another influence the interpretation of the subject, or the experience of reading the piece? How is the utility of the typeface affected by the characteristics of its classification?

When it comes to sub-classes, I tend not to limit my options by being too strict unless what I’m setting is very specifically linked to the period that particular sub-class first appeared. Typedia has a helpful list of classifications and sub-classifications.

Analyse anatomy

If you haven’t already, print out a type anatomy diagram and stick it on your wall.

Ligature, Loop & Stem’s type anatomy print, at home in our FreeAgent digs.

Knowing the anatomy of letterforms lets you ask how properties like stroke contrast, axis angle, x-height, aperture size, ascender and descender length, terminal size and calligraphic origin all affect the feel of a typeface. Knowing what affects the feel makes it easier to pinpoint why a particular face isn’t working.

Mechanical features and historical period are typically both important areas for consideration, too. For instance,will you want or need fractions, proportional numbers, discretionary ligatures or language support, and does the typeface offer these? Or, can the period from which the typeface originates – or takes influence from – be used to enhance meaning, or juxtapose it?

Become a collector

If you don’t already have a scrapbook of design inspiration, start one now. Keeping a diverse collection of type examples prevents reactionary choices and gives you a broader palette to base your decisions on. It’s not important that you know why or when you’ll use a particular typeface — only whether it resonates with you. If it does, grab it and tag it.

A peek at my personal type collection.

I’ve collected a lot of type examples over the years: handpainted shopfront lettering, old vehicle livery, rusty medicine tins, mid-century jazz record sleeves, B-movie title lettering, vintage car chromeography, street signage and even a few web fonts (crazy, right?). Immersing yourself in a broad range of type provides insight into how faces function in a range of contexts and how those contexts affect how they feel.

Of course, none of this is to say that there aren’t great places to find type online. It’s never been easier to dive so vertically into a particular style, classification or application. It’s incredible just how many genuine goldmines there are for browsing, filtering and creating lists to help narrow the field quicker. Here are a few I recommend:

• FFFFOUND, Friends of Type, designworklife, Fonts In Use, UnderConsideration, The Dieline, We Love Typography, but does it float, FormFiftyFive, ISO50, and Flickr for quick inspiration;
• the MyFonts and FontShop newsletters;
• MyFonts’ and Typekit’s attribute/classification searches, where I can quickly filter for faces that match my utility needs (for example: webfont support, language support, OpenType features, available characters and number of styles in a family);
• Webtype and FontFont both allow browsing by intended use; and
• Typekit’s curates lists, like Good for Longform and Formal Occasion;

Don’t just see it. Set it.

It’s easy to get caught up in the technical aspects of typography. But the truth is that choosing type is never a wholly rational, calculating exercise. Theory and principles are invaluable foundations, but becoming truly good depends on developing good instincts through practice.

If I want to figure out roughly how a typeface feels in short form, I find setting the word ‘hamburgevans’ a quick measure. These twelve letterforms can be repurposed to form the remainder of the alphabet and are often the first a type designer will create when beginning a new face.

Print outs help me evaluate my options and start the elimination process.

I usually print out my options and stick them on the wall to critique and whittle them down to the best two or three. Then I repeat the process, sometimes converting the fonts into vectors if I want to modify specific features before coming to a final decision.
 
Typography is subjective. It walks a fine line between art and science, and it’s up to you whether you follow or ignore best practices. There are never rules, only guidelines. Hopefully I’ve encouraged you to examine the nature of your projects a little differently, in order to help bring the right type into sharper focus.

For an example of how this approach plays out on an actual design project, mosey on over to my other post – Show & Tell: A Practical Look at Choosing Type.

A big thank you to our guest author Robbie Manson for writing today’s post. For more from him, check out his work and other articles, talks and tweets.

Guest authors are paid for their contribution, and all opinions are their own. If you’d like to write for the Typecast blog, get in touch with shelly dot wilson at typecast dot com

We’re surrounded by type from dawn till dusk, but it’s not often that you get the chance to see the history of the typefaces that shape our environment. Only a handful of people can say they’ve been within touching distance of the original drawings of design’s classic typefaces, and this is your chance to join those lucky few.

Revel in 100 years of type design

The Pencil to Pixel exhibit runs from 3–9 May at the Tribeca Skyline Studios in lower Manhattan, and curators have delved deep into Monotype’s vault to unveil typographic artefacts that span its 125 years in the field.

Eric Gill’s 1928 pencil and ink drawings for Gill Sans Italic

Men at work in the Monotype factory

You’ll be able to get up close to original artwork, examples of precision drafting, metal and film masters, historical photographs of their type designers at work, and the tools used to bring typefaces to life.

It’s a rare chance to learn about the birth of some of your favorite typefaces, follow type’s trajectory from inspiration to execution, and better appreciate the thought, care, and design craftsmanship that has gone into the typefaces we work with daily. 

“It’s an opportunity to see the hand of the author,” explains James Fooks-Bale, Monotype’s Director of Marketing. “A lot of designers are familiar with the [drop down] menu in Adobe but aren’t familiar with the fact that [all those typefaces] came from someone’s hand. In Salfords alone, at the original Monotype plant built in 1897, there were once 1,000 people at work designing typefaces. The precision engineering apprenticeships there were considered second only to Rolls Royce.”

“Big Red” – a compendium of Linotype faces published in 1939 and a showpiece of the Chauncey Griffith era

Exciting new additions

The exhibit first premiered in London last year. This New York incarnation will reprise many of the original exhibit’s objects but will also feature never before seen artefacts, including:

• phototype masters for the Haas Unica and Neue Helvetica typefaces;
• Eric Gill’s original drawings of the Joanna typeface; and
• the manuscript that inspired Adrian Frutiger’s typeface Linotype Didot.

They’ve also added some special items of American type heritage, including a copy of the 1931 Linotype magazine Typographic Sanity (which was published in Brooklyn) as well as original drawings of the Centaur typeface by American typographer and type designer Bruce Rogers.

“These artifacts are not simply for show,” explains Dan Rhatigan, Monotype’s UK Type Director. “They’re chosen and arranged to tell a story about how the design of typefaces is informed, constrained, and even enhanced by technology – whether it’s the technology of machine and molten lead or microprocessor and bitmap.”

Explore type on tech with the fellas of Typecast

Over in the pixel portion of the exhibit you’ll find us joining in the fun. David and Paul, our designer and director, will be there all week with our mini device lab to help celebrate web typography and show visitors how easy it is now to display beautiful type on modern devices. So make sure to say hello.

David (left) and Paul (right) will be there to talk type with you

Grab the controls yourself and see firsthand how classics like the Gill Sans and Helvetica typefaces translate to different platforms and operating systems.

Free tickets & guided tour

Admission is free and they’re even providing free guided tours, but you have to reserve a ticket. So grab some friends, book your tickets and make an afternoon of it. We hope to see you there!

Follow Pencil to Pixel on Twitter and join the conversation using #penciltopixel. You can also follow all the chat and the stream of live pics from attendees at their hashtag feed.

Type lovers know that all web fonts are not created equal. But more interestingly, being available on the web doesn’t necessarily mean they were made for the web, does it?

That’s right. Many of the typefaces currently available as web fonts were designed long before computers and electronic displays. Some were developed for an old printing process called letterpress, where type was pressed into paper and there was a slight ‘squeeze’ of ink. These typefaces (particularly those designed for book printing) look quite light in modern printing because of the lack of ink squeeze. When these typefaces are used on the web, their blocks of text can look pallid, spindly and hard to read. Details such as thin hairlines or serifs can become very faint and hinder readability. Since type is meant to be read, this difference matters a great deal.

What is it about the letterforms originally designed for print that can make some typefaces less suitable for use on the web?

Because of the lower resolution of a digital display compared to a printed surface, many design attributes can become visually detrimental. For example, tight spacing can become problematic at text sizes where letterform features may collide. Closely fit features (such as the opening of ‘e’ or ‘a’) can visually fill in, causing a disruption to the reader. Also, on screen, slight angles to stems may appear as an abrupt jagged edge rather than a graceful angle.

With some typefaces, finer anatomical features and flourishes can only be appreciated when set large.

That isn’t to say all the interest needs to be removed from a type design. There are features that may be subtle or disappear on screen until a very large size is used and enough pixels are available to represent the feature. A spur serif on the edge of an uppercase ‘G’ for instance.

When selecting typefaces for use at small sizes, what should we be looking for?

There has to be the expectation that any typeface design is going to be reduced to pixels and some distortion of the shape is inevitable. This will also vary from size to size: 12px will look quite different from 15px and obviously very different at 32px. Every typeface will have its own sweet spots – indeed each type of digital display will have sweet spots – so it’s useful to have a palette of typefaces to work with.

Typefaces with generously proportioned lowercase characters work better for body copy. Set at the same pixel size, it’s easy to see the smaller x-height of Dante (left) versus its more generous cousin Dante eText (right).

The hallmarks of a good body font are the same as one would look for in print: even color, regular spacing and slightly open. The two most noticeable things in text are texture and color. By texture, I mean how smooth, agitated, spiky, fluid, angular, calm or energetic a paragraph of text looks visually. The typeface that meets the designer’s vision of texture and color for his or her design is the right one to choose. 

Are there certain classifications to stay away from when searching for body fonts?

There are many to stay away from IF your desire is to set 16px text. For example, most classic text faces – from the Adobe Garamond to Times New Roman typefaces – need to be set at 22px or larger to be readable. And even then, their hairlines are often too delicate and brittle looking.

Where do you stand on the whole serifs/sans serifs for body text debate? Is one preferable for readability and legibility, or is it a bunch of hooey?

There are many factors beyond whether a typeface has serifs or not. For example, if the resolution of the screen is very poor, a sans serif type will suffer the least distortion when drawn as pixels. This is one thing that has fueled the ‘sans serifs are best for screen’ advice of the past. However, increased screen resolutions and anti-alias displays have made much of that advice moot. Most critical to web page readability is the interplay of variables such as line-length, line-height, typeface style and size.

Can you briefly explain the difference between readability and legibility?

There is a running dispute about these terms. Readability, for me, is how you feel reading the typeface: fatigued, engaged, oblivious to the flow of the text or distracted by unusual features or distortions in the design. Legibility is something more measurable – how fast the text can be read without error. Other typographers may define these terms differently.

Last week, your team released its eText collection of typefaces on Fonts.com, which are specially redesigned to perform well at small text sizes. How did the project come about?

For me, the impetus was the original iPad and the iBooks application. When I saw that the old print version of the Monotype Baskerville typeface was chosen for reading on a very bright LCD screen, and how terrible it was to read, I was driven to fix the problem. Our new Baskerville eText typeface (or BaskervilleE for short) is the result of that first interaction with the iPad. In tandem, I worked on SabonE as a contrasting design that would illustrate that good ebook typography was possible, if the right tools were provided to designers. 

From there, we expanded the selection, choosing from a wide range of genres to give the digital designer a palette to work from. The AmasisE, ITC GilliardE, MalabarE, Monotype BaskervilleE, Neue HelveticaE, PalatinoE, PMN CaeciliaE, SabonE and YsobelE typefaces are the first nine we’ve released, and more are in the works.

What are the challenges of re-designing an existing typeface?

The biggest challenge is determining what defining features of the original to keep and which can be changed or removed. The idea is to keep the new design an unmistakable member of the original family. For instance, we’ve redrawn BaskervilleE to be a ‘cousin’ to the current version of Monotype Baskerville that was originally designed for print. It retains the baroque characteristics of the original, yet has adaptations which make it read better on screen.

Monotype Baskerville beside the new BaskervilleE from Fonts.com

What sort of changes did you make to these typefaces?

The first thing we addressed was the proportion of lowercase to uppercase height. Our eText typefaces have been designed with relatively large lowercase heights. That is, the proportion of lowercase height to cap height is a little bit exaggerated in order to have more pixels available to build lowercase letters. At the same time, consideration was made not to make them too large and inelegant.

Secondly, we had to consider the darkness of text. The original versions were all too light for screen and, therefore, needed to be darkened. But this took care, because we didn’t want to make all the typefaces in the collection the same color and dilute the variety of the design palette.

Beyond these, each typeface had its own considerations of spacing, apertures to enlarge (to prevent them from blurring shut on screen) and unique quirks to tend to. Also, those that previously existed as web fonts required more technology (called hinting and edge tuning) to perform better on today’s variety of digital displays.

What surprises arose during the redesigns?

I had hoped to create a good screen version of the Bembo Book typeface, a beautiful and very popular design for book publishing. I was unhappy with my attempts to reconcile some of its unique qualities in the screen version and decided not to release it until it was really working well. One particular characteristic is the lowercase ‘n’, which has a slight bow in the right stem – as opposed to a straight side. Finding a workable solution would have delayed the general release so I’ll get back to it in the future.

What sizes are these typefaces best suited for?

12 pixels is the lower limit in these typefaces. Below that size, a humanist sans serif is the best choice for legibility in pretty much any situation – something like the Verdana and Frutiger typefaces, which are essentially the skeletons of book typefaces and have open shapes that are easiest to read. By the time you reach sizes in the upper 30px range the eText typefaces, while still useful, they could be replaced by their print cousins for a more delicate touch.

Futura contrasts well with YsobelE’s upright posture

Which typefaces would you suggest pairing with the eText collection?

Since most of these are serif typefaces, their best mates would either be their previous web versions set at large sizes, or sans serifs. When combining serif and sans serif typefaces, it’s important to consider the genres. A monoline geometric sans serif like the Futura typeface would not work well with BaskervilleE’s high contrast stems or our GalliardE typeface’s calligraphic stress. But it would work with YsobelE’s upright posture. A grotesque sans serif like the Neue Haas Grotesque typeface would be a good companion for BaskervilleE. Humanist sans serifs like the Syntax or Frutiger families would be well suited for GalliardE and our SabonE typefaces.

Do these new eText versions replace their previous web versions, or do those still serve a useful purpose for designers?

All the original designs are still useful for larger sizes – they’re more delicate and refined looking in display. When typefaces were made for beautiful letterpress book printing, each progressive size of metal type had gradations of thick-thin contrast. The smallest text sizes had large lowercase heights and looser spacing. Display sizes were cut with fine hairlines and had tighter spacing. So it would be quite reasonable to use the original Monotype Baskerville for 32px and larger as a companion to our BaskervilleE in text.

You can experiment with all nine new eText typefaces in our Typecast app.

Sign in   to have a go, or start a 14-day trial.

Thanks go to Eben Sorkin for the picture of Steve.

Another big win for a more readable web! Monotype has just released nine new typeface families on Fonts.com. Adapted from pre-existing designs, each has been painstakingly modified to perform better at small sizes. And not just on the web ... in all digital publishing environments – ebooks, mobile applications, and digital pubs.

“Reading on screen is simply a fact of life for most of us today,” says Steve Matteson Creative Type Director at Monotype. “And for consumer devices to serve us best, the text needs to be easy and enjoyable to read no matter what screen you’re using.”

The collection

This inaugural set not only includes redesigned classic favorites, like the Baskerville, Galliard, and Sabon typefaces (which were originally designed for print and later made available on the web) but also newer designs such as Malabar and Ysobel, which were born in the screen era.

Subtle, but powerful, improvements

These rebooted typefaces have been specially crafted to display clearly on the full range of reading devices – even E Ink® screens. Improvements include richer contrast, even color, and slightly taller lowercase characters.

Lowercase characters are now taller, and hairline features and serifs are heavier.

They’ve increased the spacing between characters so they don’t appear to collide when set small.

Counters of letters like ‘a’, ‘e’, ‘b’ and ‘g’ are now more open to help maintain character shape and legibility.

The ratio of thick to thin strokes were adjusted.

If you’re a firm favorite of the original designs, fear not. Despite the modifications, each face in the collection still closely resembles its predecessor and retains that family feel. The new typefaces also include advance features, like small caps and old style figures, to support typographic precision and flexibility.

Technological tweaks and integration options

In addition, they’ve hand-hinted every typeface in the collection and used Monotype’s Edge tuning technology to create smoother, sharper curved and angled contours on each character. This means less blurring and more readable text, no matter the platform, format or device.

Not only is the eText series perfect for your web designs, but they can also be:

• bundled within the source code of an e-book or digital publication title, ensuring that readers will experience the design, branding and layout you intended; and
• embedded in devices for use as system fonts, which can then be custom-tuned for optimal display and performance.

Give them a go in Typecast

If you’re a Typecast subscriber, you can experiment with all nine tof these super-useful typefaces straight away. Just type ‘eText’ in the fonts menu to pull up the collection and try them out on real copy. There are also some great pairing suggestions, as well as general tips for picking body fonts, in our Q&A with Steve.

Not only can you experiment with them straight away in our Typecast app, you can use any of them for free on your websites thanks to your complimentary Fonts.com account. To license them for ebook use, just contact Alan dot Tam at monotype dot com. He’ll sort you out.

Sign in Now   to try them out and create sharp paragraphs readers will appreciate.

My teammate and I are developing a platform called Woopie to help people do just this – publish to the web, eReaders, mobile and tablet in lots of different formats. In this article, I’d like to share some insights into how to design and work with type for (responsive) web, ePub and mobi – for devices with browsers as well as to eReaders. While there is some crossover, not all readers are created equal, so there are plenty of fallbacks and enhancements to consider.

Choose your weapon: replica, responsive or customized pubs?

There are a few options for publishing magazine-style content for devices at the moment. The most popular tools create so-called ‘replica’ editions. They take a file designed for print (typically a PDF) and wrap a reading container around it. This can be a page-flipping tool (for the web) or an app (for tablets). These tools usually allow you to overlay links, video, image pop-ups, etc., but they have their limitations.

Perhaps the biggest is that you are taking something designed for one particular format and shoehorning it into an entirely different way of reading. You’re wedging the fixed size, layout and reading conventions of print into the infinite canvases of the web, where reading conventions are constantly evolving. As a result, replica editions create issues like:

• scrolling up and down excessively to read columns of very short text-length;
• pinching and zooming to read 10pt text on a mobile;
• text being illegible on a Kindle; and
• enormous file sizes. (Many replica editions are just picture of pages, not real text, and screen readers don’t handle this load well at all).

Plus, replica editions are tied to a particular app or platform, so you’ll need to create another version if you want that content available for web browsers.

An alternative and much smarter approach is the responsive web design route, particularly if you are creating something that will only appear in digital format. This gives you much more control over design specifics across multiple sizes, meaning you can create a much better reading experience. There’s also a file-size and accessibility benefit. The downside? You’ll need to develop apps and/or ePub versions if you want people to be able to consume that content offline on an eReader or download it from Newsstand.

Developing many different versions of the same content from scratch for many different platforms is incredibly time-consuming, which is why I like to use a third, hybrid, approach. This lets me:

• create multiple versions for different devices without having to start each from square one;
• send my content to a web view, custom app, and other formats; and
• harness the native features of devices, yet still be responsive and web friendly.

Here are some lessons I’ve learned along the way.

Remember the stack

When creating for multiple devices and platforms, you give up control over how things can appear and embrace the uncertainty of it all to give your readers a better product. The only constant will be your words, so a strong editorial hand and consistent tone-of-voice will help define consistency where branding cannot.

Typecast’s side-by-side template is handy for testing fonts. The left container uses Typekit fonts for anyone using web browsers to access the content. The right one uses fonts I know are native to iOS for those using iBooks.

Web fonts and tools like Typecast are fantastic at giving us more choice in our typography and helping us use type to convey personality and brand. When using them, however, it’s important to remember your stack. Research the devices you are pushing to to see if they support the fonts you are using, and if they can’t, try to find similar fonts that are built in to the device. Typecast is a great tool for this because I can test and compare web fonts side by side right in the browser.

Know which fonts are supported on the platforms you want to publish to.

iOS has a reasonable range of typefaces (and you can embed fonts for iBooks, though make sure you have a licence). Android is pretty poor, and for Kindle there’s not much you can do. Some Kindles let folks use publisher-defined fonts, but most people will just leave it as native. Jordan Moore (former Typecast designer and now emerging responsive web expert) has a great list of fonts and compatibility on his site.

Take extra care when embedding fonts

Don’t forget you might also be publishing an off-line version, so hosted web fonts won’t be served either. If you choose to use embedded fonts with @font-face, first check the licensing to make sure it’s allowed, and next – test, test, test.

You can use @font-face with pretty much every modern browser and some devices that use ePub formats (for example iBooks on iPad and the more recent Nooks), but you really need the devices on hand to make sure they display in the first place and actually work well. You can use .ttf, .otf, and .woff in some cases, but here are a few things to watch out for:

• Case Sensitivity – Browsers are pretty lenient on us, but ePub (as a format) is a total jobsworth. Make sure your filenames and references to them in the CSS are the same case.
• Paths – Double check your paths to make sure they are correct. I keep my CSS, fonts, and HTML in separate folders on the same level for ePub, so the path for fonts from CSS is: src: url(”../fonts/fontname/fontname-webfont.eot”).
• Sizing – Using pixel sizing for font-sizes and line-heights can sometimes cause conflicts with font-resizing in ePub. If you have problems with text sizing and line-heights (especially when increasing text size on the device) try using em units instead of px, with 1em for body copy, em units for headings, and unitless line-heights.
• Extras for iBooks – iBooks need a special meta-file to make it use embedded fonts, called META-INF/com.apple.ibooks.display-options.xml

Learn to love progressive enhancement

We’ve all been through the mill when it comes to cross-browser testing. I still have nightmares about Netscape 4 and IE 5.2 (just for the Mac). Well, bad news – ePub and mobi are probably worse when it comes to compatibility. For example, not every device will respect rules, margins, borders, padding and font-styling, either because they can’t display them at all or because they don’t like your syntax or shorthand. This is mainly because vendors make their own versions of standards.

Progressive enhancement is your friend here. Build up your design stylings, but be aware they won’t translate to everything. Baldur Bjarnason’s epub feature grid is good for seeing which devices and formats can render certain features, and here’s another just for Kindle Fire.

Three stylesheets for three levels of capability

Here’s how I’ve been tackling the issue of designing for a wide range of devices, from an iPhone that can play streaming video to a Kindle with a black and white screen. Rather than start from scratch, I start with an HTML version. When I’m done, I “fork” my content into different versions for epub and exporting to apps.

First off, I make a distinction between old-school .mobi (that’s your black-and-white Kindles and Nooks) and group web and epub together. Then I split my CSS for web and epub in two: a base version for both, and a version with media-queries for the web. An easy way to achieve this is to have individual container templates for web and the different epub formats:

• kindle.css –This is a baseline formatting CSS. It uses percentages for font-sizes and margins, and ems for line-height. Think of it like a normalizing CSS file.
• epub.css – This has all my styling except media-queries. It sets fonts, font-sizing, line-heights, borders, margins, padding, etc. All the styles you would have normally for a web page if you weren’t being responsive. I leave out things that don’t work well for ePub (for example changing the page background color – remember this is something that color eReaders allow users to override easily, so leave it white.) If this ends up looking like a styled version of Safari’s reader view – or Instapaper with your fonts, colors and styling – then you’re on the right track.
• web.css – This has all my styles including media-queries. I also add in anything I want to change in the normal (whatever that is) web view that I can’t do on ePub. This would be stuff like floating elements,  pull-quotes and images, or adding color behind headings.

How do I do this? Sass (or LESS) is perfect, as it lets you create partial CSS files. For starters, making media-queries an extra file is a good way to reduced your design workload.

Then I just drop my content into them when I’m ready to export, with a few scripts and regexes to fix the content for each version’s requirements and quirks.

Avoid these gotchas

Here are some things that had me pulling my hair out. Hopefully I can save you some time and stress!

Missing media

Make sure you have a fallback for all your multimedia content, whether it’s a placeholder image or a link where they can go and view it later on another device.

Styles not displaying

• In flowing ePubs, backgrounds usually won’t fill the whole page, so don’t use dark backgrounds. Keep it white.
• Link colours will get overridden in iBooks. You can override that by recoloring the text like so: -webkit-text-fill-color: #00f;
• Borders seem to work in most devices, but don’t rely on them. For .mobi (old school) you can use 
tags as rules, but use sparingly.
• Sometimes a device’s default style will override your styles, so stick a class on styles to be more explicit.

Background colors on ePubs (left) won’t always fill the whole page like they do in the browser (right).

Unexpected spacings

• eReaders have big margins and the user can change them, so be aware of your text sizing, in particular how large you make your headings. Try not to have too large a ratio between body text and headings.
• Use page-break-avoid to try and keep related content (for example figures and captions) on the same page. In fact, your first stop for formatting help should be Liz Castro’s blog.

  Bad directions

  Don’t refer to things like pull-quotes and images as being “to the left” or “above right” within your content, as in eReaders they can be positioned in a single column. Use figure references and captions instead. For example, “Blah blah blah [see fig 1]” is better than “See the box on the right”.

  If you’re feeling fancy you could always use media-queries like content:after and some empty spans to get around this, but that might be showing off.

  Testing on multiple devices

  Where possible, test with real devices. Emulators and viewer apps are okay but can be pretty buggy. I like to test with Edge Inspect for testing across devices and Epubcheck for validating my ePubs. Dropbox is the easiest way to get files onto tablets, and Kindle Previewer is good because it converts to mobi for you and shows you a preview. However, it can lie, so test on your devices too.

  Creating a publication and making it available to lots of people and devices can be very challenging but very rewarding. It gives you a much wider marketplace to sell your content, and it also gives your readers much more choice about how they consume it. If you try it yourself and find yourself stuck, just ping me @irishstu

  We’d like to thank our guest author Stewart Curry for writing today’s post. For more from him, check out his blog.

  Guest authors are paid for their contribution, and all opinions are their own. If you’d like to write for the Typecast blog, get in touch with shelly dot wilson at typecast dot com

  
  

  ]]> Typecast News 2013-03-26T09:04+00:00 http://typecast.com/blog/designing-for-a-responsive-web-means-starting-with-type-first/?utm_medium=rss http://typecast.com/blog/designing-for-a-responsive-web-means-starting-with-type-first/?utm_medium=rss#When:12:27Z
  How can you know where a design breaks is if you haven’t settled on the font, its size, height and measure? By designing type-first, of course.
  ]]>

  The pervasiveness of mobile devices today means audiences want to consume content on whichever browser or device they prefer. As a result, web designers and publishers have rallied behind the idea of responsive design to reach the widest possible audience and promise the reader a great experience no matter what their screen size. But in our rush to make sites work well across a plethora of mobile devices, tablets and desktops, many of us have overlooked a crucial concept: we should be designing for the reader, not the device.

  We must remember that the web is fundamentally a textual medium. People use it to read content and complete tasks. Remove the text from almost any popular site and it becomes impossible to use. This means those differences in screen size, device resolution or text rendering don’t matter in and of themselves, but only because they influence how someone will read our content.

  That’s why it’s time to change our web design process—to make this user priority our design priority. Designing for a responsive web must now mean starting with type first.

  The brand is the type

  Ensuring that content is readable, accessible and attractive regardless of the technology used has long been the role of typography. But type is everywhere, so we take it for granted. We forget exactly how much of a brand’s identity is rolled up in the typography. While a brand’s personality starts with its people, its primary expression is through the language it uses to deliver its messages. And that language is delivered through the type. The two are inextricably linked.

  

  From its logotype to its films’ iconic opening crawl, typography has always defined the Star Wars brand. They’ve continued this on the web by using the Antenna typeface by Webtype.

  A great message can be undermined by poorly chosen or poorly set type, just as a beautifully scripted monologue can seem trite if performed by a mumbling, bumbling, talentless actor. Typography carries the literal message, and its legibility and readability impacts not just the audience’s understanding of the content but how easy it is for them to hear the brand’s personality.

  

  Edenspiekermann’s brand aesthetic for Redbull Music Academy Radio was built around web typography. On small devices and native apps, it’s the type that carries the brand.

  Typography’s role in imparting the implied message is just as profound, and we can see its impact most clearly on mobile devices. Here, the design is often stripped back to its simplest form. Gone are the graphics, gradients and pixel-perfect details. It is the aesthetic personality of the type and the colour palette that influences our emotional response as readers and defines the experience.

  With so much responsibility resting on the shoulders of type, why would we ever allow it to be the last thing we focus on?

  Design for the reader, not the device

  Many of us approach a responsive design project by thinking about how the layout will adapt from one screen size to another using a technique known as a fluid grid. Borrowed from graphic design, grids have traditionally been used to divide up a canvas of known proportions into smaller units. They help establish uniformity and aesthetic harmony throughout a design.

  But on the web, we’re designing for a medium that doesn’t have fixed dimensions. Resizing a layout using an arbitrary grid system no longer makes sense.

  Designer Chris Armstrong recently published an article on the “infinite grid”. In it, he argues that grids exist to hold content, and it is from the proportions of our content that we should design our grids.

  Given that most of that content is text, our grid proportions should be based on type. After all, how can you know where a design break is if you haven’t settled on the font, its size, height and measure?

  Seeing type in the browser for better, faster decision-making

  Now is the perfect time to set things right, flip the responsive design process, and put type first. Web designers are already embarking on a wholesale transformation of their design process. Where we once drew beautiful pictures of websites in Photoshop or other design software, we’ve come to realise that flat images are no longer the definitive deliverable. It is simply impractical to produce mockups for how every piece of content will look on every potential device.

  Driven by the need to test design decisions across devices and platforms their audience use, designers are prototyping working websites earlier in the process. The emphasis is on seeing a design in the medium where it will be published, then adapting as necessary.

  Our ability to work with type on the web has also improved dramatically. Until recently, you could only see your web type live at the end of the design process, when your developer began the HTML prototype. Web designers were stuck using system fonts or images of web fonts to approximate the web typography they hoped would materialise at the end of the project ­—only to watch those designs unravel during the development process.

  

  Condé Nast designed a beautiful palette of web fonts for Vogue UK by using Typecast to experiment with type in the browser from the very beginning of the process.

  But today, new typography design tools like Typecast and the widespread availability of web fonts allow us to create our web typography earlier, faster and better than ever before.

  Online services like Fonts.com, Typekit and Google Web Fonts offer designers affordable access to a huge range of typefaces. As a result, new websites rarely stick to system fonts like Arial, Verdana and Times New Roman. Instead, you’re more likely to see classics like the Helvetica family or contemporary works like the Harriet Series from Okay Type.

  Seeing type in the browser at the start of the design process lets us test how the strokes, counters and size of individual characters feel when applied to groups of letters—even using real client content if we want. We’re able to discover and test how fonts render across browsers and platforms before creating colour palettes, thinking about layout, constructing wireframes, before the prototype is built and definitely before committing to final type decisions.
  

  How to stop screens being “just like bad paper”

  Designing for our readers requires us to understand the information that they will find useful and relevant and then shape that content into a beautiful experience. Dealing with the challenges posed by different media is something designers are well-versed in. As Erik Spiekermann said, “screens are just like bad paper”.

  By putting type first, we do both. We can be assured of readable content that imparts the brand personality, and from this position of strength we can then make informed decisions about design augmentation that allow us to offer responsive experiences that honour the most fundamental element of all sites: the type.

  We first published this article on Wired UK on 19 March.

  ]]> Typecast News 2013-03-20T12:27+00:00 http://typecast.com/blog/vote-typecast-for-game-changer-of-the-year/?utm_medium=rss http://typecast.com/blog/vote-typecast-for-game-changer-of-the-year/?utm_medium=rss#When:10:19Z
  Put web typography in 1st Place at this year’s .Net Awards.
  ]]>

  
  

  New to Typecast? See what makes us awesome.

  We’re stoked to be nominated for TWO awards in this year’s .Net Awards. And what great categories to be in.

  Our Director Paul McKeever is up for New Entrepreneur of the Year, which recognizes folks who’ve had “a great business idea that has made an impact on the industry”, and Typecast is up for Game Changer of the Year, which gives props to the tools and projects that “really helped the industry and the community move forward”.

  That’s exactly why we started Typecast, to make working with web fonts easier for everyone, improve the way we work as designers, and in turn, make the web a more beautiful place.

  But these nominations are just the first hurdle. We can’t make the next cut unless you vote.

  So get your finger out and Vote Now

  And please Tweet the News to help us get more votes.

  Remember, a vote for Typecast is a vote for putting type first!
  

  ]]> Typecast News 2013-03-07T10:19+00:00 http://typecast.com/blog/happy-launch-day-to-us/?utm_medium=rss http://typecast.com/blog/happy-launch-day-to-us/?utm_medium=rss#When:09:13Z We’re setting out our stall and entering the competitive fray.
  
  ]]>
  Yes! We’ve finally done it. After 1½ years in private and public betas, we’re casting our floaties aside and leaving the kiddie pool to join those cool, big kids splashing in the deep end.

  We’re really proud to be bringing the web design community a tool that helps teams save time and create better quality web typography. We still have a long list of ideas and upgrades to make the app even better, but we’re confident that it’s now ready to compete with the other commercial products out there. After all, if agencies like Happy Cog, Condé Nast, EdenSpiekermann and Threespot are finding it useful on their client work, we must be on the right track.

  A bundled bargain of web font fabulousness

  Going commercial means we’re no longer a free product. But there’s good news too! Now when you sign up for our Typecast™ design app, not only will you get a super-useful tool that helps you experiment effortlessly in the browser and build up detailed type systems in minutes, but you’ll also get a Standard Fonts.com® plan worth $10/month FREE. That’s 20,000 web fonts to use on your live sites! Choose timeless classics such as the Trade Gothic®, Avenir® and ITC Avant Garde Gothic® families as well as cutting-edge designs and hand-tuned fonts.

  Easier font export

  Even more exciting is how convenient our bundle makes project export. Because we set up your Fonts.com® plan, it’s linked to your Typecast™ account. (If you’re already with Fonts.com®, we can link to that account too). Whenever you design with their web fonts and are ready to start prototyping, our magic embed code will make life easy. Just tell us what domains you want those fonts to appear on. We’ll set them up for you, add them to your embed code, and Fonts.com® will serve them up. No muss, no fuss, and no repetitive gathering of fonts on their site. So you get web design goodness for designers, and a leg up at build for developers, all in one plan. 

  Plans starting at just $29/month

  You can pick from four subscription levels, each with monthly, yearly and tri-yearly billing options. Prices start at $29 per month for an individual plan. Plus, our 14-day free trial gives you a chance to try before you buy. Go on, come explore the app, get your hands dirty and see what it can do for you.
  

  What about our other font providers?

  While we can’t give away their fonts for free, like we are with Fonts.com®, you can still design with all of them in our app. That’s web fonts from the full Typekit®, Webtype® and Google® Web Fonts libraries, plus Fontdeck® typefaces all at your fingertips.

  A word of thanks to our beta friends

  Finally, we’d like to thank every one of the 20,000+ designers and developers who joined our beta over the past 18 months, gave it a proper bash, and shared their issues, concerns, and ideas with us. We were privileged to have such passionate and creative people using the app who cared enough to be honest about what was working for them, and what wasn’t. You helped us create a tool people value, and to honor that, we’ll keep working to make it even better for you.

  We’re really excited to be able to share our Typecast™ design tool with the world and hope type lovers everywhere will give us a go.

  Start your free trial now

  ]]> Typecast News 2013-01-30T09:13+00:00 http://typecast.com/blog/typecast-makes-the-top-20-of-2012/?utm_medium=rss http://typecast.com/blog/typecast-makes-the-top-20-of-2012/?utm_medium=rss#When:12:59Z .Net just named Typecast to its Top 20 list for 2012. Get in!
  
  ]]>

  Everyone likes a little recognition for a job well done, so we were pretty pleased this afternoon to hear that we’ve been named in .Net Magazine’s 20 Best New Web Design and Development Tools of 2012. It’s terrific to read comments like this:

  The interface is so intuitive you’ll be knocking out new page concepts in no time. There’s no doubt this is a great way to experiment with type on the web, and the results speak for themselves.

  We genuinely believe that experimentation is essential to great web typography – whether you’re a type nut or a type novice. That process of exploration, comparison, and trial and error is vital and valuable because it builds awareness, understanding and expertise. Plus, it’s just fun.

  
  We’re proud that Typecast is helping designers do this quickly and easily right in the browser with real text.

  2012 has been an exciting year and the app has improved so much thanks to the team’s hard work and lots of super-useful input from the designers who use it. So if we’re in the top 20, then all of you on our beta put us there, and we thank you!

  Watch our creative director Jamie show you how Typecast can improve your design process.

  Try it now to see what all the hype is about.

  Sign in to your account to explore the wonders of web type.

  ]]> Typecast News 2012-12-12T12:59+00:00 http://typecast.com/blog/meet-our-newest-partner-webtype/?utm_medium=rss http://typecast.com/blog/meet-our-newest-partner-webtype/?utm_medium=rss#When:16:00Z Fantastic news! Now you can try out the wonderful fonts from Webtype in Typecast. Come see.
  
  ]]>

  Great news. We’re thrilled to announce that we have a new friend – and it’s one who’s generous with their goodies. The wonderful Webtype, purveyor of tantalizing typefaces like Benton Sans, Interstate and Perpetua is now an official font partner of Typecast!

  It’s easy to love Webtype because they offer consistently readable, beautiful typefaces for the web from foundries like Carter & Cone, The Font Bureau, Monotype and Okay Type. Just look at these stunners:

  

  Salvo Sans and Salvo Serif are Webtype’s most extensive family, with 60 styles to choose from.

  

  Tangier is a Spencerian script designed for display. Its large x-height makes it a dream on screen.

  

  Turnip comes in 16 styles, including a special variation (Turnip RE) for use at small sizes.

  We’ve already added 68 typeface families to the app, giving you 479 individual fonts to explore, and we’ll have the rest of the Webtype library in next week. To have a look, just open the fonts menu and click the Webtype filter.

  Webtype in the wild

  Founded as a collaboration between designers David Berlow, Sam Berlow, Roger Black and Petr van Blokland, Webtype focuses solely on typefaces for the screen and is known for the care they put into both designing type and selecting fonts for their collections.

  

  The Daily Drop Cap uses Bulmer, Perpetua, and Perpetua Titling beautifully.

  Their typefaces feature on the sites of those who know design and are passionate about type, like The Daily Drop Cap by lettering lovely Jessica Hische, AIGA, Type@Cooper, and We Will Be Close by typeface designer Jesse Ragan.

  

  Ford’s site features Antenna.

  They’re also used by some of the biggest brands in the world, including Ford, Star Wars, and The Boston Globe.

  Quality at all scales

  
  Webtype’s exclusive focus on screen typography means you get crisp rendering on all displays and operating systems. And to help you make sure your type looks great, Webtype recommends a size range for each font on their site.

  
  If it’s body fonts you need, definitely try out their super-useful Reading Edge series – a set of eight typefaces that have been specially designed for text at 9–14px. They offer suggestions on how to pair the typefaces with larger web fonts, and the series corresponds to existing typefaces in the Font Bureau’s print and web libraries to help you implement brand consistency across various media.

  

  Turnip RE is one of eight Reading Edge typefaces you can experiment with in Typecast.

  To make them easy to spot in the fonts menu, all Reading Edge typeface names end in ‘RE’ (for example Turnip RE).

  Webtype also offers numerous large type series with multiple weights and widths so you can design rich reading experiences with great contrast using just one or two typefaces. All of these families give you at least 15 styles to work with:

  • Salvo Sans
  • Salvo Serif
  • Escrow
  • Interstate
  • Benton Modern Display
  • Rocky
  • Benton Sans
  • Antenna
  • Amplitude
  • Agenda
  • Alright Sans
  • Georgia Pro
  • Verdana Pro.

  Try before you buy

  Webtype lets you try their fonts on your site for free for 30 days, which is great (see, told you they were generous). But now that they’re also here in Typecast, you can pair, compare and test them quickly and conveniently before you even start your prototype – on real content, side-by-side and in the browser.

  “Partnering with Typecast is a great way to extend our free service,” says Sam Berlow, General Manager of Webtype. “We’re really excited to give designers an even more flexible way to test our typefaces.”

  We’re delighted to bring you these beautiful fonts from Webtype. It’s just one more reason to love using Typecast.

  Sign in now and explore what Webtype has to offer.

  Or if you don’t have a Typecast account yet, try it now. It’s free while in beta!

  ]]> Typecast News 2012-12-10T16:00+00:00 http://typecast.com/blog/our-first-contest-winners/?utm_medium=rss http://typecast.com/blog/our-first-contest-winners/?utm_medium=rss#When:10:21Z What a terrific response to our typography contest. Come see the winning rebounds!
  
  ]]> It gives us great pleasure to announce the winners of our first-ever typography contest. We’re pleased that so many of you on the beta gave it a go. We received over 40 rebounds, giving the judges plenty to admire and explore. And man you didn’t make it easy on them! There were lots of really lovely designs. And just as exciting ... we got to discover and admire loads of web fonts, and so can you.

  So without further ado, here are the winners!

  Best Overall Design Awards

  Congratulations go to Andrew Lohman, Andrew Austin, and Cole Henley for impressing our three prestigious judges with these beautiful designs.

  

  Andrew Lohman wins Best Overall for Wilson Miner’s quote. Nice, isn’t it? Andrew used Corner Store, Hellenic Wide and Prenton Condensed in his design. See his live design or congratulate him on Dribbble.

  
  

  Andrew Austin wins Best Overall for Liz Danzico’s quote. He used FF Yoga and FF Yoga Sans in this creation. See his live design and leave him a message on Dribbble.

  

  Cole Henley wins Best Overall for Tim Brown’s quote. He opted for FF Dax, Kegger US, FF Prater Script and JBT Annabelle. Make sure to hover ‘resonate’ in his live version and give him a pat on the back on Dribbble.

  Most Grinworthy

  Well done to Jake Giltsoff for making us all smile with this clever rebound.
  
  

  Jake combine Source Sans with Garamond. Check out the clever action on ‘type’ on his live version and add your kudos to his Dribbble thread.

  Best Use of Color

  The judges selected Katerina Skotalova’s rebound for this prize.
  

  Katerina’s design features Acta Display and Acta Poster Swashes. Go see her live design and congratulate her on Dribbble.

  How’d They Do That? Award

  Well done to Mike Heys for impressing our judges with his CSS smarts.
  

  Mike went with LTC Bodoni 175, FF Meta Serif, Alternate Gothic No. 1, and Bello Pro. Check out his live design to see the CSS magic that won him the prize and send him a big ‘Well Done’ on Dribbble.

  A big congratulations to all of our winners, and a huge thanks to everyone who took part and contributed to the fun. We’d also like to thank our three judges (Elliot Jay Stocks, Trent Walton, and Tim Brown) for volunteering their time and selecting our winners! Cheers fellas!

  ]]> Typecast News 2012-11-20T10:21+00:00 http://typecast.com/blog/celebrating-build-in-belfast/?utm_medium=rss http://typecast.com/blog/celebrating-build-in-belfast/?utm_medium=rss#When:09:50Z To celebrate our hometown design conference Build, we’ve planned a few festive activities around the event.
  
  ]]> Build is a terrific week-long design conference held right here in our hometown of Belfast. Full of design films, eclectic and inspiring fringe events, and a cracker line-up of speakers, it’s a bright spot in the autumn calendar that attracts 300 designers to our little corner of the UK each year. We’ve sponsored the conference before, but this time we’re stepping things up to celebrate our public beta launch.

  Typecast typography contest

  This year, we wanted to contribute something fun for attendees to work on as part of their practical day. So this morning we launched a little typography contest on Dribbble. The great thing is, ANYONE with a Dribbble account can take part, even if you’re not attending Build. We’ve pulled together some nice prizes, and it’s fun way to put Typecast and those typography skills to use! If you don’t have a Typecast account yet, you can start one for free.

  

  Just pick one of three quotes we selected from former Build talks and then release your inner type nerd. When you’re happy with your design, post it to the relevant Dribbble shot:

  • the Wilson Miner quote;
  • the Liz Danzico quote; or
  • the Tim Brown quote.

  The contest closes on Friday 16 November at 5pm GMT. That’s when our esteemed volunteer judges, Elliot Jay Stocks, Trent Walton and Tim Brown, will start scouring through your awesomeness to select the best of the bunches. We hope to contact all the winners on Monday the 19th.

  Awards and prizes

  We’ve got a total of 6 awards on offer with some pretty nifty prizes up for grabs:

  Overall Best in Category
  One design in each category will get this award. Create a stand-out design that just ‘works’ and win:

  • a 1-year single-user account with Typecast when we launch publicly;
  • a Dribbble Pro account; and
  • a hard copy 4th edition of Robert Bringhurst’s typography bible: Elements of Typographic Style.

  In addition, judges will look at all three sets of submissions collectively and award three more prizes:

  Most Grinworthy
  Make the judges smile and win:

  • a Typestache poster.

  Best Use of Color
  Create beautiful chromatic combos and win:

  • a 3-issue subscription to The Manual.

  How’d They Do That?
  Impress the judges with your CSS saavy and win:

  • the complete A Book Apart e-book library.

  Official rules

  • Anyone may participate, not just Typecast users or Build attendees. So tell your friends.
  • To enter the competition, you must post your design to Dribbble in the correct shot: Wilson’s quote, Liz’s quote or Tim’s quote.
  • You must design with web fonts and in your post include a link to a live HTML and CSS example of your rebound.
  • Rebounds may include imagery, but submissions will be judged mainly on their use of type.
  • You may use Typecast to create your design, but this isn’t mandatory.
  • You may enter as many rebounds of a single quote as you like. You may also enter rebounds for more than one of the quotes.

  Get ready to paartaaay

  
  Attending the conference? Then make sure to stop by our offices on Wednesday night! We’re throwing a little shindig from 5pm–7pm and you’re invited. We’ll have tasty grub, plenty of drinks and lots of chat. It’s a great chance to chill out with other attendees and meet the Typecast team.

  If you plan to stop by, do us a favor and RSVP on Twitter by using the hashtag #typecastdo. That way we’ll be sure to order enough food and drink to fill your bellies!

  Hope to see you here!

  ]]> Typecast News 2012-11-12T09:50+00:00 http://typecast.com/blog/your-acquisition-questions-answered/?utm_medium=rss http://typecast.com/blog/your-acquisition-questions-answered/?utm_medium=rss#When:12:31Z When we joined Monotype on Tuesday, you had lots of great questions for us. Here are our replies.
  
  ]]>

  © ilovetypography

  First off, we want to thank all of you for the overwhelming love and support you sent our way on Tuesday. We’re so thankful that the vast majority of our little Typecast community feels as positive about this change and what it could mean for our app as we do.

  That said, we know change can be scary. And in the past, we’ve certainly been wary whenever our favorite tools have been acquired by big companies. It’s a pretty normal reaction. As part of our Tuesday blog post, we invited everyone to submit their questions, comments and concerns about the acquisition. We’ve replied to each person individually, but we thought it would help our whole Typecast community to see what the biggest concerns have been and what we have to say about them. So here goes:

  Will you still offer fonts from from Typekit, Fontdeck and Google Web Fonts?

  The simple answer is yes (sorry if we weren’t clear about it in our earlier post). Monotype has not asked us to drop our other font partners, and we have not cut ties with any of them. To quote from the official press release:

  “Typecast customers, however, can continue using any Web font solution that Typecast supports, including the Fonts.com Web Fonts, Typekit®, Fontdeck® and Google® Web Fonts offerings.”

  We believe experimentation is crucial to design, and we want you to be able to do that with the best type on the web, no matter the source. That belief doesn’t change now that we’re part of a public company. And in time, we’d love to expand the range of fonts we offer by partnering with even more quality providers. Monotype gets how important this is too. In fact, their Communications Manager Vikki Quick echoed this to .Net on Tuesday afternoon:

  “[This acquisition] brings to Monotype not only an innovative product but also a talented team with deep experience in design and web publishing. Although we now own Typecast, we expect that it will continue to support other font services. We completely understand that the ability to combine fonts from many services is a core part of the value that Typecast brings, and that this is something people love about the product.”

  We and Monotype are both keen to show our partners and the foundries they work with that this change will be great for Typecast and their many customers who use the app.

  But keeping other font providers doesn’t make sense for Monotype.

  It actually makes great business sense. The more designers who use web fonts, the larger the market grows. And a larger market is good for Monotype. Typecast is helping to increase the adoption of web fonts by giving designers the freedom to experiment with fonts from lots of services and even mix fonts from different services. It’s this freedom that encourages many designers to give web fonts a try. Monotype recognises this.

  Big companies kill innovation with their bureaucracy. How can Typecast possibly expect to be unaffected?

  As the .Net article suggests, ours is a bit of an atypical situation. Monotype knows our work and trusts us to keep Typecast on track. They didn’t acquire us to change us. They want to help and learn from us, and so we’re continuing pretty much as is. 

  Yes, we have new systems to work with. Yes, now our boss Paul has a boss (tee-hee). Yes, it may take us a little longer to get reimbursed for conference expenses, etc. But creative control over Typecast still lies with Paul (our managing director) and Jamie (our creative director). No change there. Some may think it’s naive of us to believe this will last, but we’ve worked with Monotype a lot this year and we trust that their intentions are good. They’ve given us no reason to deny them the benefit of the doubt.

  What about your emails, newsletters and blogs? Will Monotype really let you connect with people in the same personal way you did before?

  Well all we can say on this one is so far so good. We’ve already discovered that being part of a public company means there are formal policies on codes of conduct and social media, but these are all common sense. Okay, so legal won’t let us use words like ‘guarantee’ anymore, and we can’t go about committing libel, but that’s not really our style anyway, so we’re not worried. We plan to keep on talking with you just like we always have: honestly and like a normal human being. No robots here.

  You say you’re keeping the same team on the product, but surely that won’t last.

  We truly believe it will. All 14 staff that were part of Typecast on Monday before the acquisition are still with us today. There have been no new teammates forced upon us, and nobody has been let go. Of course in the years ahead our team may evolve, but teams change. That’s reality. When ours does, we expect that it will only be because staff have chosen to pursue new opportunities or because we need to bring on new skills to benefit the app. We don’t believe that a change of staff can ruin a product. Only a change in ethos and vision can do this. Our team shares the same vision and ethos, and Jamie and Paul safeguard these at the hiring stage and in the day-to-day running of Typecast. So anybody we choose to joins us in the future will enhance that culture, not dilute it.

  Listen, this is new for us too and we can’t say with 100% certainty what the future holds. Six days ago we didn’t know we’d be joining Monotype, and we don’t know what surprises are in store tomorrow. But we plan to keep working hard to make Typecast a tool you love using, stay true to our design roots and be honest with you – just like we’ve done up till now. Stick around and enjoy the ride. That would be amazing.

  ]]> Typecast News 2012-11-05T12:31+00:00 http://typecast.com/blog/sweet-tweets/?utm_medium=rss http://typecast.com/blog/sweet-tweets/?utm_medium=rss#When:10:08Z What a response to the news of our acquisition! Come take a look at what others on our beta had to say.
  
  ]]> Thanks so much for the overwhelming support on Tuesday! As soon as we announced our acquisition by Monotype, your messages of congratulations and virtual high-fives started pouring in. We received over 500+ tweets, and boy did they help make a great day even more spectacular.

  In honor of your support and general awesomeness, we’ve picked out a few of our favorites for special recognition.

  Hands-down most hilarious congratulations post

  Ok, it’s not strictly a tweet…more like a link in a tweet, but this award goes to @Buildconf, who posted this pic of our teammates Chuck and David.

  
  

  Most heartwarming

  Golly you’re a kind and generous bunch! Big hugs for sending us really sweet messages like these:

  
  
  
  
  

  Funniest tweets

  Okay, so maybe there’s something wrong with us, but these just made us laugh out loud:

  
  
  
  

  Best children’s literature reference

  “I think I can. I think I can.”
  
  

  From industry friends

  This year we’ve been lucky to have some really amazing designers and agencies using Typecast. Here are just a few of the congratulations they sent us on Tuesday:

  
  
  
  
  
  
  
  
  Of course there were many more wonderful well-wishes. So a big thanks to all of you who got in touch. We’re really grateful to everyone on our beta for your support and encouragement. <3

  While it was great to take a day to celebrate, we’re already back at the grindstone making Typecast even better for you to work with!

  ]]> Typecast News 2012-11-05T10:08+00:00 http://typecast.com/blog/typecast-joins-monotype/?utm_medium=rss http://typecast.com/blog/typecast-joins-monotype/?utm_medium=rss#When:09:26Z What a big week. First the launch of our public beta and now this! Now we have the resources to take Typecast to the next level. Exciting times ahead!
  
  ]]>
  We’re delighted to announce that as of today, Monotype is the proud owner of both Typecast and Front (our design agency).

  It’s fantastic news for our little app – allowing us to grow and improve the service while also giving our team access to significantly more resources.
  Monotype is a legend in the world of typography. For over 125 years they’ve improved and promoted typography and technologies that ease the design and production issues related to fonts. More recently, they’ve made big strides in the world of web fonts with their font-hosting service Fonts.com (one of Typecast’s original partners) and the acquisition of My Fonts (a fantastic fonts service with some of the most beautiful typefaces for the web).
  Like us, they’re passionate about typography, and like us, they’re keen to help creative people do more with type on the web.

  Why sell now?

  Don’t worry. We’re selling up, not out. While some companies sell and walk away, we’re holding on tightly to Typecast and not letting go. But selling was the best way to do justice to you and the app.

  You see, we’re a 14-person design agency. We believed so strongly that there was a better way to design with web fonts that we decided to take a year off of client work to put our whole team on the planning, development, testing and promotion of Typecast. And we footed the bill ourselves.
  But with our year now up, we started facing tough choices. How could we keep making Typecast better AND run the company? A return to client work would mean we could pay the bills, but it would significantly slow progress on Typecast. To continue focusing on Typecast alone would mean raising external funding.

  Monotype couldn’t have chosen a better time to reach out to us. Others have offered to buy Front in the past, but it was never the right fit. This time, it was perfect.

  A boost for Typecast

  By joining the Monotype family, all 14 members of our team (including our CEO Paul and creative director Jamie) will have the chance to continue working on Typecast. It also means we’ll be able to keep expanding it and working with you to make it the premier web typography app. We’ll be leaving client work behind forever, and we may even have the chance to bring you some related tools we’ve been brainstorming.

  We’ll keep trying to partner with lots of font services (not just Fonts.com) and will be able to share Typecast with loads more designers thanks to Monotype’s customer base.

  Most importantly, Typecast will have everything it needs to grow into a happy, healthy adult: love, lots of attention, and a stable home.

  We couldn’t be happier with the news, and we hope you’ll join us in welcoming Monotype to the Typecast family/community. It wasn’t an easy decision, but we’re certain it was the right one – for the future of Typecast, our team and you, our users.

  You can find out more about the acquisition in the official announcement.

  If you have any questions, feel free to add them below and we’ll get you an answer.

  Footnote

  Since writing this post on 30 October, we’ve received questions below as well as via Twitter and email. You can read our responses to these in this post.

  ]]> Typecast News 2012-10-30T09:26+00:00 http://typecast.com/blog/public-beta-time/?utm_medium=rss http://typecast.com/blog/public-beta-time/?utm_medium=rss#When:15:22Z It’s been more than 300 days since we launched our private beta, and now we’re finally ready for the world!
  
  ]]>
  Man we’ve been looking forward to today! After 12 full months in private beta, we’re opening our doors to all comers. Typecast is officially in public beta starrrrr…tinggg…NOW!

  We’re fortunate to not only have great designers using Typecast and tweeting kind and wonderful messages to us, but folks who have over and over given us candid, constructive feedback on what they didn’t like about the app and could be more useful to them.

  It’s because of everyone’s feedback that we’re one step closer to realising our vision:

  • improving the way designers work with web fonts; and
  • making the web a more beautiful place.

  We’re replacing hours of assembly and manual work with effortless experimentation, and even fun! And that’s good news for everyone.

  Help us make some noise

  We’re trying to get the word out to as many people as possible, so if you love using Typecast and think it’s a must-have in every designer’s tool box, PLEASE tweet and blog and tweet some more about us so others can sign up and love it too.

  Baby photos

  
  Although today Typecast is bursting with dozens of features, this is what Typecast looked like when started back in early 2011.

  
  Here’s what else we found in the way-back machine…our very first video of the app in action, from before the private beta when only a few close friends were helping us test drive it.

  
  And the day we launched our private beta, this is what we looked like: just a handful of controls.

  We’re delighted that today Typecast boasts loads of useful features, like editable CSS, external publishing, a baseline grid, background colour, OpenType features, indentation and inline formatting, versioning, classes and inheritance, and more than 23,000 web fonts. Oh how we’ve grown :)

  Our stats

  So what it has taken to get Typecast to this point? Here are a few fun facts about how we’ve spent our time this year:

  • days in private beta = 389
  • invitations sent = 21,100
  • usability sessions with customers = 122
  • customer support emails sent and received = 1,734
  • releases = 69
  • cups of tea = 7,280
  • project staff = 14

  Still free web font goodness

  In case you were wondering, yes, Typecast is still free, for now. We’ll be announcing details about pricing later this year.

  Try it now Start an account and get in on the awesomeness.

  ]]> Typecast News 2012-10-22T15:22+00:00 http://typecast.com/blog/contrast-through-scale/?utm_medium=rss http://typecast.com/blog/contrast-through-scale/?utm_medium=rss#When:10:39Z Improve your typographic contrast by working to a harmonious scale.
  

  ]]>

  

  A typographic scale. ©vanseodesign.com

  by CHRISTOPHER MURPHY

  Contrast defines hierarchy, creates emphasis, suggests the relationship and relative importance of content, and can control how quickly text is read.

  You can create contrast through thoughtful use of:

  • scale
  • weight
  • classification
  • case
  • color.

  Used individually, each can be hugely effective. When orchestrated and used collectively, however, they are a potent combination. Think of them like the spirits in a much-loved bar. Mixed with care, insight, and some thought given to quantity, they can combine to create a delicious, intoxicating and balanced blend. Combine them in an ad hoc manner, however, and the result is the opposite: a bar’s spill trough at the end of a night. In a word: revolting.

  In this first article, I’ll focus on scale, offer some tips on setting a scale, and share some sites that I feel have used scale particularly well.

  What is scale?

  Scale refers to the range of values at which type is sized. The more regular the intervals between each value, the more harmonious the scale.

  By setting a typographic scale, you can:

  • control the pace at which a reader consumes content;
  • guide the reader through a page; and
  • introduce hierarchy, helping the reader navigate and understand relationships between pieces of content.

  Newspapers are masters at this. When we pick up a paper on our daily commute, our eyes are guided by a complex interplay of relationships between the content, largely driven by scale. The relative scale and placement of the typography allow us to infer meaning. Our eye is guided to the day’s top stories and we’re drawn in to these stories through carefully crafted typography.

  

  Careful use of typographic scale and placement control the readers’s pace and entry into the various articles, guide the eye, and establish a clear hierarchy of importance.

  Consider this example from The Guardian. Our eye is drawn to the top story (‘School’s out…’), and we are led in to that story through the bullet points beneath (‘Student protests…’, ‘Isolated breakouts…’). Looking at the different text sizes – from large (the headline), to medium (the bullet points that draw us into the text as readers), to small (the copy of the article itself) – we can see how they’ve used scale to guide our eye and draw us in.

  Thinking about the page in a wider sense, we can see a clear hierarchy between the top story of the day (‘School’s out…’) and stories that are lower in the hierarchy (‘Could Belgium be next?’). Here, scale expresses a meaning and relationship between the content on offer.

  Start with your base paragraph size

  The size you choose for your paragraph settings is important for two reasons. Firstly, in most situations, your site will have more <p> elements than any other, so it’s only prudent to start with your most prolific element. In addition, best practice suggests that you determine the size of all other elements based on your P size. However, many factors will influence which <p> size is best for your particular design. Here are some considerations to be mindful of:

  Audience needs

  When determining your base measure, think about your target audience to ensure your design is fit for purpose. What might they appreciate? What might they need?

  

  With young audiences, type can afford to be smaller and ignore guidelines that aid legibility. On Moshi Monsters, the use of all caps settings at small sizes, though less inherently legible, push a sense of ‘design’ to the fore.

  For example, consider the difference between an older audience of retirees and an audience of young children. The former may need type set a little larger, while the latter might be fine with text set a little smaller.

  Reading distances & text quantity

  It may be that you’re designing on a 27 inch screen two feet away, but that doesn’t mean that your site’s visitors will view your type in the same way. It pays to be mindful of the likely scenarios users will consume your text in and size sensitively to this. In his A List Apart article titled A Simpler Page, Craig Mod explores the issue of reading distance as it relates to tablets and digital books. A thought-provoking read.

  Consider, too, the amount of text you’re working with. Are you designing for long-form content (like a book or magazine articles) or short-form? With the former, your <p> size must enable readers to consume all of your text without experiencing fatigue or abandoning the piece halfway through. Martha Rotter writes and speaks extensively about design issues related to long-form copy, and in her Smashing Magazine article earlier this year, she reminded us all of the importance of testing our type’s effectiveness and suitability:

  “To find out what works, do some testing. User testing, A/B testing and even testing within your own team can yield insights. Have everyone on your team read through a handful of long-form content on various devices. If people can’t make it through more than a few paragraphs, try different fonts, sizes or spacing.”

  Choose a tried and tested scale

  Established by typographers in the 16th century, typographic scales create harmony and balance between headings and body copy. Building out your scale from your <p> requires some basic mathematics in order to establish a consistent relationship between the different elements of your page – headings, sub-headings, body copy and pull quotes, for example. However, if you’d prefer to avoid the heavy lifting, you can call upon existing scales to achieve a harmonious outcome.

  For example, the 16th century scale (which is still used widely today) was largely determined by the limitations of technology – metal type in one face, one size and one weight – and progressed as follows: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 26, 48, 60, 72. We might echo this scale as follows, establishing a relationship between our body copy and its associated headings:

  body { font-size:100%; }
  h1 { font-size: 2.25em; /* 16 x 2.25 = 36 */ }
  h2 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
  h3 { font-size: 1.125em; /* 16 x 1.125 = 18 */ }
  h4 { font-size: 0.875em; /* 16 x 0.875 = 14 */ }
  p { font-size: 0.75em; /* 16 x 0.75 = 12 */ }

  However, we needn’t restrict ourselves to a scale drawn from the sizes of type when it was cast in metal. We might also explore other scales.

  In his presentation Web Type – 80% Science, 20% Art, Jon Tan explores the Fibonacci Sequence as a canon on which to compose – setting each subsequent value to the sum of the preceding two values – 16, 24, 40, 64:

  body { font-size: 100%; }
  h1 { font-size: 4em; /* 16 x 4 = 64 */ }
  h2 { font-size: 2.5em; /* 16 x 2.5 = 40 */ }
  h3 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
  p { font-size: 1em; /* 16 x 1 = 16 */ }

  The result is a scale that’s pleasing on the eye, as Tan puts it, drawn from a healthy mix of science and art. Alex Charchar has written extensively on the topic of typographic scale, I’d encourage you to set aside some time to digest his ideas.

  Consider ratios

  Thanks to computers we can set type at any size we please in order to devise our own, unique scales. We needn’t constrain ourselves to centuries-old paradigms or even current trends. The result of this freedom, however, can be a typographic smorgasbord with little or no underlying harmony. Writing in the The Elements of Typographic Style (which every aspiring typographer should own), Bringhurst states:

  “In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”

  Limiting your typographic scale can improve your typography considerably. And rather than arbitrarily plucking type sizes out of the air, ratios will ensure your intervals are consistent and your scale harmonious. However, this is where the math comes in.

  Ratios are inherently appealing. You might be aware of the golden ratio (also known as the golden section or golden mean), a ratio of 1:1.618 that can be found in everything from the underlying proportions of classical architecture to the world of nature.

  As Tim Brown puts it in his excellent article, More Meaningful Typography for A List Apart:

  “The golden ratio and other meaningful ratios rooted in geometry, music, nature, and history can be expressed as modular scales and put to work on the web.”

  Using the golden ratio as a typographic root, you can produce values for a modular scale by multiplying by 1.618 to determine the next highest number in your typographic scale (or dividing by 1.618 to determine the next lowest number). The result is a set of harmonious proportions.

  Putting this into practice, we can start with our body copy size, say 16, and work up or down from that to determine our relative sizes (working up to determine heading sizes, working down to determine caption sizes):

  h1 - 41.886784 x 1.618 = 67.773
  h2 - 25.888 x 1.618     = 41.887
  h3 - 16 x 1.618         = 25.888
  p - 16 x 1   = 16

  The mathematics might look complicated. Fortunately, Brown has built a helpful calculator that takes care of this for you. Applied in CSS, the above scale would be as follows:

  body { font-size: 62.5%; }  /* Sets our base type size to 10px, easing the maths. */
  h1 { font-size: 6.7773em; /* 10 x 6.7773em = 67.773 */ }
  h2 { font-size: 4.1887em; /* 10 x 4.1887em = 41.887 */ }
  h3 { font-size: 2.5888em; /* 10 x 2.5888em = 25.888 */ }
  p { font-size: 1.6em; /* 10 x 1.6 = 16 */ }

  The golden ratio isn’t the only ratio that can be used to determine a typographic scale. We can invent our own or look to the world of music for inspiration, too. Owen Gregory’s Composing the New Canon: Music, Harmony, Proportion extensively explores the use of musical scales as a backbone for typographic scales. As Gregory puts it:

  “Music moves us, often in ways we can’t explain. By some kind of alchemy, music frees us from the elaborate nuisance and inadequacy of words. […] There are some obvious and notable similarities between music and visual design. Both can convey mood and evoke emotion but, even under close scrutiny, how they do that remains to a great extent mysterious.”

  Helpfully, Gregory explains how an understanding of musical scales can be applied to the world of typography for the web. Building on some of Mark Boulton’s ideas around designing from the content out, Gregory explains how to design typographic systems from the content out – systems that have an inherent harmony and logic. His article is well worth reading and exploring.

  Bottom line? Whether you borrow from an established scale or opt to create your own using ratios, once you establish a scale, stick to it. Therein lies harmony and beauty.

  Show and tell

  Below are just a few examples of sites that I feel use typographic scale to great effect.

  

  Jeffrey Zeldman’s Web Design Manifesto, 2012
  On the redesign of his personal site, Zeldman stated: “Thank you for the screen shot. I was actually already aware that the type on my site is big. I designed it that way.” Zeldman brings typography right to the fore in a design that echoes the functionality of applications like Instapaper and Readability, which put the reader first and foremost.

  

  Joshua Platt’s Index
  Using nothing more than a carefully controlled palette and some sensitivity given to the scale of his typography, Platt pulls off a typographic tour de force–playing with tempo and pacing through the careful control of scale.

  

  Diehl Group Architects
  In a series of hero images on their site’s front page, Diehl Group Architects play with extreme contrasts of scale between titles and subtitles.

  

  Form and Future
  Despite the numerous elements in their type system (seven visible here), Form and Future’s elegant use of scale draws us into the content and down the page.

  
  For more from Christopher Murphy, visit Monographic.

  ]]> Typecast News 2012-10-19T10:39+00:00 http://typecast.com/blog/our-first-award-nomination/?utm_medium=rss http://typecast.com/blog/our-first-award-nomination/?utm_medium=rss#When:16:00Z This week we were nominated as Best New App/Service for this year’s Irish Web Awards. Exciting Times!
  
  ]]>
  Earlier this week Typecast was nominated for Best New Web Application/Service in the Irish Web Awards.

  For nearly a year we’ve been working hard to make Typecast an app that designers enjoy using and that helps improve their design process, so we’re ecstatic that you liked the app enough to put its name forward. Thank you kind people!

  But we’ve got stiff competition. We really like the look of these two new apps in our category:
  
  

  • City Hook, which helps you find the cheapest and most direct route from any airport to its city centre; and
  • Arbata Audioguides, a series of mp3 documentaries bringing Irish heritage sites to life with historical facts, music and sound effects that put you right in the period.

  
  We can’t wait until November 1st to see how we do.

  ]]> Typecast News 2012-10-04T16:00+00:00 http://typecast.com/blog/kick-your-creativity-into-high-gear-with-our-css-editor/?utm_medium=rss http://typecast.com/blog/kick-your-creativity-into-high-gear-with-our-css-editor/?utm_medium=rss#When:08:05Z Our editable CSS gives you the power to create nearly any typographical style you need.
  
  ]]> You folks are insatiable! We release a new feature, you send us a load of lovely ‘thanks’ and ‘that’s awesome’ emails, and then sneakily list three more features you’d like to see next! Of course I jest. We actually love hearing your ideas. You’ve made Typecast what it is today. But we also know that getting through your wish list takes time, and you’re itching to do even more with your projects.

  So this week we’ve added the feature of all features. The one feature to rule them all. The tardis of typographic style and control: editable CSS!

  All access CSS

  
  Now you can change your CSS from within your project! Just click ‘View CSS’ and start typing in the CSS pane. Your changes appear right there in the browser. No refreshes and no window hopping. And like always, any changes you make are synced to your style guide.

  Paste your starting point

  Like to begin every project with the same scale? Need to work with a client’s existing styles? Want to use a completed project as your jumping off point? Just paste the CSS from these sources into the editor and you’re off.

  Fine-tune faster

  Our visual controls are great for experimenting and finding direction, but for making tweaks and fine tuning, changing properties in the CSS can be even faster. And you don’t even need to be a programmer. Just delete and type and see your results in the browser. Give it a try. It’s a terrific way to get familiar with CSS if you’re new to code.

  Bring the pretty with more styles

  CSS + typography is like cookies + milk. It’s a delicious combination that brings joy and makes things better. CSS gives you ultimate control over your web typography and the power to take your Typecast projects to all new levels of beauty and precision. Here’s just a peek at what you could create in Typecast through the CSS editor:

  Rotate Your Text

  View full project.

  Pair Type with Background Images

  

  View full project.

  Create Motion with Transitions

  

  View full project.

  But that’s not all. With CSS, you can create design and formatting delights with just a few keystrokes. Things like:

  • font stacks;
  • gradients;
  • text shadows;
  • box shadows;
  • padding;
  • initial caps;
  • border-radius, and more!

  Little assists to help you along

  Within the editor we’ve included a few little helpers to keep you on the right track, particularly if you’re new to working with code. For example, if you accidentally key an incompatible value for a property, you’ll see a red box with an ‘X’ to let you know that’s a no-no. And when you type selectors like ‘border-radius’, we’ll add all the browser pre-fixes for that selector, like -moz-border-radius, -webkit-border-radius (and so on) so you don’t have to.

  Current constraints

  Nearly everything you can do in CSS, you can do in our CSS editor. But there are a few things that it doesn’t support just yet, including:

  • ID tags; and
  • @ rules (like keyframes, import and font-face).

  New to CSS? Here’s some help.

  Want to try some of the nifty typographic styles in the browser but aren’t much of a coder? Here are some links that will tell you what you need to know about lines of code are and where to paste them:

  • CSS Snippets – specifies the code needed to create effects and shows you what the result should look like.
  • HTML Dog – includes beginner, intermediate, and advanced tutorial content about CSS.
  • Google Code University – full of useful video guides.
  • Cascading Style Sheets – an introductory video tutorial by Treehouse.
  • CSS Inheritance: A Simple Step-by-Step Tutorial – terrific, easy-to-understand slide show in simple language. His slides on text shadow are great too.
  • Intermediate CSS resources – reams of goodies from the Mozilla Developer Network.

  Typecast will always be dedicated to giving web designers like you visual controls that provide instant visual feedback. But sometimes, the best and fastest way to check an idea is to work on the CSS directly. With editable CSS under the hood, Typecast now has something for every designer, no matter how you prefer to work: visual controls AND code-based typographic design, all in the browser. Good times.

  Sign in now and make something spectacular in minutes!

  ]]> Typecast News 2012-10-02T08:05+00:00 http://typecast.com/blog/proudly-supporting-insites-the-book/?utm_medium=rss http://typecast.com/blog/proudly-supporting-insites-the-book/?utm_medium=rss#When:14:52Z We’ve sponsored a book! It’s full of stories, big wins, lessons learned and personal tales from 21 of the web and tech industries’ leading figures.
  
  ]]>

  Elliot Jay Stocks and Keir Whitaker have just published a tidy collection of interviews with some of the web’s most creative contributors. We all know them by name, but this 256-page tome (available in paperback and e-formats) provides a rare peek at how these folks started their careers, the experiences that shaped them (and their most well-known work), and the ideas that still motivate them today. It’s like Inside the Actor’s Studio but for web design (minus the sycophantism).

  
  Participants have produced web and design awesomeness like the SwissMiss blog, Nike’s Better World site, Digg, Huddle, the first Firefox icon, Instagram, and A Book Apart.

  

  
  Despite its size, Insites is easy to digest. Elliot’s design and his use of p.s.type’s Quatro Slab and Quatro Sans (both available in Typecast) makes it super legible and readable. And its simple Q&A format is perfect for dipping in and out of.

  Inside you’ll find anecdotes, project wisdom and discoveries like:

  • how Swiss Miss’ aunt shaped her creative side;
  • what Space Invaders did for Brendan Dawes;
  • Andy McGlaughlin’s advice for choosing a VC;
  • why Alex Hunter’s job as a business systems analyst gave him the most important skill of his entire career; and
  • what Josh Brewer thinks about designing for 400 million users.

  We’re big fans of 8 Faces and Elliot Jay Stocks, so we’re really pleased to support the launch of Insites. If you’re looking for a dose of inspiration or have been seeking the perfect coffee table book, go grab your copy.

  ]]> Typecast News 2012-09-19T14:52+00:00 http://typecast.com/blog/a-better-simpler-menu/?utm_medium=rss http://typecast.com/blog/a-better-simpler-menu/?utm_medium=rss#When:13:08Z We’ve relocated some menu items to give you a tidier work space.
  
  ]]> After nearly a year of adding new features to Typecast, we thought our project interface was starting to look cluttered. So we’ve reorganised it to group related items, simplify the menu and make room for upcoming features. Here’s a quick update on where the stuff you’ve been using lives now.

  Saving and exporting

  
  On the left we’ve grouped Open, Save & Export controls. Just below this you can access the background colour, the baseline grid, style guide, CSS and element insertion features.

  Convenient sub-menus

  
  When you click Open, Save & Export, this new sub-menu will appear – allowing you to switch to other projects, create and access versions, download your CSS and HTML, and contact our support team.

  Quick-draw templates

  
  From within your project you can start a blank project and switch to a recent one (just like before), but now you can also switch to a template without returning to the dashboard.

  Access versions 5 seconds faster

  
  View previous versions quicker through our simple list. No more lag time waiting for the preview image to load.

  Adding containers and publishing your project

  
  Publish now lives over on the right side of your toolbar. This link lets you share, preview and test your designs outside of Typecast by creating a live demo of your project.

  Beneath the Publish link you can add new containers to your project. You’ll also see our new container icons. These replace our former container numbers, but you can still click on them to jump from one container to the other.

  Hope these changes make your workspace feel a bit cleaner.

  Sign in to explore for yourself.

  ]]> Typecast News 2012-09-10T13:08+00:00 http://typecast.com/blog/preview-designs-live/?utm_medium=rss http://typecast.com/blog/preview-designs-live/?utm_medium=rss#When:13:03Z Now there’s a simple way to share, preview and test your designs outside of Typecast.
  
  ]]> Even though Typecast lives in the browser and is super handy for accessing projects from anywhere, sometimes you need to share you projects with others. So we’ve added ‘Publish’ to make this easy.

  

  ‘Publish’ creates a live demo of your project on a URL within the Typecast domain. That’s all of your fonts, elements, text and visual properties exactly as they are in your project. Best of all, you don’t have to set up kits with the providers or build a working prototype. Not yet, that is. Just click and you’re live. This should make it a lot easier for you to:

  • share your typographic designs with clients for feedback and approval;
  • quickly test type rendering on different browsers without having to repeatedly sign in to your account; and
  • test your type on different operating systems plus devices that aren’t compatible with our app.

  Just copy and forward the link. Here’s a project our designer Chris published this week:
  

  

  See the full design.

  Synchronicity

  Whenever you publish, the page will automatically open in a new window and its URL will remain linked to your project. So whenever you update your project in Typecast, the content of your demo page will update too.

  We’ve added this feature because we know that sharing, previewing, and testing your typography is an essential part of the design and development process. However, we also believe that type designers and our partners deserve to be paid for their fonts. This is why all project demos display a Typecast badge and are limited to 50 views per month. Once you’ve tested your design and have client approval, be good, go build your kits and pay for what you use.

  Sign in now to start sharing.

  ]]> Typecast News 2012-08-30T13:03+00:00 http://typecast.com/blog/background-color-for-your-typography/?utm_medium=rss http://typecast.com/blog/background-color-for-your-typography/?utm_medium=rss#When:13:03Z Create rich and vibrant backgrounds with our latest color feature.
  
  ]]> Okay, so not every project calls for an Apple-esque white background. Which is why we’re so excited to finally be able to offer you a kaleidoscope of background colors.
  
  

  See the full design.

  Now you can saturate your canvas with hues-a-plenty and test your typefaces and text colors right on top. No more workarounds! No more compositing. All in the browser.

  To apply a background color to your canvas, first select ‘body’ in your elements breadcrumb.

  This will unlock the background colour picker in your design panel.
  

  Or use the shortcut in your main toolbar, which will automatically apply background to the body for you.
  

  Note that your background color will be applied to your entire canvas. You can’t yet apply this to a single container.

  To get your creative juices flowing, here are a few sites that we think are making great use of background color.

  • 
  • 
  • 
  • 

  Remember legibility and readability

  Background color can create mood, add emphasis and immediately indicate a brand, but it can also impact the legibility and readability of your type. So here are just a few tips as you try out our new feature.

  1. Keep characters clear

  Legibility refers to how clear the individual characters of a typeface are. The clearer they are, the easier it is for us to decode words and, hence, read. For example, at a small size, does an ‘h’ still look like an ‘h’, or does its serif make it look like a ‘b’ instead? Background color can affect legibility by ‘bleeding’ into your text and overwhelming the finer typographic details that help define a character’s shape, like serifs, stems, strokes, and cross bars. To avoid legibility issues:

  • inspect the clarity of these features on your chosen typeface;
  • try bumping up your text size; and
  • experiment with the other weights available in your typeface’s family. Typographers create these to give you suitable options for various text sizes.

  2. Watch your contrast

  Readability refers to how easy it is to read text as a whole – as phrases, sentences, or blocks of text. Lots of things can affect readability, including line measure, tracking, size, etc. But when it comes to color, it’s the contrast you want to watch. Too little contrast between your background and type colors and readers will have to squint to make out the words. Too much contrast and it can be hard on the eyes and cause fatigue (plus just be plain ugly). 

  To check the contrast of your background and text colors, try one of these sites. They’ll apply a grayscale filter to your design so you can make sure your text isn’t fading into the background:

  • Colorfilter (choose the grayscale option from the drop menu)
  • Graybit
  You’ll need to enter a URL, but you can get this quickly by publishing your design to a public URL. Typecast lets you do this with just one click. Here’s how.

  3. Beware color rendering

  Macs and PCs display color differently, so you’ll want to test your design on both platforms. Do this by either signing into Typecast on a different machine or by sending a teammate your design’s temporary URL. Easy peasy.

  
  Sign in now to start creating dynamic backdrops for your web type.

  ]]> Typecast News 2012-08-29T13:03+00:00 http://typecast.com/blog/change-type-and-elements-in-fewer-clicks/?utm_medium=rss http://typecast.com/blog/change-type-and-elements-in-fewer-clicks/?utm_medium=rss#When:10:55Z New menu improvements eliminate repetitious clicking and let you make selections faster.
  
  ]]> Guess what? You no longer have to reopen your typeface or elements menu in Typecast after each selection. Now you can pin these open instead! This means you’ll be able to swap out typefaces much faster and set your hierarchy in a jiffy.

  Not only that, but just like your main tool panel, they’re draggable too.

  

  A big thank you to our users Jin Su Park (in New Zealand) and Kevin McGrath (in Belfast) for sending us the ideas! You were right. Much better and faster! Wouldn’t you agree?

  Sign in to judge for yourself.

  ]]> Typecast News 2012-08-21T10:55+00:00 http://typecast.com/blog/help-videos--templates-for-getting-started/?utm_medium=rss http://typecast.com/blog/help-videos--templates-for-getting-started/?utm_medium=rss#When:09:41Z Our latest features make finding your way around the app and getting used to the controls easier than ever.
  
  ]]> Lately we’ve been looking at ways to make getting started with Typecast easier, because (frankly) if you’re stuck, we’re sunk! Lots of you gave us really useful feedback, so here’s what we’ve come up with so far.

  Video show and tells

  Sometimes it’s just easier to get how something works by seeing it in use instead of reading instructions. So we’ve created four getting started videos to introduce the basics of Typecast.

  

  They show you where to find the features you’ll want to play with most often: things like typefaces and weights, text size, and the colour palette. You’ll also see how these features work. And we cover some of the basic administrative items like how to name and save your projects, create versions and add colleagues to your Typecast team.

  You can find them in your dashboard’s footer when you’re logged in to Typecast. Or just click an image above to watch one now.

  These are just first drafts. If you have ideas on how we can make them clearer and more useful to you, just email shelly@typecastapp.com. More videos are coming soon to show you how to design with inheritance in Typecast and how to use our baseline grid. If there are others you’d like us to make, tell shelly@typecastapp.com.

  Handy templates to kickstart experimentation

  We’ve also recently added four simple starter templates to let you explore what the app can do.

  • Choose fonts
  • Side by side
  • Style elements
  • Simple blog article

  Each comes with sample text that’s tagged with HTML elements and has a basic scale already set for you. All you have to do is change the typefaces and properties to transform them to suit your project. Each gets you started on a different design task.

  • Quickly test display and body fonts together in our Choose Fonts template to find your perfect pairs.
  • Give each content stack a different look in our Side by Side template for quicker typographic comparison and decision-making.
  • Turn a basic scale into a complete type system in our Style Elements template.
  • Style long-form copy in our Simple Blog Article template to check how your typographic choices work on a larger amount of text.

  To try out one of our starter templates, click the ‘start from a template’ link on your dashboard.
  

  This will open the template drawer where you can select whichever one suits you best.
  

  We really hope these eight new tools make getting started easier and help you out whenever you get stuck.

  Sign in to try them out now!

   

  ]]> Typecast News 2012-08-15T09:41+00:00 http://typecast.com/blog/fancify-your-typography-with-ligatures-and-more/?utm_medium=rss http://typecast.com/blog/fancify-your-typography-with-ligatures-and-more/?utm_medium=rss#When:14:55Z Love typographic flourishes and web fonts dressed to impress? Want to see your fav faces in pretty frocks? Our new opentype features are for you!
  
  ]]> OpenType features are bonus styles that introduce new shapes and positions to a typeface’s characters. They’re really useful when you want to add a few flourishes and inject a little finesse to your typography.

  For example, old-style numerals can add a sense of history or heritage and often look nicer in body copy than default numerals, which are sized as caps. And ligatures can add personality or informality to display text by joining up letters much the way we do when we blend our print handwriting with touches of cursive midway through.

  These bonus styles can also help you produce more-accurate typography, for example proper fractions:
  

  An easier way to apply styles

  Until now, if you wanted an OpenType feature to display on your site in web font form, you had to know the correct code and syntax. To turn on common ligatures, for example, you needed to know that the value code for them is ‘liga’ and then code the correct instructions with it, like this:

  -moz-font-feature-settings: 'liga=1';
  -ms-font-feature-settings: 'liga' 1; 
  -webkit-font-feature-settings: 'liga' 1; 
  -o-font-feature-settings: 'liga' 1; 
  font-feature-settings: 'liga' 1;
  
  

  We’ve made this easier by replacing tag recall and complex code with simple button activation. Choose your font, click the button for the feature you want to apply, and Typecast will update your text with that style and insert the code for you behind the scenes. But if you want to double check we got the code right, go ahead. It’s right there in the CSS.

  Right now you can pick from six of the most commonly used OpenType features, but we’ll be adding more in the future:
  

  Dress up more than 30 faces

  So far we’ve unleashed the OpenType awesomeness of 35 beautiful typefaces:
  

  However, manually tagging each typeface with its corresponding bonus styles means it may take us a while to work through the 26,000+ other fonts in our database. So if you have a favourite face that we haven’t added features to yet, just hello@typecastapp.com or tweet us to let us know, and we’ll add it as soon as we can.

  Browser support issues

  Sometimes you may select a typeface and see a number of OpenType buttons that are not clickable, like this.
  

  This means that the additional styles are available for that typeface in Typecast, but that the browser you are working in doesn’t yet support them. So in our example above, which we captured while in Chrome for Mac OSX, you can see that Typecast offers six bonus styles for Bello Pro, but in that operating system Chrome only supports common ligatures.

  Browser support for OpenType features is still patchy, but it’s getting better fast, which is great for web design. Here’s a table showing which of our OpenType features are supported by the most current versions Chrome and Safari:
  

  Login now to try opentype features in your project.

  Also, check out this great post by Elliot Jay Stocks on ligatures and see a variety of OpenType features in use on The New Web Typography.

  ]]> Typecast News 2012-07-23T14:55+00:00 http://typecast.com/blog/help-us-pick-our-1st-opentypefaces/?utm_medium=rss http://typecast.com/blog/help-us-pick-our-1st-opentypefaces/?utm_medium=rss#When:11:00Z We’ve been working away to add advanced typography options to Typecast. Now it’s time to add the expanded fonts to our database. Help us decide where to start.
  
  ]]>

  Since April we’ve been working to add advanced typography controls like ligatures, terminals, fractions, old style numerals, etc. We’re nearly done. In fact, we’re SO close, we’ve started tagging fonts in our database.

  The thing is, it’s going to take us a while to tag each of the 5,000+ type families in Typecast. So instead, we want to start with the ones you care about most.

  Tell us which typefaces you love to use, and we’ll add them as soon as we can. Here are the ones we’ve tagged so far:

  

  Which should we add next? Let us know by leaving a comment below or just tweet us.

  ]]> Typecast News 2012-06-06T11:00+00:00 http://typecast.com/blog/turbo-charged-containers-for-quicker-comparison/?utm_medium=rss http://typecast.com/blog/turbo-charged-containers-for-quicker-comparison/?utm_medium=rss#When:12:15Z New upgrades to our containers make comparing fonts and finding a visual direction fast and effective.
  
  ]]> They’re going to speed up experimentation with type and help you reach better decisions faster.
  

  Duplicate, class and repeat

  The first of our improvements is the ability to duplicate containers. This copies and pastes all of a container’s text and styles in a new container. This is really useful for setting up different font combinations, but it’s also handy for looking at how copy and styles work across different devices. Just duplicate your containers then adjust their widths!

  The second is container classes. Remember before how containers were connected? A style change in one created a style change in the other, and the only way to compare type was to create new elements (like h1.1). Well classes fix that.

  Assigning Container 2 a class basically disconnects it from Container 1. This means that you can make changes to all of its elements, and Container 1’s elements will remain unchanged.

  Duplicate your container, set classes and apply inheritance, and you’ll be comparing font combinations faster than ever before, anywhere! Come see!

  ]]> Typecast News 2012-06-04T12:15+00:00 http://typecast.com/blog/more-paragraph-control/?utm_medium=rss http://typecast.com/blog/more-paragraph-control/?utm_medium=rss#When:09:54Z Introducing indents and exdents for more control over paragraph styling.
  
  ]]> Typecast is all about experimenting with web type and creating great typographic design. So this week we’ve added indents and exdents as another tool to help you achieve typographic contrast.
  

  We’re all pretty familiar with these paragraph styles. They’re everywhere in print. Both situate every line of a paragraph (except for the first) flush left to the margin. But with an indent, the first line is set a few units in from the margin – just like in the photo above.

  With an exdent (also called an outdent and hanging indent), the first line of the paragraph is given a negative value that positions it left of the margin, like this:
  

  To improve typographic contrast and also improve clarity for readers, more web designers are turning to these as an alternative to the conventional mainstay – the block, flush left, ragged right, single-line-paragraph-break. We think Nathan Ford’s post on microtypography makes a good case for the power and worth of the humble indent. And Contents Magazine is a great example of the indent used to great effect:

  

  Whether indents and exdents are right for your project will depend on the content you’re working with and the other design decisions you’ve made. They’re not always a good fit, just as a line break isn’t the only ‘right’ way to set a paragraph. But we think it’s nice to have options, and now you can try them out quickly and easily before you decide.

  For more on indents, exdents, other paragraph styling tips and examples, check out these posts:

  • The Paragraph in Web Typography & Design by Jon Tan
  • 12 Examples of Web Typography by Jon Tan
  • Marking Paragraphs by Thinking with Type

  Or just come give them a go.

  ]]> Typecast News 2012-06-01T09:54+00:00 http://typecast.com/blog/introducing-take-backsies-and-do-overs/?utm_medium=rss http://typecast.com/blog/introducing-take-backsies-and-do-overs/?utm_medium=rss#When:13:33Z Now you can use a familiar keyboard shortcuts to fix mistakes and repeat actions.
  ]]> Now you can undo or redo any of your style changes. Just use the normal keyboard shortcuts you’re used to: Cmd/Ctrl+Z for undo and Cmd/Ctrl+Y (or Ctrl+Shift+Z) for redo.

  It’s a modest improvement, but these little helpers will let you roll back decisions and toggle between choices for quick comparison. (“Does this look better with the 3 em margin or the 5 em?”) They’ll also keep you from having to go into your previous versions just to remember or see that text size or font you tried and saved a few seconds ago.

  Styles only

  Please note that right now you can only undo or redo style changes. Over the coming weeks we’ll be adding the ability to undo other actions, like paste, keying, text deletion, etc.

  Next time you’re in your project test it out. Change everything to Comic Sans and then quickly undo it before someone points and laughs. Dare ya :)

  ]]> Typecast News 2012-05-31T13:33+00:00 http://typecast.com/blog/Design-with-inheritance/?utm_medium=rss http://typecast.com/blog/Design-with-inheritance/?utm_medium=rss#When:13:20Z This a BIG week for Typecast. We’re bursting at the seams with brand new features we think are HUGE for those of you craving better, faster experimentation and cleaner code.
  
  ]]> In brief, our new inheritance feature lets you define the body before you specify your other styles.

  

  To set the body, just click ‘body’ on the tool box and define its properties. Once that’s done, you’ll see the other elements inherit those properties. Then you can move on to individual elements, amending only those properties that you want to be different than the body, instead of setting every single property on every single element.

  That means less repetition for you and cleaner, more semantic, code for your developer to work with.

  If you’re already into CSS, then the mere mention of inheritance will set you aquiver and the behaviours will make sense. But if you’re not as comfortable with code, here’s a good summary of how inheritance works. 

  Preset styles are gone

  Until now, each time you created a new project in Typecast it contained default styles. For example, an H1 was 68px Arial with 81px line-height and 68px margins, and so on. Although we tried to make it easy for you to change these, you told us you’d prefer to set your styles yourself. Knowing how smart you all are, we abided. Plus, it makes controlling inheritance easier.

  Now when you create a project, you’ll see your choice of elements, but they’ll remain incomplete until you either 1) set the body or 2) specify the properties you want each to have.

  

  Old presets are out. Unstyled elements are in.

   
  Starting with a blank slate ensures that all styles will be your styles. This means no more stowaways in your style guide or surprises in your CSS. If you don’t specifically style an element, it won’t appear in your outputs. Period.

  Plus a CSS reset

  Your sleek inheritance and amazing design will be worthless if a browser mucks it up. So we’ve added a CSS reset to safeguard your typography. This should help ensure that what you set is what visitors get, no matter which browser ushers them to your site.

  Ours is a mini reset that we based on Eric Meyer’s CSS reset. It only resets these few properties – the ones most likely to affect your typography:

  • margin: 0;
  • padding: 0;
  • border: 0;
  • font-size: 100%;
  • font: inherit; and
  • vertical-align: baseline;

  This instruction is contained in your project’s CSS downloads. All you need to do is pass it over to your front-end developer.

  If you do your own development and want a broader reset, there are plenty available online. In fact, you probably already have a favourite. But if you’d like to know more about CSS resets, this article offers a good explanation of what resets are and how they came to be.

  Login now to try it all out.

  ]]> Typecast News 2012-05-30T13:20+00:00 http://typecast.com/blog/opentype-and-better-containers-are-in-sight/?utm_medium=rss http://typecast.com/blog/opentype-and-better-containers-are-in-sight/?utm_medium=rss#When:06:52Z Come see which new features we’ll be working on in April, including OpenType and inheritance.
  
  ]]> Some are improvements, and some are brand new goodies to make it even nicer and easier to design with web fonts. Here’s some of what we’ll be working to bring you during April.

  Topshelf type features

  Many of you we’ve spoken with love typography and have been asking us when advanced typography features will be available on Typecast – things like extended character sets, glyph positioning and substitution, extended language support, etc.
  
  To get things underway, we’ve got Chuck and Aaron working on some OpenType features as we speak. All will be revealed soon, then you’ll be able to set superiors, fractions and ligatures to your heart’s content.

  Undo & redo

  Everyone makes mistakes, so the ability to undo and redo a change has been one of our most popular feature requests. Alistair’s started tackling it, but there’s more to do. So it might be late April before it’s ready.

  Inheritance

  Ok, so there’s a right way to do CSS – define the body and adjust from there. It’s just been (ahem) a bit trickier than we thought to build that into Typecast. But fear not. Inheritance is on the way so your project’s CSS will cascade better than Rapunzel’s hair.

  Compare type easier

  As mentioned last month, we recently renamed ‘columns’ to ‘containers’. See?
  

  We discovered that the term ‘columns’ was misleading. It brought to mind behaviours seen in Quark and InDesign – like text flowing from one column to the next. Ours don’t work that way, so it caused some confusion. We think ‘containers’ is more accurate because ours work like divs.

  Right now new containers share styles. But we know that a major part of deciding on the right font and font combinations is being able to set the same text in different typefaces and compare them side by side. To make comparison easier, over the coming weeks we’ll be improving containers so you can give new containers a class of their own and make them unique. If you’d like to help us test these when they’re ready, send an email to david@typecastapp.com. He’s our man with the testing plan.

  Of course that’s not everything. There’s lots more to come on the road ahead. This just covers the next few hundred meters or so. But that’ll keep us busy for this month.

  To hear when these gems go live, add our feed or follow us on Twitter at @typecastapp. And of course keep sending us your great suggestions on Twitter, at hello@typecastapp.com or through the feedback button within the app!

  ]]> Typecast News 2012-04-11T06:52+00:00 http://typecast.com/blog/project-showcase-simple-as-milk/?utm_medium=rss http://typecast.com/blog/project-showcase-simple-as-milk/?utm_medium=rss#When:12:54Z Late last month, Simple as Milk (a talented studio known for their work on Assistly) used Typecast for the typography on their site’s redesign. This week, designer David Pomfret told us how using Typecast helped.
  
  ]]>

  Simple as Milk are a branding and web design team based in Eastbourne, UK, with a passion for helping start ups get off the ground through great design. If you ever visited Assistly, colorati.com or cloudwords.com, you’ll have seen their work. It’s good stuff.

  They joined the beta in February and soon began trying Typecast out on their site’s redesign. We first discovered what they were up to when they tweeted a link to their early design and tagged a copy with #typecast in Dribbble.

  

  We recently spoke to their founder and designer, David Pomfret, to hear what he and the team thought of Typecast, how they fit it into their workflow, and what shaped their typographic choices. Here’s what he had to say:

  What were your first impressions of Typecast?
  When I first heard of Typecast I was very excited. We’ve always loved typography, especially as we originally started as a print design studio. Typecast allows me to approach my web typography just how I would when designing for print, and that’s a big deal.

  What brief did you set yourselves?
  Our old site was always known for its crazy typography, and I didn’t want to lose this effect, but I did want a more refined, traditional print style. I’ve always loved this brochure that one of our clients had years ago. (We didn’t design it, but whoever did is a god!) It inspired us to create our new typography-based site with Typecast.

  Tell us about your font choices and pairings.
  I’ve always loved Brandon Grotesque. It’s a beautiful workhorse font that oozes character. It complemented the design really well, producing a subtle indication of letterpress due to its personality and shape. We thought Abril Fatface worked perfectly for the vintage feel we wanted, and it’s a beautiful choice when you want headlines with impact.

  Both choices were inspired by the brochure, which uses Gotham and Bodoni.

  How useful did you find the app?
  Typecast made the whole process incredibly smooth, allowing me to rapidly try out different fonts and sizing without having to write a single line of code. Because let’s face it, I wasn’t going to do it in Photoshop!

  How has your workflow changed to incorporate Typecast?
  Before, I would bear with Photoshop and work tirelessly to present my typography how I wanted it. Now I just do my typography in Typecast instead of Photoshop.

  For content-heavy sites, I use Typecast to build out the typography first, before I do any design work, and then build it into a working wireframe online. For projects that are light on typography, I design in Photoshop first. Then when the design concept is approved by the client, I use Typecast for the final tweaks to typography and perfections.

  For me, Typecast is a tool to perfect your typography on normal sites and to craft your typography from scratch on content-heavy sites. When you do so, it makes a huge difference.

  What did you enjoy most about designing in Typecast?
  The best part of Typecast, for me, is being able to hand my front-end developer the typography CSS and a style guide knowing that my typography will alway be perfect without me putting in any further effort. I get to do what I love about my job, design, rather than spending hours on style guides and inside Web Inspector.

  Now that you’ve tried it out, do you think you’d use Typecast again?
  I imagine we’ll be using Typecast on all client projects from now on. It brings that element of typography sex that no other design programme (other than InDesign) seems to be able to rival right now. The web needs to learn how to do typography right, because, after all, we are designing to display content.

  It’s exciting to see designers like Simple as Milk using Typecast on real projects. That puts us one step closer to making the web a more beautiful place! We wish them all the best and a future of ass-kicking, Vitamin D goodness.

  Using Typecast on a project too? Let us know! Email hello@typecastapp.com or post a pic and tag it #typecast so we can feature you in our Gallery too.

  ]]> Typecast News 2012-03-30T12:54+00:00 http://typecast.com/blog/versioning-and-more-colours-for-you/?utm_medium=rss http://typecast.com/blog/versioning-and-more-colours-for-you/?utm_medium=rss#When:10:41Z This week we’ve released two features that will brighten your designs and put your previous typographic decisions within easy reach.
  
  ]]> The first is a new feature that loads of you have requested. The second is an upgrade we thought you’d find extremely useful and great fun to use.

  Revision history

  Typecast has always saved your work for you. But sometimes a change of heart or a client request means you need to review or roll back to a previous version of your design. So we’re really excited to give you the ability to save and view versions of your work! This should make it a lot easier to reconsider previous decisions and quickly revert to earlier drafts. Here are the ways your work can be saved:

  • Manual saves – You can purposely save a version of your project whenever you want by hitting ‘Save’ at the top of your screen.
  • Auto-saves – Typecast will also automatically create a version of your project every 15 minutes (unless you’ve made no changes during that period).
  • Closure saves – Like always, when you sign-out, Typecast will save that version for when you return. You don’t have to hit ‘Save’ unless you really want to.

  To view a saved version, click ‘Previous Versions’ on the toolbar. This will open a pop-up where you’ll see each version listed numerically on the left.
  

  Those with a flag are the ones you’ve saved. Those with a clock icon are the auto-saves. Click on any version to preview it. If you’d like to replace the version you’ve been working on with the saved version you’re previewing, just hit ‘Update to this Version’ button. Your working version will be auto-saved and the version you selected will appear on your canvas. You can always change it back by repeating those steps.

  An awesome HSB colour picker with alpha

  When we built our original colour picker, we included 255 preset colours and the ability to specify a hex code. But you’re creative people. 255 colours can’t hold you. Your typography needs chromatic freedom! So we’ve made it better by adding more control and options.

  In our new colour picker, we’ve replaced the presets with this advanced colour pallete.
  

  Not only does this give you a wealth of choice, but you can also now adjust colour opacity with our alpha slider. You pick your colour, slide the alpha till you’re happy, and Typecast will generate the correct RGBA value for you.

  We really hope these colour improvements and access to your design timeline make designing in Typecast easier and give you a greater sense of freedom and control.

  Come log in now and try them out for yourself!

  ]]> Typecast News 2012-03-27T10:41+00:00 http://typecast.com/blog/new-slides-and-a-facelift/?utm_medium=rss http://typecast.com/blog/new-slides-and-a-facelift/?utm_medium=rss#When:14:00Z We’ve got new content to help you get started using Typecast and have given our blog a spring clean.
  
  ]]> Your feedback from within the app and on Twitter tells us there’s room for improvement. So most of this week’s changes focus on just that – making stuff clearer and less cumbersome or fussy.

  Getting started

  To make using Typecast easier for new and upcoming users, we recently created a What You Need to Know slide deck. It only takes a minute to go through and sets out how Typecast works. It also explains those behaviours that differ from the drawing and coding tools you use.

  

  The slides launch when new users log in for the first time. But if you’ve had an account for a while, you can open it with the link at the top right of your dashboard.

  

  The slides also appear on our new Getting Started page. This page is mainly for the benefit of upcoming users who are waiting to join our beta, but if you already have your account, feel free to take a look too! You’ll find designers explaining why they chose certain typefaces for their sample projects as well as some FAQs.

  Columns renamed

  Within the app, we’ve made a minor but important change by renaming columns. Remember Inigo Montoya in the 80s classic The Princess Bride? “I do not think it means what you think it means.” It was a bit like that.

  We realised that the term ‘column’ made most of you expect them to behave like the columns in Quark and InDesign do. So they’re now called ‘containers’ to better reflect how they actually work – like divs. This will hopefully help them make a bit more sense to everyone.

  Our blog

  As you’ve been reading this, you might have noticed our blog looks different. In honour of spring, we’ve freshened up its look and feel and hopefully made it a bit easier for you to browse. Gone is the string of full-length articles back-to-back.

  We’ve also changed the design of the sidebar to highlight our best articles (not just latest ones) more clearly and give you more details about the additional resources we’re recommending. You’ll also find a new ‘Recommended Viewing’ section with videos by industry experts on design and typography. First up are talks from this year’s Build conference by Tim Brown, Wilson Miner and Jason Santa Maria.

  Footer changes

  Finally, we’ve updated the site’s footer – moving some items around, adding gallery thumbnails and getting rid of some repetition.

  That’s all for this week.

  Make sure to check in next week for a preview of what we’ll be working on in April!

  ]]> Typecast News 2012-03-22T14:00+00:00 http://typecast.com/blog/4-simple-steps-to-vertical-rhythm/?utm_medium=rss http://typecast.com/blog/4-simple-steps-to-vertical-rhythm/?utm_medium=rss#When:10:07Z Working to a grid can be hard. But our new baseline feature simplifies it a whole lot. See how our designer Chris used it to set a literary classic.

  

  ]]> Firstly, using HTML and CSS to code means a lot of jumping back and forth and refreshing to visually confirm things. And even when we evade coding and work in design packages, it requires maths – not everyone’s strong suit.

  The upshot is:

  • either we don’t bother using baseline grids and our vertical rhythm suffers; or
  • we create our grid and build to a vertical rhythm, but then constrain our experimentation with type because changing fonts and sizes means amending our maths to amend our grid.

  At Typecast, we want designers to spend their time creating, not crunching numbers. So our new baseline feature gives you a visual to compose by and helps you get vertical rhythm – all without the mathematical gymnastics.

  To show you what we mean, we had our designer Chris create a sample project that put our baseline feature to work and established vertical rhythm in four basic steps.

  Rhythm and why it matters

  Rhythm is just a repeated pattern. The more consistent the pattern, the better the rhythm. In music, it’s the structure that ties all the different instruments together. Even if the notes are correct, a song with an inconsistent rhythm is pretty hard to listen to.

  In design, vertical rhythm is the structure that guides a reader’s eye through the content. Good vertical rhythm makes a layout more balanced and beautiful and its content more readable.

  The time signature in sheet music visually depicts a song’s rhythm, while for us, the lines of the baseline grid depict the rhythm of our content and give us guidelines to align text and objects to.

  Designing to a baseline in 4 basic steps

  In Typecast, achieving a good vertical rhythm can be pretty easy. It all boils down to four basic steps. Here’s what to do:

  1. Choose your fonts & sizes

  Start by setting the hierarchy for your main content elements. Chris designed with Trade Gothic and Adelle and set his text sizes using a modular scale of 1.618 (the golden ratio).

  

  The typographic hierarchy set to a modular scale

  2. Set your gridlines

  Before you can make all of your content follow a rhythm, you need to set that rhythm by defining how far apart your grid’s lines will be positioned. Base this measurement on the line-height of one of your elements. Many set theirs to the body copy/<p> because it’s typically the element used for the majority of your layout’s copy.

  When you hit the Baseline button in your project, Typecast will automatically set your grid to your body copy/<p> line-height for you. But you can easily change it if you need to – like if you prefer to work from your smallest element.

  

  Typecast’s baseline tool automatically sets your baseline to your <p> line-height

  Working from the <p> line-height suited Chris, so after a little playing around with the Typecast sliders, he decided that a line-height of 25px for his body copy looked about right and set the grid to it. This gave him a rhythmic structure to follow.

  3. Set your other vertical spacings

  To keep your layout in rhythm, you need to set the total vertical spacing for each element in proportion to your grid’s baseline measure. This means working in multiples of that value. So in Chris’ design, if every element’s line-height + margin heights = a multiple of 25, he’d have a perfect vertical rhythm. Here’s a simple example of what we mean by multiples of your baseline value:

  

  Setting cumulative vertical measurements in proportion to the grid

  The problem is, unless you’re working with only one text size, it’s rare for a page to have a flawless rhythm. Typographic contrast between your elements (like headings and copy in other columns) can disrupt it because the spacings that work best at those scales can be very different from what worked for your body copy.

  Chris’ heading is a good example of this. It’s 42px. He initially set its line height to 50px, which is two times his grid value. But you can see at a glance that this was too much space.

  

  Although in rhythm, a line-height of 50px creates too much space in the heading.

  Chris felt that 40px was a more ideal line-height for it, and by ‘ideal’, we mean what looked best to his design eye for that text size and that line length. But at 40px, the text didn’t sit exactly between the lines, plus it put the body copy off rhythm.

  

  A more appropriate line-height for the heading pushes the body copy off rhythm

  As Robert Bringhurst explains in The Elements of Typographic Style, interruptions like this are ok as long as we resume the rhythm afterwards:

  “Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly [spaced] lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”

  This is where Typecast’s baseline tool becomes super useful. It lets us follow Bringhurst’s lead PLUS forget the maths! You just choose the line-height that looks right to you, and then place your cursor in the margins’ value fields. When you press the up and down arrows on your keyboard, Typecast will automatically round the value to the nearest grid multiple, which will then push or pull your body copy back into rhythm.

  

  Heading line-height set at 40px, with margins pushing body copy back into rhythm

  4. Align your other columns

  So that’s our inline rhythm sorted, but what about content in other columns? How do we make sure it aligns to our main copy?

  You can use a technique called incremental leading (or incremental line-height in our case) to make it synch with your rhythm. Here’s our side column with 14px text. Spacing every line to align with the grid just didn’t look right.

  

  Adjacent copy set to a perfect rhythm can sometimes end up too widely spaced

  So Chris used incremental leading to make every fifth line sit evenly between the gridlines. He did this by using the line-height sliders to reduce the line-height and watching until it:

  • looked ‘right’; and
  • re-aligned to the grid.

  In this case, it looked right and re-aligned to every fifth line at around 20px.

  Incremental leading allowed him to choose a more appropriate line-height for the content’s font size but still keep his his column copy in overall rhythm with the rest of his layout.

  

  Incremental leading can be used to align column copy to the main copy

  The impact of vertical rhythm

  Here are Chris’ designs with and without a baseline applied. At a glance, the difference between a consistent and inconsistent vertical rhythm can be visually subtle. But the rhythm can have a significant impact on readability, readers’ eye fatigue, etc. So it’s worth taking the time to make your rhythms better.

  However, like all the tools at our disposal, a baseline grid is a means to an end. Sometimes you need to break the grid and use your judgement to get a design to ‘feel right’, and that’s ok; some great songs contain the odd change in tempo – it adds a bit of drama. The ultimate goal is improved readability, achieved through a more consistent vertical rhythm.

  Try our baseline feature and see if you notice a difference in your designs.

  You can also learn more about baseline grids and vertical rhythm in these great articles:

  Setting Type on the Web to a Baseline Grid by Wilson Miner
  Compose to a Vertical Rhythm by Richard Rutter

  ]]> Typecast News 2012-02-21T10:07+00:00 http://typecast.com/blog/new-this-week/?utm_medium=rss http://typecast.com/blog/new-this-week/?utm_medium=rss#When:16:19Z It’s a new year, and we’ve got renewed energy! So we’ve ushered in 2012 with a surge of features, including some of the best fonts on the web and better ways to shape how you present them.
  
  ]]> These latest changes should make Typecast even more useful and enjoyable to work with by providing:
  • better design control;
  • more convenience; and
  • greater stability.

  So without further ado, here’s what’s new and improved for you.

  Hundreds of fonts

  We launched our beta with over 100 of the most popular web fonts, but this is just the tip of the iceberg. You can now add fonts from the full Typekit library. Just use the text field in our fonts menu as a search box. With this you can preview more than 700 Typekit font families (with 2,728 variations!). And we’ll be adding our other partners’ libraries soon.

  

  Searching font libraries from within Typecast.

  Relative units

  We’re big fans of designing with ems. They allow us to create resolution-independent layouts, and they scale nicely because they work based on the browser’s font size. So in that sense they are a typographer’s best friend.

  Now you can set your text, line height, margins and spacing in ems. We’ve also thrown in percentages. Or just stick with pixels. Whichever feels right to you.

  

  Typecast now includes em and percentage measurements as well as pixels.

  Expanded style control

  To give you more flexibility as you decide on your typography, you can now duplicate and rename styles as well as delete custom styles. ‘Duplicate’ and ‘rename’ should give you a bit more scope to experiment and more easily mix and compare combinations. Then just ‘delete’ to clean up your style sheet once you’ve settled on your choices.

  

  Duplicate, rename and delete styles to experiment with type.

  Style shortcuts

  A number of you said you’d like to be able to set your own base styles on projects rather than work from Typecast’s defaults each time. To help with this, we’ve added a ‘Duplicate Project’ button. It’s handy if you want to create a template to use as your starting point for each new job.

  

  New ‘duplicate projects’ feature makes it easier to set your own baseline styles.

  Password control

  It’s a minor but important improvement. When you forget your password, we’ll send you the autogenerated, impossible-to-remember replacement like always (like TY&COJm4), but now you can change it to something human in the new Accounts section.

  Bug fixes

  Previously, some of you with firewalls were unable to create or open projects in Typecast. This should be all sorted now, but if you still run into problems, definitely let us know.

  There were also some known problems with pasting in copy, which we’ve been able to improve. You should experience far fewer error messages with this action now.

  New status blog

  We also now have a status blog where we’ll be posting news on bug fixes, status updates, notes on releases, etc. So if you like to be the first to hear about changes, even small, incremental ones, maybe add it to your feeds.

  That’s all for now. If you run into any problems with the new features, please let us know right away by either using the ‘Give Feedback’ link in the top right of the interface or by emailing us at hello@typecastapp.com

   

  ]]> Typecast News 2012-01-24T16:19+00:00 http://typecast.com/blog/a-holiday-update-from-typecast/?utm_medium=rss http://typecast.com/blog/a-holiday-update-from-typecast/?utm_medium=rss#When:11:11Z As seasonal festivities quickly approach, we’re working to build a present worth waiting for.
  
  ]]>

  We know some of you have been too. So it’s with a twinge of holiday blues that we announce a postponement. But only a twinge, because there’s good news too.

  Like Santa’s elves, our designers and developers have been cheerily working away on new features, bug busting and adding more web fonts, fuelled by a steady diet of Hershey’s kisses, macaroons from the city’s Christmas market and lashings of tea. But like the North Pole, no toy makes the sleigh without passing quality control. So we’ve been scrutinising our app in light of user feedback, system reports and all of the wonderful input we’ve received from those of you we’ve met in person.

  Our QA elf’s verdict? Typecast is darn promising, but it still has too many rough edges for our liking. We can do better. So we’re pushing back our public launch. We figure it’s better to give an awesome present late than give an ok present that ends up at the bottom of the toy box.

  To the sanding & finishing department

  Over the coming months, we’ll be refining Typecast to make it a tool that’s easy to use on real projects as part of your everyday design process , not just one that’s ‘promising’ or fun to play around with using sample copy.

  Planned improvements include:

  • better stability (we’re going to sort out those error messages);
  • more fonts for you to choose from; and
  • a way to test rendering on various devices.

  We believe that getting these right will make Typecast a truly wicked tool for experimenting with web fonts, perfecting your typography and rapid prototyping – whether you currently design in the browser or prefer using your offline design apps.

  So many people on the ‘nice’ list

  For those of you using the beta, it will be business as usual. You will still be able to access your account plus enjoy these improvements as they roll out. If you signed up for the original Typecast app at typecastapp.com, we’ll be asking you to transfer your account to the newer beta this week. Then in January, we’ll add another batch of people from our waiting list.

  We’d like to thank all of you for your encouragement, enthusiasm, positive feedback and candid criticisms. They’ve been terrific motivation for our team and have driven these improvements.

  Finally, we’d also like to thank everyone who requested an invitation and has been waiting patiently for an account. We would never forget you. We’ll continue to release accounts in small batches so we can manage everyone’s feedback efficiently. In short, when we’re ready for you, we’ll get Typecast down your chimney straight away.

  Until then, it’s back to the workbench for us and a very happy holiday season to you all!

  ]]> Typecast News 2011-12-19T11:11+00:00 http://typecast.com/blog/video-of-typecast-live-demo/?utm_medium=rss http://typecast.com/blog/video-of-typecast-live-demo/?utm_medium=rss#When:10:53Z Come watch the recording of our second webcast and see how Typecast is coming along.

   

  ]]> Thanks to everyone who tuned into our second screencast. We found it hard to nail a time that would suit everybody (sleep is for the weak, people), so we had to create a special time capture device that would enable designers from the past, present and future to tune in.
  
  It didn’t work though, so we just recorded it:

  The video starts with a bit of an overview of the thinking and ideas behind Typecast, followed by a demonstration of the app in action, and a Q&A session at the end.

  We show how you can use Typecast to:

  • design from the content out;
  • use a semantic structure in your design;
  • make your content beautiful using typefaces from a range of font services;
  • finesse your typography by tweaking things by eye.

  Give us your feedback

  We want to make Typecast incredibly useful and really value any feedback you have. Would you use Typecast? What barriers or objections would prevent you from getting started? If Typecast was magic (which it almost is) what would you like it to do?
  
  We’ll be keeping tabs on the comments here so do let us know what you think.

  ]]> Typecast News 2011-11-10T10:53+00:00 http://typecast.com/blog/tips-for-choosing-type/?utm_medium=rss http://typecast.com/blog/tips-for-choosing-type/?utm_medium=rss#When:12:00Z Choosing type isn’t easy for everyone. So we spoke to talented typographer and Fonts.com Creative Director Steve Matteson to get some simple advice on what to think about when deciding.
  ]]> If you don’t know Steve Matteson by name, we bet you know his work. If you’ve ever used Windows Vista, an Android phone or the original Xbox and Xbox 360, you will have seen his typographic creations at work. Segoe, Droid Sans and Droid Serif are among his more recent designs, but he also contributed to the well known Arial^®, Times New Roman^® and Courier New^™ font families.

  Choosing a Web Font

  Typography is tricky. There are tens of thousands of families to choose from, with tens of thousands more weights and styles available. You can’t possibly review and evaluate each one’s suitability. Likewise, as with other design elements, the feel each evokes is subjective and can also be influenced by colour, size and the other elements it sits alongside. But despite the subjectivity, according to Matteson, there are some non-subjective clues to look for to help you decide if a font will work on the web.

  Size

  Firstly, size matters. “Choosing a typeface that works well at the intended size is the most difficult part,” says Matteson. “Some display or headline fonts work fine in print at 18pt but become problematic on screen. For example, on the web, a fashionable ultra light sans serif may not look very good until 48px or bigger.”

  Readability & Spacing

  Secondly, while screen typefaces are less challenging than they were even five years ago, and technological developments have improved clarity at smaller screen sizes, readability can still be problematic with some typefaces, and readability should be your paramount concern.

  So what are the clues that a font will work well at a smaller size on screen?

  “The openness and proportions of the apertures of lowercase letters (for example the opening of an e, a and c) are crucial for good reading,” says Matteson. “Some sans serif typefaces, such as Helvetica and Eurostile, are particularly bad for reading in text because of their tight inter-character spacing and closed forms.”
  If you get it right, you can create a measurable difference. “I recently did some work with the aviation industry to improve navigational charts,” says Matteson, “ and a switch from geometric sans serifs to grotesque sans serifs created a 13% increase in reading performance.”

  Topping Georgia

  Matteson also points out that there’s an added challenge when you’re replacing an existing, readable, web-safe font in use, like Georgia. The replacement needs to be well-crafted enough to not degrade the reading experience. “A typeface like Georgia was built very well for screen, and there are only a few existing designs that exist that will stand up to the reader’s expectations if you change it,” he explains. In these situations, he finds it helpful to use a web font service that lets you to experiment and compare. This helps avoid big investments in fonts up front that either don’t work across all browsers later on or don’t introduce an improved or equal reading experience when compared to its predecessor.

  Designing Type

  Although designing with web fonts is a relatively new phenomenon, it turns out the creation process for typography remains steadfast. “The process itself hasn’t changed,” says Matteson. “I always design types with a purpose in mind because they are, principally, tools to get a job done. If the job is to make a good web text face, then you test it on the web at the sizes you intend to have it used. And since web browsers render typefaces in slightly different ways, we need to test our designs under each of those conditions. But we would have always done the same when designing print typography, testing it instead in those conditions: on posters, or books, or glossy magazines.”

  So while it’s common to think of print type and web type as completely different beasts, and while web type does introduce some unique considerations for a designer, it’s more new, less different, and Matteson offers this little reassurance to anyone feeling insecure or intimidated about designing with web fonts.

  “There is a parallel to the ‘old world’ of print” he explains. “Good screen legibility is really just a print typographer’s intuition played out in electronic form. Once, printing press speeds, inks, applied pressures and paper types (like newsprint vs card stock) had an effect on how good a typeface would look. Now, it’s browser variations and screen resolutions that affect rendering. But good type is still good type.  It’s just a different generation of designers who need to hone their skills and intuition how well their typography will read.”

  Typecast lets you style over 23,000 web fonts by eye and check for legibility and readability right in the browser. Watch our creative director explain more, or

  Try Typecast now to give it a go.

   

  ]]> Typecast News 2011-11-04T12:00+00:00 http://typecast.com/blog/designing-with-web-fonts/?utm_medium=rss http://typecast.com/blog/designing-with-web-fonts/?utm_medium=rss#When:13:31Z We created Typecast to make working with web fonts easier. Here’s what we’re doing to make ease a reality.
  ]]> Your favourite typefaces from the best font services

  We believe good fonts are worth paying for. But we also think it should be easy to experiment with typefaces you haven’t worked with before.

  Typecast includes fonts from the web’s best font providers: Typekit, Fontdeck, Fonts.com and Google Fonts. You can design with their fonts even if you don’t have an account with the service. Just sign up and pay for the fonts you use before adding them to your site.

  During our public beta, you’ll have access to a curated selection of beautiful typefaces like Myriad Pro, VAG Rounded and Neue Helvetica. We’ll add more fonts based on your feedback and requests.

  

  A selection of the typefaces available in Typecast

  Finesse and control over typography

  Typecast offers the control of hand-coding without the complexity. You can design by eye, adjusting properties like line-height and letter-spacing visually. It’s simple to try different font combinations, achieve great vertical rhythm and develop a beautiful colour palette.

  You can see live changes to your design without getting your hands dirty with code or having to refresh your browser.
  

  Where available, we’ve added a range of weights for each typeface

  Avoid confusion with an effortless type specimen

  Design is a collaborative process.  We want the effort you invest in your design to pay dividends by helping you share it with the rest of your team.  As well as valid HTML & CSS freshly baked and ready to go, Typecast generates a helpful style guide that documents the fonts, colours and styles created in your design.

  You can share a tangible record of your typographic choices, show progress and see the completeness of your design – handy for working with a developer or a client presentation.

  

  An automatic specimen containing elements you’ve styled

  Get involved

  Great web apps are never finished. Typecast is still very much a work in progress, so we’d love to get your feedback on our ideas.

  We’ll be launching our public beta in early November. Any feedback you can offer will make Typecast a better and more useful tool.

  Until then, you can catch us on Twitter or comment below to tell us what you think.

  ]]> Typecast News 2011-10-13T13:31+00:00 http://typecast.com/blog/our-first-screencast-thanks-for-tuning-in/?utm_medium=rss http://typecast.com/blog/our-first-screencast-thanks-for-tuning-in/?utm_medium=rss#When:13:33Z Missed our first webcast of Typecast in action? Here’s a summary of what you missed and answers to some of the questions we received from viewers.
  ]]>

  Thanks to everyone who joined our live screencast yesterday!

  (Miss it? Fear not, we’re having another one)

  It was great to finally show what we’ve been working on for the past few months. We were bowled over (and a little relieved) by the feedback we got, both during the screencast and on Twitter:

  https://twitter.com/typographica/status/123438837253939201

  https://twitter.com/cssboy/status/123433698652729344

  https://twitter.com/opentype/status/123436790223872001

  Some answers to your questions

  There were a lot of great questions asked during the screencast,  and we’ve rounded up some of the main queries here:

  When will we get our hands on Typecast?
  We’re planning to open up the public beta in early November, and launch the service fully in January 2012. if you’ve requested an invite already, you may get access a week or so earlier, so keep an eye on your inbox!

  How much will Typecast cost?
  Accounts will be completely free during the public beta.  We want Typecast to be affordable to designers everywhere, so a typical account after launch will cost around $15 a month, with the option to upgrade to a Pro.

  Will I be able to work with multiple projects in Typecast?
  Sure, but you should really take it easy. Take the afternoon off, you’ve been working too hard.

  Can we talk publicly about this demo?
  Of course! We’d love to hear what you think of what you’ve seen so far, and we’ll be releasing more sneak peeks and videos over the next few weeks.

  Which font services are supported?
  The public beta will launch with a hand-picked selection of the best typefaces from Typekit, Fontdeck and Fonts.com. We’re planning to include favourites like Avenir, Bliss, VAG Rounded and Proxima Nova, to name a few.
  

  We’d love to add more typefaces and services in the future, so let us know what you’d like to see!

  Will Typecast support relative units (ems and %) as well as absolute units (px)
  Definitely. We think relative units are the way forward, and hope Typecast will save you having to worry about the scary maths they can require.

  Will Typecast help me design to a baseline grid?
  We included a very basic baseline grid feature in the early prototype, but when we tested it with designers they found it more confusing than helpful. We’ll be reintroducing the baseline feature as soon as we’re sure we’ve gotten it just right.

  Does Typecast support multiple font weights, true italics and kerning pairs?
  Yes. Typecast uses your browser’s rendering engine to display fonts exactly the way they would appear on a live site. So if the font contains multiple weights, true italics and kerning pairs – and your browser supports them – you’ll be able to use them in Typecast!

  Also, even if the font doesn’t contain multiple weights or styles you’ll still be able to render it as faux-bold and faux-italic. We won’t judge you… honest.

  By Popular Demand: Another Screencast

  https://twitter.com/scott_riley/status/123435878705147904

  Timezones can be tricky, and we’ve heard from a lot of folks who were disappointed they weren’t able to join the screencast, so we’re going to do another one next Thursday 20th October. You lucky, lucky people.

  Spaces are limited, so if you’d like to join us let us know ASAP in the comments below. Also let us know what time (and time zone) would suit you best and we’ll try and pick a time that suits most, if not all, people.

  ]]> Typecast News 2011-10-11T13:33+00:00 http://typecast.com/blog/striving-for-craftsmanship-in-web-design/?utm_medium=rss http://typecast.com/blog/striving-for-craftsmanship-in-web-design/?utm_medium=rss#When:13:37Z Beautiful, consistent and realistic designs are possible when we choose the right fonts, work with real content and reduce team friction.

  

  ]]> This summer, we were asked two questions that deserve a public response: why are you creating Typecast and why is it useful? We’d like to answer these questions by sharing our perspective on the challenges facing web designers today.

  

  We’ve found that designing with web fonts, using real content, and in a responsive way is difficult and time consuming. To design for the wider web, we need tools that create space for craftsmanship. We think Typecast can do this by making it quicker and easier to design in the browser.

  We want to help you:

  • use the right fonts for your project;
  • design with real content;
  • publish your design as a standards-compliant prototype.

  Craftsmanship

  We believe that design for the web is about striving for craftsmanship. Our work should exhibit care for our users, and for the web as a whole. How we perform affects our reputations, our clients’ success and how the emerging discipline of web design is seen by others.

  Unfortunately, craftsmanship is expensive. It takes time to do things right, yet most of us work to a deadline. We rarely have enough project time to focus on those fine details that distinguish good design from great design.

  The web doesn’t need any more mediocrity. But we do need a tool to make great design on the web more attainable. We know from speaking with designers we respect that even a good design process is horribly inefficient.

  That’s why we’re creating Typecast.  We want to give you more time to be an awesome designer, by helping you spend less time on manual changes, re-work and hassle. 

  Use the Right Fonts for Your Project

  Without textual content, much of the web is meaningless. Therefore, typography is a vital link in any design system, connecting ideas between content and presentation. A good typographic foundation is essential and deserves a place in our projects from the outset.

  
  

  Web fonts represent a promise of creative expression. But finding, previewing and designing with web fonts is, at best, frustrating. Creating design mockups with web fonts is a real problem if you don’t have a desktop version of the font.

  Many of us resort to using screenshots of web fonts in Photoshop and Fireworks to represent how a website might look. Others spend hours or days hand-crafting HTML prototypes to show how the typography will perform in the browser.

  We believe that you should be able to design with the right fonts from the very start of your project. So Typecast makes it easy to quickly test font combinations, establish a good vertical rhythm and design in relative units without needing a calculator.

  Design with Real Content

  We believe it is better to design from the content out. To use lorem ipsum relegates design to mere visual decoration. Content and design are not independent tracks to be merged at the end, but two facets of the same creative problem.

  But designing with real content is messy. Pasting content from a Word doc into Photoshop/Fireworks is laborious and time consuming. Keeping content up to date as a design progresses can be equally frustrating.

  We think that great design comes from working collaboratively and forging a genuine partnership with writers and content strategists. We should make it simpler to create meaningful content as part of the design process, then iterate and refine the content as the design develops.

  For anything more than the most straightforward of sites, sharing content using Word and Excel can be hugely frustrating. We think Typecast should help writers and content strategist provide (and update) real content for you to design with, saving time later on.

  
  

  Testing Typecast on live projects has proved promising.

  Responsive Web Design Means Prototyping

  Responsive web design represents an attractive promise: presenting content in different ways, depending on the capabilities of the viewing device.

  Creating a responsive design means designing for an infinite canvas and resolution independence. This focus on designing for the wider web makes the concept of a fixed layout presented in a design comp less relevant. It becomes more important to produce a visual language that will perform well in different states.

  It does away with the production of beautiful drawings to be converted from bitmap graphics into finished pages. And its much easier to judge how things will perform in different states if we actually design in those states.

  This is Typecast’s greatest advantage. It lets you design, iteratively refine then provides a realistic and reliable what-you-see-is-what-you-get experience.

  This appeals to a lot of the designers we spoke to who are moving to browser-based prototyping earlier in the design process to allow for more iterative refinement.

  Summary

  The role of tools like Typecast is to let designers focus on the parts of a project that matter most. We want to support elegant typography, compelling content and refinement through iteration. Design is a collaborative process and by eliminating friction from the design process we hope to help other designers craft beautiful, realistic and consistent designs.

  We want to create something that other designers find useful and would love to hear what you think on twitter.

  ]]> Typecast News 2011-09-30T13:37+00:00 http://typecast.com/blog/status-update-progress-and-roadmap/?utm_medium=rss http://typecast.com/blog/status-update-progress-and-roadmap/?utm_medium=rss#When:13:34Z Here’s a look at the lessons we learned over the summer and what’s next for Typecast.
  ]]> We’ve been working through the summer to take on board all your feedback and make Typecast a better product.  You’ve told us that it has the potential to be an awesome, useful tool and we’re doing everything we can to live up to that.

  Lessons learned

  We’ve gathered a huge amount of insight into the problems that designers face when working with web fonts and have been testing and refining our ideas on where Typecast fits into the design process. 

  We think the web is fundamentally a typographic medium.  We see Typecast as a tool that allows designers to bridge the gap between messy experimentation in drawing tools (Fireworks, Photoshop) and prototyping (in the browser) by designing with web fonts and real content.

  

  We Are Swift holding page designed and built by Typecast user Chris Swift

  As an aside, we owe a big shout out to the guys at Intercom.  Their customer feedback tool has been great at helping us to listen and respond — definitely worth checking out.

  Moving forward

  One of the main lessons we learned from your feedback is that to design by eye, the controls need to be both precise and smooth.  Performance matters.  We quickly realised that in our haste to produce a prototype we could learn from, our early code wasn’t good enough to build on long-term.  We’ve re-written Typecast from the ground up to create a very responsive, browser-based app.

  We won’t be able to build everything our beta testers have asked for immediately, but our roadmap is bursting to the seams with good ideas.

  

  A snapshot of our development roadmap

  Our next major goal is to release a public beta in November.  Between now and then, we’ll be sharing a sneak preview of progress with the beta list every couple of weeks.  To show what we’ve been working on in a bit more depth (and get your feedback), we’re hoping to hold a live screencast of our internal build in the next couple of weeks

  We’ll also write more about the principles behind Typecast and the ideas on our roadmap over the coming months.  You can keep up to date by following Typecast on Twitter or registering for the beta.

   

  ]]> Typecast News 2011-09-27T13:34+00:00 http://typecast.com/blog/an-early-typecast-prototype/?utm_medium=rss http://typecast.com/blog/an-early-typecast-prototype/?utm_medium=rss#When:13:37Z We need to pause beta invites for a bit to focus on the next phase of our release. But while we work on improvements, enjoy a peek inside our current prototype.
  ]]>

  The idea for Typecast has been kicking around since mid-2010 when we realised that there was a gap forming between the gloriously messy design exploration stage, and the serious task of hunkering down to prototype something in the browser.

  Earlier this year we put together a prototype web app to solve this problem for ourselves.  You can see in the video that it lets you load web fonts, style content by eye, then publish your work as HTML & CSS.  When we showed it around at the Ampersand web typography conference in June, we discovered very quickly that we weren’t the only ones who could see the need for a better way to design with web fonts.

  Since then, we’ve been talking to a small group of beta testers to better understand the challenges designers face when working with web fonts

  We’ve stopped adding new accounts to the beta for the time being so that we can focus on the next release. We’ll be blogging about the lessons we’ve learned from your feedback and our plans for the future over the coming weeks.

   

  ]]> Typecast News 2011-09-19T13:37+00:00