Archive for the ‘Typography’ Category

Typography for User Interfaces

Friday, August 19th, 2016

Typography for User Interfaces by Viljami Salminen.

From the post:

Back in 2004, when I had just started my career, sIFR was the hottest thing out there. It was developed by Shaun Inman and it embedded custom fonts in a small Flash movie, which could be utilized with a little bit of JavaScript and CSS. At the time, it was basically the only way to use custom fonts in browsers like Firefox or Safari. The fact that this technique relied on Flash soon made it obsolete, with the release of the iPhone (without flash) in 2007.

Our interfaces are written, text being the interface, and typography being our main discipline.

In 2008, browsers started eventually supporting the new CSS3 @font-face rule. It had already been a part of the CSS spec in 1998, but later got pulled out of it. I remember the excitement when I managed to convince one of our clients to utilize the new @font-face and rely on progressive enhancement to deliver an enhanced experience for browsers which already supported this feature.

Since my early days in the industry, I’ve grown to love type and all the little nuances that go into setting it. In this article, I want to share some of the fundamentals that I’ve learned, and hopefully help you get better at setting type for user interfaces.

A nice stroll through the history of typography for user interfaces.

With ten (10) tips on choosing a typeface for a UI.

Enjoy and produce better UIs!

Free & Interactive Online Introduction to LaTeX

Thursday, July 28th, 2016

Free & Interactive Online Introduction to LaTeX by John Lees-Miller.

From the webpage:

Part 1: The Basics

Welcome to the first part of our free online course to help you learn LaTeX. If you have never used LaTeX before, or if it has been a while and you would like a refresher, this is the place to start. This course will get you writing LaTeX right away with interactive exercises that can be completed online, so you don’t have to download and install LaTeX on your own computer.

In this part of the course, we’ll take you through the basics of how LaTeX works, explain how to get started, and go through lots of examples. Core LaTeX concepts, such as commands, environments, and packages, are introduced as they arise. In particular, we’ll cover:

  • Setting up a LaTeX Document
  • Typesetting Text
  • Handling LaTeX Errors
  • Typesetting Equations
  • Using LaTeX Packages

In part two and part three, we’ll build up to writing beautiful structured documents with figures, tables and automatic bibliographies, and then show you how to apply the same skills to make professional presentations with beamer and advanced drawings with TikZ. Let’s get started!

Since I mentioned fonts earlier today, Learning a Manifold of Fonts, it seems only fair to post about the only typesetting language that can take full advantage of any font you care to use.

TeX was released in 1978 and it has yet to be equaled by any non-TeX/LaTeX system.

It’s almost forty (40) years old, widely used and still sui generis.

TUGBoat – The Complete Set

Thursday, June 30th, 2016

Norm Walsh tweeted an offer of circa 1990 issues of TUGBoat for free to a good home today (30 June 2016).

On the off chance that you, like me, have only a partial set, consider the full set, TUGBoat Contents, 1980 1:1 to date.

From the TUGBoat homepage:

The TUGboat journal is a unique benefit of joining TUG. It is currently published three times a year and distributed to all TUG members (for that year). Anyone can also buy copies from the TUG store.

We post articles online after about one year for the benefit of the entire TeX community, but TUGboat is funded by member support. So please consider joining TUG if you find TUGboat useful.

TUGboat publishes the proceedings of the TUG Annual Meetings, and sometimes other conferences. A list of other publications by TUG, and by other user groups is available.

This is an opportunity to support the TeX Users Group (TUG) without looking for a future home for your printed copies of TUGBoat. Donate to TUG and read online!


UTF-8 encoding table and Unicode characters

Friday, April 22nd, 2016

UTF-8 encoding table and Unicode characters

The mapping between UTF-8 and binary representations doesn’t come up often but it did today. but it does come up.

Rather than hunting through bookmarks in the future, I am capturing this resource here.

Typesetting Mathematics According to the ISO Standard [Access to ISO 80000-2:2009]

Thursday, January 28th, 2016

Typesetting Mathematics According to the ISO Standard by Nick Higham.

From the post:

In The Princeton Companion to Applied Mathematics we used the conventions that the constants e (the base of the natural logarithm) and i (the imaginary unit), and the d in derivatives and integrals, are typeset in an upright font. These conventions are part of an ISO standard, ISO 80000-2:2009. The standard is little-known, though there is an excellent article about it in TUGboat by Claudio Beccari, and Kopka and Daly’s A Guide to \LaTeX has a page on the standard (in section 7.4.10 of the fourth edition and section 5.4.10 of the third edition).

Nick mentions that you can get a copy of ISO 80000-2:2009 for about $150, and he also says:

However, it is easy to find a freely downloadable version via a Google search.

Let’s don’t be coy about this sort of thing: try

Every time an illegitimate privilege is acknowledged, it grows stronger.

I refuse to confer any legitimacy or recognition of legitimacy to restricted access to ISO 80000-2:2009.

