The History of Fonts with Timeline.JS

typography

The Timeline!

Access the Timeline of Font History

Curious about how I made this? Check out timeline.js


Reflection

One of the most interesting things about archives is the temporal nature of the collections. There’s a cardinality to the story that we tell with artifacts and resources in individual collections. The timeline project really brought home the process of putting items in context, to document the progression from an archivists’ perspective.

For this task, I pulled together some basic information about the history of fonts and their use in publications. Some of this information came from the History of Books course at San Jose State University. Other pieces of information came from my personal interest and web searches. This timeline shows the progression of fonts, and how quickly the field has really grown. If you look at the beginning of the timeline, there is limited information, and only a few fonts being created. Once you hit the 1700s (the transition period) and later, the number of fonts really increases. The stories of the creators begin to get more interesting, and the “plot thickens.” For example, until you start to dig a little, you would never know that Times New Roman was designed by a critic who complained about the font used in a Newspaper. Add to that the fact that the “Times Roman” font was basically created by licensing wars, and you have quite a story!

I found myself exploring various features of the timeline.js tool. I wanted to know how to change colors, adjust the order, and do things like change the colors on the year bar at the top of the page. I explored what “Groups” meant, and how to incorporate HTML into things like descriptions and titles. The tool is quite powerful – with just some basic configuration within a Google Sheet, I could develop a fully featured timeline!

It is always a challenge to boil down a significant collection of information into a relatively short timeline. That tends to be one of the most difficult tasks. I found myself discovering all kinds of information that I wanted to include. I did look for more of a mechanism to incorporate formal citations within the timeline. I instead utilized links out to source content where possible.

There were a variety of resources that I used for the project. The references listing below includes a full listing of the formal resources. In addition, I used a standard HTML code chart (https://html-color-codes.info/ to select the background colors for each of the entries in the timeline.

Overall, this was a very interesting assignment! I explored a variety of features of timeline.js, and can really see how this would be useful! I’m even thinking of ways I can use this in my professional work.

 


References Used

P. (n.d.). [Helvetica Font Poster]. Retrieved April 15, 2018, from https://pre00.deviantart.net/39ce/th/pre/f/2008/275/c/2/helvetica_font_poster_by_phillyfresh.jpg

A Brief History of Times New Roman. (n.d.). Retrieved April 15, 2018, from https://practicaltypography.com/times-new-roman.html

A Brief History of Type. (2015, June 13). Retrieved April 16, 2018, from https://ilovetypography.com/2008/05/30/a-brief-history-of-type-part-4/

Adobe Caslon™ Font Family Typeface Story. (n.d.). Retrieved April 16, 2018, from https://www.fonts.com/font/adobe/adobe-caslon/story

Arial Font [Download]. (2016, November 22). Retrieved April 16, 2018, from http://www.fontex.org/download/arial.ttf
(2013, April 28). Retrieved April 16, 2018, from https://youtu.be/wOgIkxAfJsk

Boone, A. R. (n.d.). TYPE BY GOUDY – Popular Science (Apr, 1942). Retrieved April 16, 2018, from http://blog.modernmechanix.com/type-by-goudy/

Britannica, T. E. (2014, December 16). William Caslon. Retrieved April 16, 2018, from https://www.britannica.com/biography/William-Caslon

Creative, A. (2014, July 03). A Brief History of Typography. Retrieved April 16, 2018, from http://www.ashworthcreative.com/blog/2014/07/brief-typography-typefaces/

Crum, M. (2014, March 13). The Incredible Histories Of Your Favorite Fonts. Retrieved April 16, 2018, from https://www.huffingtonpost.com/2014/03/13/font-history_n_4942922.html

Crum, M. (2017, April 10). The Wild History Of One Of Our Most Popular Fonts. Retrieved April 16, 2018, from https://www.huffingtonpost.com/entry/baskerville-font-history_us_58e7fe09e4b058f0a02f4e30

Family Classifications of Type: Transitional. (n.d.). Retrieved April 16, 2018, from http://graphicdesign.spokanefalls.edu/tutorials/process/type_basics/transitional.htm

Google Fonts. (n.d.). Retrieved April 16, 2018, from https://fonts.google.com/

Harding, M. (2017, August 21). What Are Grotesque Fonts? History, Inspiration and Examples. Retrieved April 16, 2018, from https://creativemarket.com/blog/grotesque-fonts

Heidelbach, W. (2014, May 19). [Moveable Type]. Retrieved April 15, 2018, from https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Metal_movable_type.jpg/800px-Metal_movable_type.jpg

Hustwit, G. (Director). (2007). Helvetica [Motion picture]. United States: NewVideo.

Helvetica (2007). (n.d.). Retrieved April 16, 2018, from http://www.imdb.com/title/tt0847817/

Hustwit, G. (n.d.). [The Helvetica Film Poster]. Retrieved April 15, 2018, from https://upload.wikimedia.org/wikipedia/en/d/d4/Helvetica-film.JPG

Italic vs. Cursive. (n.d.). Retrieved April 16, 2018, from http://www.typeworkshop.com/index.php?id1=type-basics&idpic=07

Italics. (n.d.). Retrieved April 16, 2018, from https://typedecon.com/blogs/type-glossary/italics/

Nealon, T. (2014, September 17). How a Frenchman Who Lived Nearly 600 Years Ago Created One of the World’s Great Typefaces. Retrieved April 16, 2018, from http://www.slate.com/blogs/browbeat/2014/09/17/jenson_s_roman_how_nicolas_jenson_created_a_perfect_typeface_600_years_ago.html

Olson, K. (2013, May 9). Typeface Comparison. Retrieved April 16, 2018, from https://www.behance.net/gallery/8607999/Typeface-Comparison

S. (2009). Periodic Table of Typefaces. Retrieved April 15, 2018, from http://www.squidspot.com/Periodic_Table_of_Typefaces.html

Prisco, J. (2017, August 15). The game-changing design made to go unnoticed. Retrieved April 16, 2018, from https://www.cnn.com/style/article/helvetica-60-years/index.html

Yau, C. (2009, June 17). Know your type: Futura. Retrieved April 16, 2018, from http://idsgn.org/posts/know-your-type-futura/

Yau, C. (2010, October 26). Know your type: Baskerville. Retrieved April 16, 2018, from http://idsgn.org/posts/know-your-type-baskerville/

Advertisements

Einstein for Everyone

The Einstein Papers Project, the decades-long effort to compile and preserve the scientist’s professional work and personal writings, is today opening to the public as a free searchable database containing thousands of documents.

The launch of the Digital Einstein Papers includes more than 5,000 documents that span the first 44 years of Albert Einstein’s life. As the organizations collaborating on the project — the California Institute of Technology (the project’s home), the Hebrew University of Jerusalem (which houses the Albert Einstein Archives) and Princeton University Press — work to sort through tens of thousands of articles and letters, the website will grow to one day feature what the publisher said may be the first free digital collection of a prominent scientist’s complete works.

Read more at Inside Higher Ed’s ‘Einstein for Everyone’