Entries Tagged as 'Web Typography'

The NEW Web Typography

SlideShare Best Presentation of the Day 10.27.2011

SlideShare Best Presentation of the Day 10.27.2011

2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.

on SlideShare: The NEW Web Typography.

What are Webfonts?

Imagine if we lived in a world where there were only five voices, where one in every five people sounded exactly the same. That’s where we were with Web typography before today. Five typefaces have been used on virtually every website in existence—five voices to express a limitless number of ideas. Because of webfonts, the way in which we present text on a screen has changed forever.

font :: type
voice :: speech

Fonts are to type what voice is to speech. How you express your message is more than just a combination of different letters, numbers, and symbols, known collectively as glyphs. The shape of those glyphs can say as much as the words themselves.

Consider the simple phrase “I love you.” Devoid of the context of speech, you dont have any idea what it really means. Is it a passionate “I love you,” or a desperate “I love you,” or a sad “I love you”? Now consider the same phrase expressed using different typefaces:

Do you see the difference now?

There are an estimated 150,000 fonts available for typographic design, 150,00 potential voices. So why only five typefaces on the web?

Web typography is the combination of HTML text using CSS to style that text. It relies on the fonts available on the end users computer, which, until the last few years, meant only fonts pre-installed by the manufacturer or installed by the users themselves.

Webfonts are a recent development in Web design, allowing designers a potentially unlimited palette of fonts to choose from.

Read the full text of my article What You Need to Know About Webfonts: Part 1 at CreativePro.com »

Envision Yourself at WebVisions

If you’ve ever wanted an in-depth crash course in web typography, here’s your chance. I’ll be presenting a half day marathon workshop at WebVisions in Portland this May to help you understand the NEW Web Typography. My workshop covers recent advances in technology and focuses on case studies that that provide a framework and techniques for successfully implementing online typography. Designers will see how they can use the new Web typography to set their work apart from the rest of the herd.

What you’ll learn:

  • How do I use Webfonts?
  • How do I find Webfonts?
  • How do I choose webfonts?
  • Where can I find inspiration for new Web typography techniques?
  • What are the technologies that have shaped the evolution of Web typography?

In addition to me, there’s other great stuff to do. WebVisions is a nationally recognized conference exploring the future of Web and mobile design, technology, user experience, and business strategy.

  • A great selection of workshops with me and others.
  • Keynotes by Douglas Rushkoff and David Armano.
  • Shorter, punchier sessions on the event’s Main Stage, and BarCamp style presentations in the Design, Tech, DIY and Business Pods.
  • Fun parties and networking events like the Stumptown 40, The Webvisionary Awards with Presentation Karaoke, A Meet the Speakers Mixer, and the famed wrap party.

Register before April 5th to get the Early Bird rates »

Vote For Me to Speak @SxSW

SXSW Panel Picker

SXSW Panel Picker

I want to spread the good word of Web typography again to the fine folks attending South By South West (SxSW) at the 2011 event, but I need your help. The first round of selection is (literarily) a popularity contest based on a thumbs up or down by the public at large.

I’m proposing a session on Web typography (surprise, surprise), recapping the basic technologies, but then examining directions those new technologies are taking us. Here’s a bit from the intro:

As the dust settles from these changes, a new style of Web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. This session begins by recapping recent advances in technology and then focuses on case studies at the borders of online typography. Designers will see how they can use the new Web typography to set their work apart from the rest of the herd.

SXSW Diagram

30% is up to you!

All you have to do to help me out is give my session on Web typography the thumbs up. You will have to register (don’t worry, it’s painless) and that’s it! And if you could leave a comment at the bottom of the ballot, I would be ever so grateful.

While you are there, I can also recommend a few other great panels to vote for:

Voting ends 11:59 CDT on Friday, August 27.

So, run, don’t walk to the SxSW Panel Picker and choose the best.

Me Pontificating About Web Typography and the Future of Web Design

Win a ticket to the CSS Summit!

•••THIS CONTEST IS CLOSED•••

It’s been a crazy busy few weeks for me as I finish up my new book CSS3 Visual Quickstart for Peachpit, but I’m really excited that in just over a week I’ll be presenting at the online event of the year for CSS: The CSS Summit. The summit is an online only event lasting from 9am–5pm Central Time (10am–6pm EST) brining together some of the best minds writing about CSS today to give you the inside scoop on Web design.

In addition to my own teachings on fluid web typography, you can hear:

  • The wonderful Stephanie (Sullivan) Rewis teaching the gospel of CSS and progressive enhancement.
  • My buddy David McFarland talking about CSS Animations.
  • The energetic Zoe Gillenwater helping you get effective and efficient design with CSS.
  • My sister from another mother, Desnise Jacobs helping you troubleshoot your CSS.

All of this for the low, low price of $149, and, if you act now, you can get a 10% (~$15) discount using the code CSSCRANFORDTEAGUE. You can also use the discount to get a meeting room ticket, getting 10% off the $449 price (~$45).

Wanna’ go? Of course you do, and I have two tickets to give away to two lucky readers.

How to Enter to Win Tickets

