Quantcast
Channel: The Typekit Blog
Viewing all 514 articles
Browse latest View live

Pan-CJK Partner Profile: SinoType

$
0
0

While developing Source Han Sans, Adobe and Google worked with three different companies to bring the kind of in-country expertise we knew we would need to hit the quality threshold we had set for this typeface family: Iwata Corporation in Japan, Sandoll Communication in Korea, and Changzhou SinoType in China. Over the next couple of weeks we will introduce you to each of them.

Pan-CJK fonts can suffer from a major problem. When attempting to create a font which can be used across multiple languages, quite often regional differences are overlooked — undermining the value of the font for users in those regions. For Adobe, it was critical that we find experts to help us. One of these was Changzhou SinoType. I recently had an opportunity to talk with Curt Huang, Chairman and CEO of SinoType about their relationship with Adobe.

Curt at Berkeley

Curt Huang – Berkeley 1985

It turns out that SinoType has been a partner of Adobe’s for over twenty years. The relationship began when Curt was attending UC Berkeley in the late 80’s. Curt was in a PHD seminar in speech synthesis and recognition of computational linguistics, and became very interested in fonts when the PostScript-enabled Apple Laserwriter was introduced in 1985. As Curt tells it, “I went to my professor at Cal and told him that fonts were going to be the most important thing in computers.” Not long after that, Curt told his advisor that he wanted to return to China in order to start building Chinese fonts. His goal was to work with Adobe to build PostScript-based Chinese fonts.

Metal Type Racks

Racks of metal type which inspired Sinotype’s first designs – Image courtesy of Dirk Meyer

With his mentor’s blessing, Curt returned home and founded SinoType in 1991. They were soon creating fonts based on original metal type designs. These had been created by a master group led by Peiyuan Xie, a brilliant figure in the first generation of Chinese type designers. Curt’s company started designing their early fonts using Fontographer, and then later moved to using Adobe tools, some of which are still being used today. Their first Chinese font, STSong, was released in 1991. “I’m particularly proud that SinoType introduced PostScript fonts into the Chinese channel market. We were there well before our biggest competitors who didn’t deliver their first fonts until 1993 or later.” That first font, along with nine other SinoType fonts, was certified by the Chinese government in 1994.

Design Masters

Chinese font design masters, front row, left to right: Jincai Zhou, Huanqing Qian, Peiyuan Xie – Image courtesy of Dirk Meyer

They started small — at least by Chinese standards. The first version included “only” 6,763 Chinese characters, which is huge compared to Latin scripts, but relatively small compared to what is offered in China today. Many modern Adobe fonts run between 2,000 and 3,000 glyphs, but commonly-used ideographs in the Chinese language number more than ten thousand. Over time, SinoType expanded the offering to provide first an additional 14,000 glyphs and then started satisfying the Chinese government’s GB 18030 character set standard which requires over 27,000 glyphs. As you can imagine, the delivery of a high-quality, comprehensive Chinese font takes not only expertise, but lots of time. As such, the world of Chinese font production is very different from the design of fonts in the Western world.

State Appraisal Certificate 1994b

State Approval Certificate – 1994 / Image courtesy of Curt Huang

By 1996, Chuck Geschke, who founded Adobe with John Warnock, announced four new fonts from SinoType that would be offered in PostScript-based printers. This was an important milestone in China, as was the opening of the first Adobe Training Center in China, which focused on education for the use of Photoshop, Illustrator and PageMaker.

The rest is history. SinoType has grown today to be a company of about fifty people — which is quite large for a type foundry. Most of the twenty or so designers are located in Beijing, with the rest of the group in Changzhou. The size of the company piqued my interest, so I asked Curt what sorts of challenges he faced in helping to create Source Han Sans. He told me there were several:

“When we first scoped the project we planned to have about nine people work on the font. This clearly would not be enough. By the time we were done, the project had grown to twenty people. Additionally, we realized that even though Adobe had provided training in Beijing for the use of Adobe’s custom tools, we still needed more education. In the end, I flew five of us to Tokyo in order to get additional training for several days. Finally, very late in the development process, we found out that we needed to support specifications from various areas using Traditional Chinese, such as Taiwan. This required some pretty significant design changes. These were all challenges that we overcame.”

Tryptich

Review Meetings and Proof Sheets – Images courtesy of Curt Huang

When I asked Curt if the actual work on the glyph analysis had been daunting, he told me that it wasn’t. “In 1999, Adobe’s Ken Lunde and Dirk Meyer first started dreaming about a Pan-CJK font. They approached SinoType because they wanted to make a prototype and present it at an upcoming Unicode conference. We ended up providing the font data for that experiment. So, you see, we’ve had fifteen years to be thinking about this.”

As the supervisor of the PhD program at CAFA (China Central Academy of Fine Arts) and also the co-director of the China Typography Research Center at the school, Curt always encourages students from the China’s preeminent academy to seek first-hand experience in Chinese font design. Some of the students worked on this project. ”The students receive practical experience working on a Pan-CJK font and also get paid to do it”.

CAFA

China Central Academy of Fine Arts (CAFA)

In the end, the attention to detail brought by SinoType to this project was invaluable. Source Han Sans is available in both Traditional and Simplified Chinese. For any single Chinese ideograph used in the font, there can be as few as one glyph or as many as four. The challenge that we gave to Curt and company was to analyze each character and recommend, design, and produce the right number of characters. When I talked with Ken Lunde recently (our CJK specialist who oversaw the project), he told me that SinoType had to look closely at Japanese characters we had provided as well. “More than 1500 characters were modified by SinoType to make them more acceptable to Chinese users, but they had to be designed in a way that would not impact the usage of the font by our Japanese customers.”