And you?

Typography Teardown of Advertising Age

Wednesday, February 25th, 2015

Typography Teardown of Advertising Age by Jeremiah Shoaf.

From the post:

I’m a huge fan of Samuel Hulick’s user onboarding teardowns so I thought it would be fun to try a new feature on Typewolf where I do a “typography teardown” of a popular website. I’ll review the design from a typographic perspective and discuss what makes the type work and what could potentially have been done better.

In this first edition I’m going to take a deep dive into the type behind the Advertising Age website. But first, a disclaimer.

Disclaimer: The following site was created by designers way more talented than myself. This is simply my opinion on the typography and how, at times, I may have approached things differently. Rules in typography are meant to be broken.

As you already know, I’m at least graphically challenged if not worse. 😉

Still, it doesn’t prevent me from enjoying graphics and layouts, I just have a hard time originating them. And I keep trying by reading resources such as this one.

While a website is reviewed by Jeremiah, the same principles should apply to an application interface.


U&lc (volumes 1-24)

Saturday, December 27th, 2014

U&lc (volumes 1-24)

A remarkable collection of back issues of U&lc.

To best explain the almost twenty-seven year run of U&lc, I offer this editorial from volume 1, issue 1:

Why U&lc?

The world of graphic arts is alive today with new technological advances, so vast and difficult to comprehend, that they strain the imagination of even the most knowledgeable and creatively gifted among us. New materials, new tools, new ways to plan work are becoming mandatory for efficiency, quality, economy—presenting problems for all—printers, typesetters, artists, writers, advertisers, publishers—all the creative people who have anything to do with preparation of the visual word.

How to keep up? How to stay in touch with what is current? How to plan for tomorrow? To envision a future essential to decision making today?

Vital questions for the interested professional. Yet where can he find the most recent information on trends, styles, fashions? Where can he read about all and everything that is happening in the graphic arts and sciences?

To help make this broad body of knowledge and information available—and, hopefully, to provide some answers— International Typeface Corporation introduces this first issue of “U&/c,”the International Journal of Typo/Graphics, designed by Herb Lubalin and distributed worldwide.

“U&lc”will have broad general appeal, covering important graphic events and presenting original articles by world leaders in the typographic arts, as well as reprints of articles of importance that have appeared in other publications.

“U&/c”will feature outstanding examples of typographic design in all fields of visual communication, from the best-known creators to the undiscovered shops.

“U&lc” will offer in-depth analysis of the material presented and study the direction of current work and developments in typographic technology.

In brief, “U&k”will provide a panoramic window, a showcase for the world of graphic arts—a clearinghouse for the international exchange of ideas and information.

It is the intent of the editorial staff and the directors of ITC that “U&/c” will come to serve as the international journal for all who want to have their finger on “what is new’,’ “what is happening’: and “what to look for” in the world of typographics.

The Editors

Fonts, graphics, page layout as as important to communication as language, grammar, style, content, experience, context and a host of other known and unknown factors. Life may or may not be a miracle. But that communication happens at all, is certainly a miracle.

Fonts and graphic layout are two known factors that impact communication and you would do well to appreciate them, even as you seek the advice of experts for screen or print communication with users.


PS: This remarkable collection is hosted at A remarkable collection of information on typography in its own right.


Tuesday, June 3rd, 2014

GitBook: Write Books using Markdown on OpenShift by Marek Jelen.

From the post:

GitBook is a tool for using Markdown to write books, which are converted to dynamic websites or exported to static formats like PDF. GitBook also integrates with Git and GitHub, adding a social element to the book creation process.

If you are exporting your book into an HTML page, interactive aspects are also embedable. At the time of this writing, the system provides support for quizzes and JavaScript exercises. However, the tool is fully open source and written using Node.js, so you are free to extend the functionality to meet your needs.

The Gitbook Learn Javascript is used as an example of production with GitBook.

It’s readable but in terms of the publishing craft, the Mikraot Gedolot or The Art of Computer Programming (TAOCP), it’s not.

Still, it may be useful for one-off exports from topic maps and other data sources.

Character(s) in Unicode 6.3.0

Wednesday, December 18th, 2013

Search for character(s) in Unicode 6.3.0 by Tomas Schild.

A site that allows you to search the latest Unicode character set by:

  • Word or phrase from the official Unicode character name
  • Word or phrase from the old, deprecated Unicode 1.0 character name
  • A single character
  • The hexadecimal value of the Unicode postion
  • Search for numerical value

When you need just one or two characters to encode for HTML, this could be very handy.

Be aware that the search engine does not compensate from spelling differences in the Unicode character list.

Thus, a search for “aleph” returns:

code point
Unicode character name
U+1202A f0 92 80 aa CUNEIFORM SIGN ALEPH

Whereas a search for “alef” returns:

128 characters found

code point
Unicode character name
Remaining 121 characters omitted

Semitic alphabets all contain the alef/aleph character which represents a glottal stop.