There are three ways to enter to win one of the two tickets.

  1. Follow @jasonspeaking on twitter and then tweet “I want to go to the #CSSsummit to hear @jasonspeaking» http://ow.ly/2cxRd” .
  2. Follow @fluidwebtype on twitter and then tweet “I want to go to the #CSSsummit to learn @fluidwebtype» http://ow.ly/2cxRd” .
  3. Add a comment at the bottom of this post with a link to a Web site that is using Webfonts (not using Flash or images) to create particularly inspiring typography.

Three ways to enter, and yes, you can enter all three ways once a day to improve your chances to win. The more you enter, the better your chances.

RULES: The contest starts at 12:00 PM EST, Friday, July 16th and runs through 12:00 PM EST, Tuesday July 20th. Winners will be announced later that same day. You have to be following @jasonspeaking or @fluidwebtype when the winners are announced OR have left a comment. This is the only way I will have to contact you. Only one entry per channel per day will be accepted. The judges decisions (mine) are final.

GOOD LUCK!

LIVE(ish) – Fluid Web Typography at SXSWi 2010

I was poking around the SXSW site, and realized that the recording of my session on Web typography is finally available. I had to pick through the code a bit, but finally found the file I needed to embed. For reference, I’m also embedding the slide share version of the presentation slides. It’ll almost be like being there!


View more presentations from Jason CranfordTeague.


One Week to Next10

Next10 in Berlin next week

Next10 in Berlin next week

Just a little less than a week until I’ll be in Berlin, spreading the good word about Web typography, and I’m finding I had to really rework my presentation for this audience. SXSW was full of techno and design geeks, who wanted to here the “how to’s.” I suspect the audience for Next10 are going to care a lot more about the “why’s and what for’s.” So, I’m skipping all of the code and just including an overview of what’s possible now in Web typography—web safe fonts and web font bureaus—then concentrating on what the different services offer, why Web typography is important for brand differentiation, and what to look for in good fonts.

This has been a great exercise, as it’s gotten me to think about Web fonts from a less technical and more tactical point of view, focusing on how to choose the best fonts. Also, since I only have 45 minutes to present, so had to radically cut down on my material, which I hope will have the overall effect of making this a much leaner and more focused presentation.  This is even more important since I just found out I only have 30 minutes to present at Voices That Matter in June (more on that later).

In addition to Web typography, I’m also going to be giving a brief presentation about Marriott.com, the work we did to create a “Game Changer” (the theme of next 10) for Hotel Web sites. I’ve been struggling a bit to find my focus and value add for this session. It may only be 10 minutes long, but that means I have to stay even more focused. I think I had a break through today, though. I’ll see if I still feel the same way tomorrow morning.

Heading to Berlin to Speak at Next10

Next10 Conference

Next10 Conference

I’m heading off to Berlin in mid-May to speak at Next10. The event includes over 100 high profile tech insiders speaking and is expected to draw over 1500 participants. The topic this year is “Game Changers,” and I have not one, but two, great game changers to talk about:

Marriott.com 2.0: Building the Next Generation Online Hotel Lobby

In August 2009 I took over as the Interactive Design Manager at Marriott.com. My first assignment was to launch Marriott’s new Web 2.0 face of Marriott; a game changer in the way that hotels present their front door to the world. When I started, the design was already finished and development was well under way. All I had to do was make sure it launched on time in November.  However, what I found was a product that would not work as designed. In this session, I will walk through the issues I encountered and how I worked with the designers and developers to solve them, showing how a few minor design tweaks not only allowed the site to be deployed on time, but also made it faster and more versatile.

2010: The Year of Web Typography

Fresh on the heels of my successful Web typography presentation in March at SXSW, I’m updating and expanding that work to help the thinkers at Next10. In this hour long session, I will not only show how modern Web typography works from a technical standpoint, but emphasize how businesses can use the new capabilities to help differentiate their online brand.

Use my promotional code to get a 20% discount on tickets: SpeakersFriends2010.

Help the Web Safe Fonts

Ok, first a few prezzys for you. If you haven’t already seen them, check out my list of Web Safe Fonts. These are fonts that are likely to be installed on Windows or Mac machines (or even both) and can be used by Web designers to vastly improve their typographic choices.

Help me capture the Web Safe Fonts

Help me capture the Web Safe Fonts

The second gift is a newish Firefox add-on that allows you to quickly snap full page screenshots of any Web page. I like this one even over my old stand-by, Paparazzi, because I can take my picture after interacting with the page.

Now for the kick-back. I’m trying to gather graphic font-samples of all of the Web Safe fonts, but I do not have access to a PC running Microsoft Office 2007. I have all of the Mac and cross-platform fonts, but not the ones specific to the Window’s version of Office. I need to get a screen capture of all of these fonts, so that designers can see what they are supposed to look like to make better Web designs.

Can you help a guy out?

Just install the Firefox add-on, point your browser at www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/, snap a shot o the full page (preferably with font- anti-aliasing turned on so it doesn’t look like a pig’s ear) and email me the PNG or JPEG image: jason (a) brighteyemedia.com.

That’s it. It’s that simple.

The first person to send me a complete list of Windows Microsoft Office 2007 fonts will receive my undying gratitude, credit in the list, and a big thanks you in my forth-coming book Speaking In Styles.