I finished my discussion by asking Curt what he was most proud of in the work he had done over the years with his company. He told me that being part of the introduction of digital Chinese fonts was definitely a highlight. But he also cited today’s broad usage of SinoType fonts by leading manufacturers. “Adobe, Google, Microsoft, Apple, IBM and now even Amazon (in their Kindle products) are using SinoType fonts. Microsoft bundles ten SinoType fonts with Microsoft Office and ST Heiti, our most popular font, is used in over 70% of set-top boxes. That is about 180 million devices.”

In my opinion, that is a lot of people who could be looking at your work every day. The quality had better be high, or you are going to hear about it. I know that Adobe and Google have been very happy with the work that SinoType has done for us. It has been a pleasure working with Curt and his team.

 



New from Adobe Type: Open-sourced font development tools

$
0
0

Adobe has established a strong relationship with the open source community over the years, and the shape of it today is as robust as ever. We’ve released a growing set of open source font families on GitHub – Source Sans, Source Code, Source Serif, and most recently Source Han Sans – that we continue to update and expand. And last year, we contributed Adobe’s CFF font rasterization code to the FreeType project, and as a result Android, Chrome OS, and a growing number of Linux distributions now produce better-looking text from CFF fonts. (CFF is the Compact Font Format, used in many OpenType fonts.)

In line with those efforts I’m excited to announce that a version of Adobe’s font development tools — the AFDKO, or Adobe Font Development Kit for OpenType — is now available with an Apache open source license. This is the same set of tools we use on the Adobe Type team to design and update fonts. Recently we’ve been using the ADFKO in conjunction with Superpolator from Erik van Blokland, which provides a convenient user interface and a level of flexibility unavailable with other interpolation tools.

Superpolator is a manually-operated design tool, but since we update fonts frequently – often hundreds at a time – we need to be able to automate the process of rebuilding fonts that were built using Superpolator. So, we’ve set up the AFDKO to work with MutatorMath, the interpolation engine inside Superpolator, and we’ve worked with Erik to release this engine under the BDS-3 open source license at the same time we’re open sourcing the AFDKO.

The AFDKO has been available under a no-cost license since 2000, and its underlying code is incorporated in all the commercial font editors. Open sourcing the AFDKO and MutatorMath will lead to a new set of improvements that benefit everyone.

  • Today’s commercial font tools will get better, which will lead to better fonts for everyone. There are developers who want to help us improve these tools, and open sourcing them makes it possible.
  • Thanks to MutatorMath, we will probably also see improvements in other font tools’ interpolation features.
  • Now that we’ve made the tools available under the Apache open source license, they can also be used in FontForge (the open source font editor), which means modern fonts can be used in the many open source products that require everything they ship to be compiled using open source tools.

Much of Superpolator’s value lies in its intuitive user interface, so we expect people will continue to license the commercial tool. Similarly, we will continue to provide the AFDKO with its traditional license via the AFDKO page on the Adobe Font and Type Technology Center. The open source version requires users to download the appropriate version of the Python language interpreter and configure the tools. There are also a couple of tools in the AFDKO — checkOutlines and IS — that we couldn’t include because of patent restrictions, although we hope to work around that issue in checkOutlines in the near future.

For more details about our font development tools, documentation and release notes are available on the AFDKO page. We’re excited to release these tools in a format that can reach more developers, and look forward to seeing continued improvements to the tools we use to make type.


Working Late: Critiques with Ellen Lupton, James Victore, & Bonnie Siegler

$
0
0

We had a great time with the crowd that came for our Working Late event at Makeshift Society last night! If you’re in the New York area and haven’t yet made it to an event, there are still two more left in the series, on October 14 and on November 11.

Last night’s event couldn’t have happened without the generous participation of Ellen Lupton, James Victore, and Bonnie Siegler. We’re so glad you joined us! Thanks also to Rob Wilson, who bravely put his own MFA graduate project on the line for the critique.

Ellen Lupton

Ellen Lupton photo by Michelle Qureshi

Ellen Lupton is the Senior Curator of Contemporary Design at the Cooper Hewitt, Smithsonian Design Museum. She also serves as the director of the Graphic Design MFA program at Maryland Institute College of Art (MICA). She has authored several books on design processes, including Thinking with Type, Graphic Design Thinking, and Graphic Design: The New Basics. We’ve stocked up the Typekit library with a number of these staples! Her latest book, Type on Screen, was written and designed in collaboration with graduate students at MICA.

Books by Ellen Lupton
Books on type and design by Ellen Lupton

James Victore

James Victore

James Victore is an author, designer, and filmmaker whose work has been exhibited at the Museum of Modern Art in New York, and is represented in the permanent collections of museums around the world. He runs an independent design studio, with clients ranging from Bobbi Brown Cosmetics to The New York Times. He frequently lectures, runs workshops, and writes on the topic of design and its place in the world; we’ve included his book Who Died and Made You Boss? in the Typekit library.

James Victore work sample
Sample from James Victore’s design work

Bonnie Siegler

Bonnie Siegler

Bonnie Siegler is an award-winning graphic designer and the founder of Eight and a Half, a multidisciplinary design studio based in New York. She served as the chair of the 2013 AIGA National Design Conference, was the 2014 Koopman Distinguished Chair in the Visual Arts at the University of Hartford, and has taught in the graduate design programs at Yale University and the School of Visual Arts. Bonnie also has a weekly advice column on Design Observer where she responds to readers’ professional, ethical, or design-related dilemmas, and she tweets as @8point5b.