I have no immediate explanation for why the Unicode standard chose different names for the same character in different languages.

But, be aware that it does happen.

BTW, I modified the tables to omit the character and other fields.

WordPress seems to have difficulty with Imperial Aramaic, Inscriptional Parthian, Inscriptional Pahlavi, and Cuneiform code points for aleph.

Big Data and the Topologist

Monday, May 6th, 2013

Big Data and the Topologist by Jesse Johnson.

From the post:

As I mentioned in my previous post, I plan to write a series of posts about study of large data sets, both the ways that high dimensional data has traditionally been studied and the topology that has recently been applied to this area. For anyone who has experience thinking about abstract geometric objects (as I assume most of the readers of this blog do) the concepts should seem pretty straightforward, and the difficulty is mostly in translation. So I will start with a post that focusses on defining terms. (Update: I’ve started a second blog The Shape of Data to look into these topics in more detail.)

You can also skip ahead to later posts in this series:

  1. The geometry of neural networks
  2. Principle component analysis
  3. Making linear data algorithms less linear: kernels
  4. Topological exploration of data sets: persistent homology
  5. Refining information from persistent homology
  6. Finding clusters in data
  7. Topological Clustering
  8. Digital spheres and Reeb graphs

The study of large data sets in the abstract generally goes by two names: Data mining is the field that grew out of statistics, which considers ways to organize and summarize high dimensional data so that it can be understood by humans. Machine Learning is the subfield of computer science (particularly artificial intelligence) that looks for ways to have computers organize and summarize data, with the goal of having the computer make decisions. These two fields have a lot in common and I will not try to distinguish between them. There are also names for the application of these methods in different sciences, such as Bioinformatics and Cheminformatics. There are also rather notorious applications in marketing, which allow stores to know what you’re going to buy before you know.

We are given a collection of data, usually a set of ordered n-tuples, that come from a science experiment or surveys, or the data that retailers collect about you every time you use your credit card, etc. Some of the entries can be thought of as labels – the code number for the particular experiment, for example. The remaining coordinates/dimensions are often called features. If these features are numerical, then we can think of them as defining vectors in a Euclidean space, and this gives us our first glimpse of geometry. However, for high dimensional data, the Euclidean metric turns out to be problematic, so we will often want to use a different metric. The Euclidean metric is also problematic for binary features such as the presence of different genes in an organism.

This is a nice way to start the week!

Fuse: From Invention to Antimatter

Wednesday, August 1st, 2012

Fuse: From Invention to Antimatter (Amazon Link)

James Cheshire has his brother review “Fuse: From Invention to Antimatter,” under the blog title: Book Review: Fuse.

From the post:

“In a world of generic mediocrity and corporate obeyance, new flowers of exuberance bloom in dark crevices. FUSE is a breach in the wall, a genetic mutation from which new lifeforms can spring […] Never before has FUSE been so relevant and so necessary.”

The words of Neville Brody open FUSE 1-20, From Invention to Antimatter: 20 years of FUSE with the air of positive aggression and idealism that continues throughout the book. Across twenty editions (since 1991) FUSE has sought to challenge and invigorate the language of typography. Always contained within a cardboard box, each themed issue featured written editorials from leading designers, posters and a disc with four or more fonts for personal use and exploration. This new book (within a FUSE box) from Taschen is essentially a retrospective of all the FUSE editions to date, along with additional essays, conference transcripts, and two new issues – FUSE19 and FUSE20.

Typography, like page layout, is one of those things most of us pass over without realizing its impact on communication or even understanding itself.

Definitely on my priority order list!

BTW, do note that Amazon lists as: “Fuse: Neville Brody,” Chesire’s review gives both “Fuse: From Invention to Antimatter,” and “FUSE: 1-20, From Invention to Antimatter: 20 years of FUSE,” and no doubt other variations will abound.

TEX line breaking algorithm in JavaScript

Thursday, September 1st, 2011

TEX line breaking algorithm in JavaScript by Bram Stein.

From the post:

This is an implementation of the Knuth and Plass line breaking algorithm using JavaScript and the HTML5 canvas element. The goal of this implementation is to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.

This is very impressive and will reassure your topic map clients that you pay attention to details. Work remains to be done here and elsewhere on browser displays.

This was forwarded to me by Sam Hunting.

TeXBlog – Typography with TeX and LaTeX

Monday, February 28th, 2011

TeXBlog – Typography with TeX and LaTeX

I mention this blog for several reasons.

TeX and LaTeX would benefit from the production of a topic map that eased users from less capable systems to a more full featured publication system.

To that extent, this blog would be an excellent starting place for gathering resources for such an effort.

Most of the major academic houses require the use of TeX or LaTeX for publications so if you want to publish about topic maps, that knowledge is a presumed starting point.

Knowledge of TeX and LaTeX will give you an example of how a well designed system can prosper and grow over time. Something to aspire to.