InFocus: Spring 2022

Ah, spring! Time to open the windows, breathe in that fresh air, and brace yourself for allergy season.

Okay, not everything about spring is pleasant, but it is a time for new beginnings and also some spring cleaning. It’s a great time to look at the tools we use—and seek out new ones. So, in the spirit of spring, here are some items that will introduce you to new fonts, help you clean out your cluttered InDesign files, find new images and colors, and learn more about the history and future of design.

FontXChange

In this episode of The Amazing Race… to Remove My Type 1 Fonts, the clock is ticking to find a solution to replace all the old fonts we’ve collected over the past two decades. 

The hero in this story is Fontgear’s FontXChange, an app that converts fonts from one format to another (Figure 1). It’s the perfect solution that will allow you to keep using your old PostScript Type 1 fonts after March 2023 (when they will no longer work in Adobe products) by converting them to OpenType.

Don’t think FontXChange is a one-trick pony, though, as it can also convert font files between their macOS and Windows versions, including Type 1 fonts for those apps that will continue to support them. FontXChange can also convert these font types to any of four flavors of web fonts, with the option to generate a sample HTML file for testing.

Figure 1. FontXChange can convert your fonts to and from OpenType, TrueType, and Type 1 (both Windows and macOS).

Electrónica

Who doesn’t love a bold, futuristic display font? And if that typeface is also full of simple and clean lines? Sign me up!

Electrónica by Graviton Font Foundry emits a sci-fi vibe, but doesn’t go overboard with it (Figure 2). This multipart font offers four styles for free (including a stencil and an inline form) that you can mix and match to create eye-catching headlines or logo text.

To make that task easier, check out Tony Harmer’s video on working with multipart fonts.

Figure 2. You can combine Electrónica’s inline and outline fonts to fun effect.

SVG Gobbler

If you’ve ever seen a webpage of cool SVG graphics and wished for an easy way to download them, SVG Gobbler is the answer to that wish!

This extension for Chrome and Firefox searches out the SVG content on any webpage. From the results, you can choose to download or copy the SVG, export as a PNG, or even view and copy the underlying XML code. You can also choose to download all of the page’s SVG files at once (Figure 3).

Figure 3. SVG Gobbler can find all SVG files on a web page and give you an interface to download or work with them.

Keep in mind the extension will also find any linked art on the site—logos, navigational icons, and other webpage elements—as long as they are in SVG format. The extension could save time if, for instance, you needed to quickly grab a client’s custom navigation elements from their webpage.

SVG Repo

SVG Repo has a library of more than 300,000 SVG graphics, all free for commercial use and nearly all without any attribution necessary. Many of the graphics are grouped within fun collections, such as Flat UI, Happy Trees, Tropical Fruits, and Colorful Weather vectors (Figure 4).

Figure 4. A sample of SVG Repo’s free Flat UI vectors and icons ready to download

You can also search by keyword and drill down into the results by searching only for monocolor, multicolor, outlined, or filled. That filtering comes in very handy when you’re looking for five icons of similar styles.

A History of Arab Graphic Design

If you’re on the lookout for new sources of inspiration, why not set your sight further afield to other regions of the world? In A History of Arab Graphic Design, authors Bahia Shehab and Haytham Nawar—both professors at the American University in Cairo—take us on a dive into the graphic design field in the region (Figure 5). With graphic design being relatively new within the Arab world, it’s really no surprise that this book is the first to cover its history.

Figure 5. Calligraphy samples from A History of Arab Graphic Design

The book delves into Arab art and culture pre-1900 as the foundation of the region’s graphic design identity. Arab calligraphy plays a large part in that, and many of the book’s images feature lovely examples of this fine art. Also featured in the book’s 360 colorful pages are examples of art, ranging from ancient mosaics to illustrated manuscripts.

A Collection of Cleanup Scripts 

Keeping your InDesign files clear of debris—in the form of unused swatches, unfilled frames, or unapplied styles—can take up valuable production time. Lucky for us, some scripters out there understand our pain and have created automated solutions to help us with the chore of cleanup.

Luis Felipe Corullón is one such scripter, offering free scripts that excel at clearing the proverbial cobwebs from an InDesign file.

Remove All Styles and Swatches zaps styles and swatches from your document, as the name suggests (Figure 6). Double-click the script, select Styles and/or Swatches—keeping in mind that choosing Styles will remove paragraph styles, character styles, and object styles alike—then click OK. All previously styled text and objects will retain their formatting, but have no link to a style. This works in the same way as Break Link to Style in the various styles panels. 

Figure 6. After running the Remove Styles and Swatches script content has no links to paragraph, character, and object styles.

Warning: When a swatch is removed, all objects colored with that swatch will be  reassigned to the default Black color swatch.

Remove Empty Style Groups instantly removes any created style groups that don’t actually contain any styles.

Remove Empty Frames and Pages lets you remove any combination of empty text frames, empty graphics frames (not unassigned shape frames, though), or empty pages and spreads. You can have the script remove those items across just the current spread or the entire document.

Comma Base

The Comma Base type family, from Martin Majoor, creator of the Scala and Nexus typefaces (Figure 7), marks the first offering from his recently formed, self-named type design foundry. It is available through Adobe Fonts, or you can license it from Fontspring. 

Majoor describes the chameleonlike typeface as being the best of both worlds: Technically a sans serif typeface, it features angled edges and contrast, more like a serif face.