Stay tuned to the Makeshift Society blog for an event recap, and we hope to see you on October 14; there are still a few spaces left!


Working Late: Coworking night at Makeshift Society

$
0
0

For the third event in our series at Makeshift Society Brooklyn, we’re going to put some of the ideas from the first two events into practice and get hands-on with the creative process — specifically, in the context of YOUR projects.

Bring your computer, your sketches, your notebook, or just your brain, and get ready to discuss your work and hear about what other folks are working on during this evening of coworking, networking, and support. We’ll have tacos from Lonestar Taco and drinks on hand for fuel, and team members from Typekit, Behance, and Creative Cloud will be on the scene to answer any questions and help you get past creative roadblocks, whether software-based or otherwise.

The event takes place next Tuesday, October 14, from 7–9pm. Save your spot on the EventBrite page.

Come with friends, classmates, or on your own. We’re looking forward to seeing everyone next Tuesday!


Introducing Typekit Studio

$
0
0

It was exactly one year ago, at Brooklyn Beta 2013, that we first made the idea of the Typekit pop-up library a reality. Over the past year, the library has traveled to An Event Apart, TYPO San Francisco and Berlin, Beyond Tellerrand, Adobe MAX, TypeCon, and many other wonderful conferences.

typekit-bb-2014-1 copy

After observing how much people have enjoyed being able to interact with the physical copies of books in our library, we wanted to offer another way for people to experience what Typekit is all about. We’re adding a new component to the library setup, called Typekit Studio.

Since it’s difficult to carry around a letterpress machine or woodblock type (although we might just do it one day), we decided to find another way for people to practice printing with type that draws on more traditional techniques. The Typekit Studio is a place where people can experiment hands-on with type in different ways. For Brooklyn Beta, we’ve made rubber stamps of select Chinese and Japanese characters in Source Hans Sans, our newest typeface from Adobe. (And it seemed especially timely, with this year being the 25th anniversary for the Adobe Originals.)

typekit-bb-2014-4 copy

If you’re attending Brooklyn Beta tomorrow, we hope you’ll come back to the mezzanine level to check out the Typekit Studio. We have postcard-sized paper, so you can create a design and send it to friends, family, or yourself. Consider it a little souvenir from Brooklyn Beta’s final year. And for the bibliophiles out there, the library will be there, too!

Photos Courtesy of Ryan Essmaker


Sites We Like: Levle Frames + Wood&Faulk

$
0
0

Sometimes the everyday objects around us are so ubiquitous, we forget about the hard work and design that goes into them. In this week’s Sites We Like, picture frames and handcrafted accessories take a moment in the spotlight.

Levle Frames

Levle Frames website

Freight Sans is an elegant, tasteful heading choice on the Levle Frames website, which (unsurprisingly, considering their love for artwork) demonstrates a good eye for visual composition as well. The body text contrasts nicely in soft, sturdy FF Tisa.

Wood&Faulk

Wood and Faulk website

Fierce attention to detail is evident in the Wood&Faulk shop, and we love that this carries over to the website’s font selection as well, with the body text in thoughtful Adelle and headings in Google’s Oswald. It’s a classic sans/serif pairing, but the slight slab flavor of Adelle works beautifully against the rich product photography on the site.

That’s it for this week; share sites you like in the comments!


Pan-CJK Partner Profile: Sandoll Communication

$
0
0

While developing Source Han Sans, Adobe and Google worked with three different companies to bring the kind of in-country expertise we knew we needed to hit the quality threshold we had set for this typeface family: Iwata Corporation in Japan, Sandoll Communication in Korea, and Changzhou SinoType in China. Today we would like to introduce you to Sandoll Communication, a leading Korean type foundry.

Although Adobe possessed fairly broad knowledge in designing ideographs, we had very little design expertise with Korean, a written language that is very different from its East Asian siblings. We knew that our Korean partner would need to start from scratch to create glyphs that would not only capture the beauty of the Korean language, but would also harmonize with the Chinese and Japanese ideograph designs we were working on. Sandoll agreed to work with us.

Sandoll Building

Sandoll Building – Seoul, Korea (All images courtesy of Sandoll Communication)

Founded in 1984, Sandoll is one of the larger font foundries in Korea. From the beginning, founder Geumho Seok emphasized design quality over quantity. An established leader in the Korean font industry, Sandoll’s primary market in the past focused on corporate customers such as Samsung, LG, and Kia. However, recently they’ve become intent on creating an environment that makes it easier for more people to discover and use typefaces in Korea, with innovations such as Sandoll Cloud, a cloud font service that lowers the cost barrier for customers, and a marketplace where independent designers can introduce and sell their own typefaces. Sandoll has also started a program where they work with start-up companies and venture capital firms to provide fonts for fledgling businesses. “They can make their service look great with our fonts,” said Mr. Seok. “We think it’s one way for new companies to emphasize the value of their design or product by using quality fonts.”

Sandoll's founder, Geumho Seok at work

Sandoll’s founder, Geumho Seok at work

We sat down with Geumho Seok and Sandoll’s font evangelist Danny Lee for a quick Q&A about their business, and to hear their perspective on the Source Han Sans effort.

Gentlemen, you’ve mentioned your company emphasis on quality over quantity. What is the most rewarding aspect of designing typefaces?
We have a mother tongue, Korean. We think that the most valuable aspect of creating typefaces is to preserve our spirit through fonts. When Sandoll develops a font, we do not just design, we do not just create. We put our whole resources to express well even the small delicate details. Sometimes people would say that they can see our effort through the font. We think it’s the reason why the global companies choose Sandoll for their partner.

Team members in a design discussion

Team members in a design discussion

So, do you primarily develop for one language, or do you create fonts for several languages?
We generally develop for one language, Korean. However, there are Latin, Chinese, and Japanese characters used in Korean fonts. So we have studied for a long time to understand the principles of each language. When we developed a font for Samsung, one of our designers went to Japan to learn the fundamentals of Japanese.

What are your most popular fonts?
Malgun Gothic, Nanum Gothic, You&I typeface, and Sandoll Gothic Neo1 are the most popular fonts in Korea and we are very proud of them. Malgun Gothic is the first Korean font that adopted hinting information to support ClearType on Windows OS. And Nanum Gothic was designed for electronic displays and has become the most famous font in Korea. Our You&I typeface was developed along with Total Identity by request of Hyundai Card. They wanted to make a font which reflects the shape of a credit card. So, per their request, the design of the font looks like a card itself.

Examples of Sandoll fonts:

Examples of Sandoll fonts: Malgun Gothic, Nanum Gothic, You&I, and Sandoll Gothic Neo1

How challenging was it to work on this Pan-CJK project? Was there a specific task that was really challenging, or a problem that you had to solve?
Developing a font with Adobe tools we had never used before [Adobe’s Type Workbench 2] was a big challenge. The assembling/disassembling process to make a master design out of elements was totally new to us because we use different tools and processes. To make the Korean elements was the most difficult work, because there is no research or any reference of studying Korean strokes and points. It was a very complicated process to imagine the entire set of over 10,000 glyphs.

What special skills did you need to grow in order to create your portion of this font family?
Due to the full support from Adobe, our designer could concentrate on the project. What he just needed was stamina!

Now that the work is done and the font has shipped, what is your overall opinion of Source Han Sans?
We have done some thinking about who will need a bunch of different font styles. Designers? Corporations? To communicate with each other, people really need fonts. Unfortunately, they don’t always consider style. However when they try to express their emotion, they seek to find a font which can reflect their feelings. So, we think that if people can easily find a font that can match their current situation, people will start spending time to pick a proper font. [Source Han Sans] will be a start, and a font that will be widely used.

Proof pages used for testing

Proof pages used for testing

Is there anyone on your team that you would like to call out specifically because they were a key contributor?
Everyone is a valuable person in our company. These days Soo-young Jang, in our design team, is becoming a key player and contributor. He has participated in the Pan-CJK project as the main designer. It’s quite a long project. During the project, and even after, he tried to share his experience and knowledge with other members whenever he had time. He probably has learned how to collaborate with partners during the project. It may give him an idea that collaboration is the best solution to work well with colleagues.

Is there a defining characteristic to your company that you feel makes your company unique?
We have lots of departments at Sandoll. The most important thing in Sandoll is the harmony among people. Sandoll has a 30-year history. When we recruit a new employee, the first thing we consider is personality. The reason why Sandoll remains alive as a leading font foundry is because of people.

In many cases, our Western readers may not have heard about your company. What key information can I share with our readers that you would like them to know about?
30 years of experience. Over 500 font styles. Marvelous results with global companies. Leading font foundry in Korea. Those are some words that can reflect Sandoll’s fame. However, the best description of Sandoll is, “We build fonts.”

We Build Fonts!

We Build Fonts!


Sites We Like: Fans Corner & Simply Sport

$
0
0

Sports fans, your week has arrived. From the club football fan community to sports media marketers, this week’s Sites We Like are all about the love of the game.

Fans Corner

Fans Corner website

A hub for football fans all over the world, Fans Corner goes all in with Museo Slab for its website typography. The slab serif works beautifully in big display size — that “C” really shows off its character nicely — and also scales down neatly for body text.

Simply Sport

Simply Sport website

We don’t often see the art-deco-inspired Le Havre used as the sole typeface across an entire website, but by mixing up the weights creatively, Simply Sport pulls off a unique page design with a lot of grace and energy.

That’s it for this week; share sites you like in the comments!



November Speaking Engagements

$
0
0

This November, a few of us from the Typekit team will be making conference appearances from California to Germany and Portugal.

Antique Map of the World c 1570

(There are tickets available for all of these events at the time of posting.)

Internationalization and Unicode Conference

3-5 November 2014 | Santa Clara, California, USA
Registration

In his talk “Developing & Deploying The World’s First Open Source Pan-CJK Typeface Family,” Ken Lunde will delve into the development of Source Han Sans and Noto Sans CJK.


(Web)Fontday Munich

8 November 2014 | Munich, Germany
Registration

Bram Stein will explore advanced web typography using CSS, HTML and, if necessary, JavaScript. He will dive deep into the current state of browser support for kerning, hyphenation, justification, and OpenType features. Type designer Tim Ahrens will be moderating the day, and leading a Q&A session at the end of the talks.


Break Conference

12-14 November 2014 | Belfast, UK
Registration

Talk topics for this conference haven’t been announced, but we’re looking forward to hear what Typekit’s Creative Director Elliot Jay Stocks has in store. Keep an eye on the website for more information!


5th Meeting of Typography

17-21 November 2014 | Barcelos, Portugal
Registration

Type designer and font developer Miguel Sousa is keynoting Friday’s sessions with his talk, “Font Technology and Type Design at Adobe.” The presentation takes us from the early days of desktop publishing through recent milestones in open source font development.