The entire Comma Base family is made up of 16 styles, ranging from hairline to ultra, each with an italic pairing. Some of the lighter styles even take on hints of a brush script.

Figure 7. Type sampler for the Comma Base font

Powered by Design

With the subtitle “An Introduc-tion to Problem Solving with Graphic Design,” Renée Stevens’ Powered by Design takes a look at how graphic design fits into the real world and affects those who interact with it (Figure 8). So, in addition to fundamentals such as typography and design hierarchy, the book examines weightier topics like accessibility and ethics.

Figure 8. Powered by Design shows how design translates to real-world use.

Stevens lays out the concept of design as visual communication, then follows up with real-world examples. Chapters describe the relationship between color and mood, activating across senses (keeping accessibility at the forefront), and how to tell stories and solve problems with design.

Fonts Ninja

Have you ever been scrolling through a website when you encounter a typeface that just speaks to you and you know you need to use it in your next project? It happens to me frequently, so I’m hoping I’m not alone!

In these instances, I used to peek into the webpage’s source code using my browser’s developer tools. But I’ve recently found an easier way: Fonts Ninja (Figure 9). This handy tool can be run as a standalone app or via a Chrome browser extension.

Figure 9. Fonts Ninja lets you inspect fonts in use on a web page.

While on any web page, use the browser extension to identify fonts as you move your pointer over them. A small box will pop up with the font name and weight, along with size, line spacing, letterspacing, and color.

Click on text anywhere on the page, and a larger panel gives you a place to type out your own text in the font, as well as view and copy the color as hex values. 

The panel also lets you book- mark the font, while clicking its info button will bring up a new panel showing how to acquire it. In addition, you can view the different weights and stylings available. 

The free browser extension works in conjunction with the desktop version ($29 a year) to provide additional functionality. One example: For fonts from foundries Fonts Ninja has partnered with, you can install a trial version of the font, so you can work with it and license it if you decide to use it.

Equalize Borders and Shading

InDesign’s Paragraph Borders and Shading function has been around for a few years now, and one thing that constantly trips me up is that each has control over similar functions. For instance, corner shape and text offset exist in both sections of the dialog box, and you might decide that you’d like them each to match.

While InDesign doesn’t give you the magic button to do that, Id-Extras offers a script that does.

The Equalize Borders and Shading script works when you have set either border or shading options—or both—and created a paragraph style with these options. (Note that if you haven’t assigned a style, absolutely nothing will happen when you run the script… a fact I learned the hard way.)

If you’ve set the options and assigned a paragraph style, select the frame and double-click the script. The dialog box pops up and asks if you want to equalize using the border or the shading properties. When you make your choice, all the common properties equalize to your choice, and your paragraph style is updated to reflect this (Figure 10).

Figure 10. A paragraph with separate borders and shading settings (top) can have those settings synchronized with the Equalize Borders and Shading script (bottom).

Happy Hues

Happy Hues is a color inspiration site that shows your chosen colors within the context of the page design itself. Front and center is a button that automatically changes the site’s colors to another of its 14 ready-made combinations, or you can click one of the palettes shown on the left to manually select one.

Either way, the page reloads using a new palette of colors, with a handy breakdown of which elements were assigned which color (Figure 11). Click an individual color’s description to instantly copy its hex color code to the clipboard.

The tiny, colorful site provides some handy color terms and a brief overview of the psychology of color. I do wish there were a lot more color combinations to choose from or a way for users to experiment with their own color palettes, but it offers something that is often missing on other color picker sites: simplicity that just lets these happy hues speak for themselves.

Figure 11. You can apply any of 14 color palettes to the Happy Hues site.

Adobe InDesign Classroom in a Book

Peachpit’s Classroom in a Book instructional series is a staple for folks learning Adobe software, with the latest versions focused on the 2022 versions of the Adobe apps (Figure 12). Adobe InDesign Classroom in a Book by Kelly Kordes Anton and Tina DeJarld is designed to get you up and running in the app, covering topics in workbook style.

Figure 12. Classroom in a Book is now available for Adobe InDesign 2022.

The project-based format includes 15 step-by-step lessons on such subjects as typography, graphics, color, pages, and exporting interactive PDFs. You can follow the book straight through or jump around.

The book comes as an ebook (in EPUB, PDF, and MOBI formats) or a 450-page paperback edition with downloadable lesson files. A web edition includes the text of the book and interactive quizzes and videos. You can purchase bundles that combine the book and/or the ebook with the web version. 

Suit Icons

Suit Icons is a playing card-­inspired font full of icons you can use for all manner of games, card-based and otherwise.

The creator, a user on the boardgame enthusiast site BoardGameGeek who goes by Septyn, envisioned the font being used within fantasy-based games as well as for prototyping future games.

The font evolved as a DIY project in the BoardGameGeek forums, with input from other users. Septyn supplies a character map that includes Windows alt codes for each of the 192 glyphs (Figure 13).

Figure 13. A selection of icons available in the Suit Icons font

The font’s icons include the expected hearts, spades, diamonds, and clubs, as well as medieval symbols, chess pieces, royal-looking crests, and geometric shapes. As a Dr. Who fan, my favorite is the TARDIS thoughtfully placed on the question mark key. True Whovians will know why.

Spring Forward

Even if you’re not a gardener, spring is a great time to sharpen your tools—and seek out new ones—so that you can create and design, unhindered by the dusty and dull.

I hope that spring brings you new ideas, new ways of looking at design, and new-to-you InDesign goodies.