Creating a type style guide

$
0
0

As the makers of Paper for iPad, FiftyThree does some great work that has always impressed me — so I was pretty excited to work with them when they asked for some help cleaning up the type styles on their marketing website.

As is the case in many projects, as the FiftyThree site grew, the type styles grew along with it. As they added pages for new products, the styles weren’t as reusable as the team would have liked. Instead of using mixins or a modular set of styles, each page’s type styles were written directly to fit the design, causing a lot of property repetition as well as redundant styles that were only slightly different from one another.

It was my goal to dig in and inventory the styles, then work with the design and development team to create styles that could be used across the site. While figuring out which type styles would be best for accommodating change and growth on the site, I would put together some mixins that could easily be used for future designs.

Inventory

The first job in any project like this is to do an inventory of the styles used across the site. Thankfully, Nicole Sullivan has made Type-o-matic, a tool for doing exactly that. If you haven’t checked it out, this is a Firebug add-on for Firefox that generates a JSON report of all the type styles being used on a particular page — or across an entire site. So I went through the FiftyThree site using Type-o-matic, and generated the report to get a baseline for where the styles were at.

But we needed to be able to see the styles next to each other visually in order to make some decisions about them. So, I created a page and started adding in the various type styles, grouping them by the pages where they were used. I cross-referenced this with the JSON report from Type-o-matic to ensure that all the different styles used on the site were represented.

Type styles grouped from a single page.
All the type styles from one page, presented without any further design for context. Some are visually very similar to one another.

To complete the inventory, I created a second page and grouped all the type styles by similar size and weight. By seeing the styles next to each other, the team could make better decisions about which styles could be consolidated. The results of this were striking, and showed several opportunities to create some great reusable styles that would easily work site-wide.

FiftyThree uses the stylus preprocessor for writing all their CSS. They also break up their styles so that each individual page calls its own stylesheet, on top of a set of base styles. I thought mixins would be the best way to ensure that styles remained the same across the various pages site-wide; mixins allow you to make groups of CSS declarations that you want to reuse throughout your site.

Type styles grouped by size.
Type styles grouped by size. Similarities and overlaps are easy to spot.

Decision time

With the inventory finished, it was time to make some decisions. I began by creating mixins based on the grouped styles inventory, including nesting the media queries for any font size changes that would need to occur as the screen size got bigger. The example below shows you a stylus mixin that is also using a function for sizing in ems.

MidSizeHeading()
    font-size: em(24px)
    line-height: 1.1
    text-transform: uppercase

    @media $MQGrid4Col
        font-size: em(28px)
        line-height: 1.1

    @media $MQGrid6Col
        font-size: em(36px)
        line-height: 1.05

    @media $MQGrid8Col
        font-size: em(36px)
        line-height: 1.05

Using one page of the site, I began to insert the new mixins to see how they worked. The designer and developer I worked with on the FiftyThree team suggested I start with the Book product page, which features a wide range of type styles. Breaking a page and putting in the new mixins was a key part of the process, and I feel fortunate that branching in git makes this so easy to do. Also, having a client who trusts you and is excited about the work is awesome as well. 

Throughout this stage, the type styles frequently shifted on our test page, but that was the point; we’d break one page to see where we were at, and evaluate how the mixins were working within the rest of the design. Then we met as a team to talk about it all and figure out what was working.

After the initial page was done, it was time to test out other pages on the site and learn whether the mixins would hold up or would need more tweaking. This process involved a lot of back and forth between myself and the FiftyThree team to ensure that the design wasn’t changing too drastically and that they were satisfied with where things were at.

Finalize the guide

We settled on several different mixins that were appropriate for the FiftyThree design, and inserted them into other pages to see how they were working across the site. With the final guide, we were able to see all the various mixins and how they were working, and could confirm that they met the needs of the site. We completed the testing process by taking a look at the in-progress site as we transferred the mixins over into the code, to make sure everything still looked the way the designers intended.

The completed FiftyThree type style guide.
Part of the finished guide, with code examples.

Implementing the guide

Once everyone was happy with the mixins and final decisions had been made, I edited the CSS for the rest of the site, using the mixins for the majority of the type styles. The team at FiftyThree also did a final pass to make sure things looked right and they were happy with the code.

It was really great to get to dig into just the type styles of a site, especially one that is as beautifully designed as fiftythree.com. I learned a great deal about auditing a site’s type using Type-o-matic, and also how to unify styles across a site without compromising on design quality.

Many sites note their typographical styles within their broader styles guides. To see more about how other sites are working with type, here are some great style guides that have type sections in them:

As you think about the type on your site, think about the CSS as well, aiming to make it modular and easier to maintain. Creating a style guide can help you get there.


Sites We Like: Recyling is Sexy & A Ban Against Neglect

$
0
0

With a focus on renewable resources and recycling, we’re leaving the planet in better shape with this week’s Sites We Like.

Recyclingis.sexy

Recycling is Sexy website

Gothic Open Shaded makes for powerful opening text on the landing page at recyclingis.sexy. Made by the Wood Type Revival team, Gothic Open Shaded originated as a 19th-century woodtype; its original designers probably couldn’t have imagined that change-on-hover effect. Nimbus Sans is used for the headers throughout, and JAF Lapture appears further down on the page in subheads.

A Ban Against Neglect

A Ban Against Neglect website

A Ban Against Neglect is a non-profit that empowers young women in Ghana through the sale of handmade products made from recycled materials. It’s pretty great stuff all around. On the website, FF Tisa headlines beautifully, with Freight Sans in place for the top-level nav and subheads. Button text appears in FF Tisa Sans, a nice complement to the serif. Thanks to our reader @sprockethouse for the lead on this one.

That’s it for this week; share sites you like in the comments!


Celebrating five years of Typekit

$
0
0

On November 10, it will have been five years since we first launched Typekit to the public with just a handful of foundry partners and a few dozen web fonts.

From being on the ground as web fonts gained traction, to joining Adobe, to introducing desktop font sync with Creative Cloud — and adding more fonts and foundries to our library all the while — we’ve had a busy five years. Whether you’ve been with us since 2009, or you started learning about typography just yesterday, you’re part of this community now and we thank you for being a part of the journey. It’s been an amazing ride.

We’ll be hosting a little celebration on November 14 to mark the occasion, and we’d love to have our typophile friends join us. If you’re in the San Francisco area and would like to come, please sign up on our Eventbrite page. Tickets are free but in limited supply, so act quickly. Hope to see you soon!


New fonts from Hamilton Wood Type Foundry

$
0
0

Good news for your desktop (and your websites): We’ve added a boatload of new typefaces from Hamilton Wood Type Foundry to the Typekit library. Hamilton Wood Type is a partnership between the P22 type foundry and the Hamilton Wood Type & Printing Museum, bringing 19th-century wood type designs into modern font formats.

We’ve long been supporters of this cause at Adobe Type, conducting fundraisers and making donations, as well as by helping with the digitization effort. Members of our team digitized three of the designs in the HWT collection: Gothic Round by myself, Tuscan Extended by Frank Greißhammer, and Bulletin Script by Paul Hunt.

The bulk of the HWT Collection is made of digital revivals, but also included are two original designs made by Erik Spiekermann (HWT Artz) and Matthew Carter (HWT Van Lanen).

We included just a couple of HWT fonts in our library prior to this release, but now we’re all caught up: All of the font families of the current HWT collection are now available at Typekit, and you can use any of them on your desktop (and, in most cases, on the web) with a Portfolio plan or higher.

This initiative not only helps the dissemination of fonts that were previously only available as wood type, but it also helps the preservation of wood type history since a portion of proceeds from all sales of the HWT digital fonts goes toward supporting the mission and operation of the The Hamilton Wood Type & Printing Museum.

With over twenty fonts new to the Typekit library from HWT, we’d be here all day if we profiled each one. Here’s just a handful to give you a sample. (And check out the full list when you have time.)

HWT American

HWT American type specimens

HWT American Chromatic was the first design in the collection to be digitized. Being a chromatic family means that it’s made up of fonts that act as layers, to which different colors can be applied — resulting in rich, attention-grabbing headlines. The family has a total of eight styles that can be arranged in multiple combinations for an almost endless number of variations. Try layering the styles on a web page using CSS, or create interesting hues in print by letting the colors overprint. The Behance gallery from Hamilton Wood Type goes into more detail about the work that went into digitizing this one-of-a-kind font family.

HWT Gothic Round

HWT Gothic Round type specimen

It’s hard to believe the contemporary-looking HWT Gothic Round was originally designed almost two centuries ago, in 1838. The round edges of this gothic (or sans-serif) give the design an undeniable warmth and bubbly quality, particularly noticeable in the lowercase letters. The design’s heavy weight will provide plenty of impact in applications that demand the readers’ heightened attention, such as a magazine masthead or a store sign. This typeface was a 2013 Typographica favorite. See more about the work that went into digitizing this typeface.

HWT Unit Gothic

HWT Unit Gothic type specimen

First shown in a magazine advertisement in 1907, the HWT Unit Gothic series includes a breadth of weight and width styles rarely seen in wood type designs. Seamlessly organized as a system of fonts, this family is believed to have been the predecessor of the neo-grotesque collections — Helvetica and Univers — released around 50 years later. Besides supporting extended Latin, HWT Unit Gothic also includes Greek and Cyrillic, thus providing broad language coverage for a wide range of applications, from newspaper headlines to logos. Read more about the digitization process for this typeface on the Hamilton Wood Type Behance page.

HWT Van Lanen

HWT Van Lanen type specimen

In 2002, the Hamilton Wood Type & Printing Museum commissioned typeface designer Matthew Carter to develop a new wood type design as a way to help promote the newly established facility. Part of the project included the fabrication of actual wood blocks. Named after Jim Van Lanen, the museum’s founder, this bold wedge-shape serifed design of HWT Van Lanen is reminiscent of the Latin Extended style popularized in the late 19th century. Included in the family is a reversed font style, called streamer, that can be used on its own or in combination with the default style to create interesting chromatic effects. See the Hamilton Wood Type Behance page for more details about the making of Van Lanen.

Let us know what you make with these new fonts; we love seeing cool type in action. If you’ve never tried Typekit, sign up and take a look around, and upgrade to a paid plan when you’re ready.


Working Late: Project breakdown with Kelli Anderson

$
0
0

We have absolutely loved the Working Late series at Makeshift Society this fall. If you joined us for the panel discussion, crit night, or coworking night, you already have an idea of how much we’ve been learning from each others’ work and experience in these discussions.

For our final event in the series on November 11, Kelli Anderson will break down a recent project, beginning with a quick overview of the final product and then unpacking the design decisions to explain where and how the ideas developed along the way. Kelli is an accomplished designer with a demonstrated interest in solving design problems in three dimensions. Her gifted work with paper crafting has been displayed at ApexArt, Jen Bekman Gallery, the New York Public Library, and MoMA. Whether she’s creating tiny forest animals out of paper or bringing famous book covers to life, Kelli’s work is delightful across the board.

Kelli Anderson

Kelli’s blog is a treasure trove of past project walkthroughs, and definitely worth some perusal. For her project breakdown next Tuesday, she’ll walk through the phases of an ambitious design project from her portfolio, sharing insight into how a professional designer brings an idea from concept to full realization.

Existential calculator project photo
Kelli’s Existential Calculator, commissioned by Adobe for an AIGA event.

We’re really looking forward to this event and can’t wait to hear what Kelli has to say. If you’re planning to join us, save room for dessert; we’ve got a sweet surprise to close out the series. See you soon!


UpThemes partners with Typekit

$
0
0

UpThemes, a premium WordPress theme provider known for its responsive designs and excellent customer support, has joined forces with us to include Typekit web fonts in its theme designs. They’ve started with Creative, an easy to use theme for portfolio sites that beautifully combines Brandon Grotesque and Skolar Web – to great effect. Check out a full demo of Creative.

Creative theme

UpThemes has seamlessly integrated the fonts into Creative – you’ll never have to touch a line of code or worry about any other technical setup for the fonts to work. You don’t even need your own Typekit account. When you activate your theme license after installing and activating the theme in WordPress, UpThemes will communicate with Typekit in the background to automatically configure the service that will provide the web fonts for your website.

The cost of your Creative theme license includes the fonts for one year. Renewing your theme license with UpThemes at the end of that year is all you need to do to ensure your fonts will continue to look and work great. For more details, see the Getting Started with Creative article from UpThemes.

We’re delighted to have UpThemes aboard! We look forward to more great typography in more themes to come.

Do you run a platform or service that would benefit from a Typekit-powered font integration like the one described here? Drop us a line at support+partners@typekit.com to learn how to get started.



Typekit sponsors the Wayzgoose type conference

$
0
0

Type geeks of the Midwest, it’s time for the annual Wayzgoose type conference at Hamilton Wood Type! Hosted up in Two Rivers, Wisconsin, it’s a small and friendly gathering of designers, printers, and typographers — and it’s our honor to finally join the list of sponsors.

The conference begins November 7th (tomorrow!) with a series of workshops, and then runs through the weekend with breakout sessions on topics related to printing and typography. Speakers include Chuck Anderson, Silvio Antiga and Sandro Berra from Tipoteca, and Jessica Spring of Springtide Press, along with several more designers and printers from across the country. If you’re in the area and interested to learn more about the art, business, and history of printing type, this should be a lot of fun — and even though the workshops on Friday are full, there’s still time to join in for the speaker sessions.

We’re really looking forward to participating. We’ll be bringing along enough copies of our Adobe Originals 25th Anniversary books for each attendee to take one home. If you’re there, you’ll also have a couple chances to grab one of the 25th anniversary posters we produced in a limited run earlier this year.

See you soon in Two Rivers!


Sites We Like: Break Conference, Confab, & BDConf

$
0
0

We’re thick into conference season over here, and happened to notice a handful of sites using some pretty sweet fonts. Is there some sort of correlation between November conferences and great type?

Break Conference

Break Conference website

A brand new conference on design, Break is happening next week over in Belfast. We love the smooth design of this website, with bold white blocks over the deep blue background. Klavika Condensed (and Klavika Display) are stunning header choices, and pair up beautifully with serif Elena. All typefaces are from Process Type Foundry and hosted by Typekit. (Check out our bring-your-own-license hosting option for more information.)

Confab Higher Ed

Confab website

Confab is a two-day conference covering all aspects of content strategy, and so popular that they organize multiple events throughout the year; next week’s conference in Atlanta focuses on content strategy for higher education institutions. The website features a pairing of two sans serifs: Prenton in an elegant light weight for headlines, with Proxima Nova for body text.

Breaking Development

BDConf website

BDConf has already passed us by this year, but the website is still worthy of a quick type study — just look at that bold Futura PT header. It’s balanced nicely by Adobe Garamond in the body text, which is sized large enough that the serif’s character really comes through and adds texture to the page.

That’s it for this week; share sites you like in the comments!


Sites You Like: SteelCent, 352, & SpeakUp

$
0
0

We love hearing about the sites you’re building, and any other great type you see in the wild. This week, we’re rounding up a few sites you nominated. (Adelle Sans looks to be a favorite!) If you’ve got a favorite type-driven site that hasn’t made our list yet, let us know on Twitter or in the comments.

Steel Cent Paper & Prints

SWL-SteelCent

Steel Cent Paper & Prints knows their way around type, with a number of Leitura News‘s ligatures in action here for a slightly dressed-up feel in the already-classy serif. Penna Connected looks beautiful as a subhead here — a little goes a long way with script faces, and this one’s handled well. And look for Adelle Sans in use for navigation throughout. (Thanks to @SteelCent for pointing it out!)

352

SWL-352

Futura PT makes a bold entrance on the homepage for the web development agency 352, but understated Freight Sans does the heavy lifting here, appearing in all body text and most of the navigation. The overall design is great, with those vivid blue subheads acting as tidy signposts for getting around the well-organized page. (Thanks to @brandmitchell for the nomination!)

SpeakUp

SWL-SpeakUp

Adelle sizes up so nicely, as demonstrated by the headers on SpeakUp — the serifs add a distinctive personality and a nice bit of texture to the page as a whole. Adelle Sans appears in the subheads and navigation here, a natural complement to its serif cousin. (Thanks to @keithbarney for the nomination!)

That’s it for this week’s sites; share more sites you like in the comments!


Pan-CJK Partner Profile: Iwata Corporation

$
0
0

An ambitious project from the start, the development of our Pan-CJK typeface Source Han Sans brought together the work of Adobe, Google, and three in-country type foundries: Iwata Corporation in Japan, Sandoll Communication in Korea, and Changzhou SinoType in China. We recently sat down with Yutaka Ozawa and Tsuyoshi Sugimoto of Iwata, one of Japan’s oldest and most respected type foundries, to talk about the Source Han Sans project.

Can you provide me with a little bit of history about Iwata?

Iwata Corporation can be traced back to Iwata Matrix Co., Ltd, which was founded in 1920 and has since consistently manufactured matrixes (metal matrixes for typecasting or master drawings for photocomposition). After various transitions, Iwata Corporation was founded as a sales company dealing with the font production of Iwata Matrix Co. In 2001, Iwata merged with Iwata Matrix and then became what Iwata is now.

Iwata metal matrices
Different metal matrices according to the type of production method.

Do you primarily develop Japanese fonts?

We have been consistently focused on developing Japanese fonts, but in recent years we have developed multilingual fonts in addition to Japanese in order to meet the changing needs of the Japanese market. We have licensed these fonts with digital cameras, electronic dictionaries, and automotive devices.

What are your most popular fonts?

Iwata Mincho and Gothic are our time-honored fonts. Both have a long history and are well-loved by the reading public. Additionally, Iwata Newspaper Types, Iwata Textbook Types, IWATA UD (Universal Design) Gothic and a variety of our Brush Types are very popular.

Iwata vertical layout sample
Vertical layout sample from an Iwata Specimen (1959).

Can you talk a little about how Iwata has innovated over the years?

We are pioneers for newspaper type. We developed a specialized typeface for newspaper, which is expanded in a horizontal direction in order to lay out more glyphs into a given space with a reasonable degree of visibility. That later became a de facto standard in Japanese newspapers. Currently every Japanese newspaper uses the same concept in its fonts.

In 2006 we released UD (Universal Design) fonts to meet the need in the Japanese market for fonts that focus on legibility and visibility for the aging population and those with weak eyesight or cataracts. The first UD release, Iwata UD Font, has been influential and widely adopted. You can find it in Japan on TV remote controls, tablets, apps, newspapers, and so on.

What is the most rewarding aspect of creating typefaces?

Combining our 100-year heritage with the latest digital technologies to create fonts that contribute to society.

As one of the partners for the Source Hans Sans project, you’ve been on the ground throughout much of the work that went into the font’s design. What were some of the challenges you faced in working on Source Han Sans?

On the design front, we were able to make the process go so smoothly because we had good and frequent communication with the Adobe team in Japan, and were able to discuss the design intent and share concepts with them in detail. But on the technology front, there were some challenges. We had to establish a new development environment for Source Han Sans. This entailed creating new internal rules to properly handle the fonts, developing a new version management tool, and creating a tool that would pick up analogous glyphs and placed them side by side automatically. We also had to learn Adobe’s design tool (TWB2).

How many people were involved on Source Han Sans?

There were three key people: Akira Mizuno (Technical Director), Kazuo Hashimoto (Chief Designer), and Tomihisa Uchida (R&D Director). All of these individuals have more than 25 years of experience in font technology. Under their direction a total of nine staff members were engaged in this project.

What was it like to work with several companies to produce designs that would harmonize across languages?

In this project, the Japanese glyphs were designed first, and then the Chinese and Korean glyphs were designed based on the Japanese. In that sense, it was easier for us to design the glyphs than it was for the other foundries involved in this project.

What is your overall opinion about Source Han Sans? Do you think it will be widely used?

Source Han Sans is innovative and has the potential to be widely and universally accepted by the CJK market. In the beginning most people will probably focus on the number of glyphs included in Source Han Sans, but after using it, we believe people will appreciate the quality of glyphs. The feedback we’ve received since its release supports our belief that Source Han Sans could become the default and de facto standard CJK font.


Sites We Like: Moonbase, Planetary, & SpaceX

$
0
0

There’s little that captivates the imagination like the idea of outer space and exploring beyond our home planet. This week we’re looking at a few sites that feel the pull of the stars — including one that actually does the space thing for real.

Moonbase

Moonbase website

Iconic geometric face Futura PT retains its position as the typeface of the future on the Moonbase homepage, making a bold entry as the title header and appearing in tidy subheads throughout the rest of the page. They’ve taken pains to pair it carefully with serif Elena, sometimes even on the same line of text (no small feat!).

Planetary

Planetary website

Freight Sans is an excellent all-purpose typeface that can carry most — if not all — the text on a webpage with a thoughtful mix of size and weight, as demonstrated by consulting firm Planetary. Freight Text also pops up for some of the text here, most prominently for the subhead on the landing page.

SpaceX

SpaceX website

Space metaphors are all well and good, but let’s talk for a minute now about actually going to space, where geometric typefaces surely reign supreme. SpaceX leads with Brandon Grotesque on their rocket-powered website. Drill down for details on specific rocket launches, and you’ll find some beautiful Pragmatica Condensed for the numerals (and a few fun scrolling animations).

Pragmatica Condensed on SpaceX website

That’s it for this week; share sites you like in the comments!


Viewing all 514 articles
Browse latest View live