Notes on Typography

I am following Hackdesign, an online design course. The course consists of (weekly) lessons, each consisting of a brief introduction and a couple of resources on a specific subject.

Lately I have familiarized myself with basics of typography, first with an introduction lesson and after that with a bunch of lessons more. So I have gathered some notes, links etc. here.

Why should you care?

Why should you care about typography? In Web, text is typically a central part of the content. So we want to make it readable - not only in a way that people can read the content but even in such a way that they want to read it. In addition, typography is a big part of building a visual look for a website, digital service, product or a brand.

Typographic choices to make

There are many various choices and adjustments to make related to typography. Tommi Kaikkonen's Interactive Guide to Blog Typography is a good intro on these choices, also in other contexts than blogs.

Related to typographic choices, course resources include Jason Santa Maria's presentation On Web Typography. (He also has a book on the subject). Some points I collected from the presentation:

• Type should be a beautiful group of letters instead of a group of beautiful letters.
• There are no absolute rules for typography, only principles, best practices, guidelines. Context is important.
• Use contrast (e.g. font size, emphasis), to create hierarchy & emphasize.
  • Somewhat related, Gridlover is a nice tool for trying out typographic scales.

The amount of typefaces is pretty overwhelming and there's a separate lesson on Exploring the World of Typefaces. There are many services providing web fonts, both with and without a cost, e.g. Google Web Fonts, Typekit, MyFonts and Hoefler & Co, for example. As a tip, Typecast is a service for evaluating both typefaces and other aspects of typography.

Responsive typography

In print design, the target medium is usually fixed and allows the designer to control the end result pretty tightly. However, in web design, the design should work with many different devices, sizes, viewing distances and contexts. This needs to be considered with typography and there is a separate lesson Responsive Typography in Action.

Even though I'm somewhat familiar with responsive web design, there was one point that I hadn't considered before: in addition to screen size, the viewing distance also varies between devices. A smartphone is usually held closer to the face than a tablet. Again, a tablet, a laptop and desktop screen also have different viewing distances. More details on this are discussed in the article Responsive Typography: The Basics.

Responsive typography was discussed in Tim Brown's presentation Universal Typography (he also has a site dedicated on the subject. Some points I collected:

• (Again here) We should target good-looking groups of letters instead of groups of good-looking letters.
• Web in an evolution of all media.
• Web-site creation isn't something you learn once and then check off on your to do list.
• For any block, think the reason for it - to be read / to catch attention / ...
• As a rule of thumb, use 45-80 characters per line.

By the way, font vs. typeface?

For me it was somewhat unclear, what's the difference between a font and a typeface? So, going through some resources I found, I found out that a font has traditionally referred to an instance of a typeface with specific size and weight. However, nowadays the terms are usually used quite interchangeably. Some people think that this is OK and some disagree.

Related links

Some relevant links for finding out more:

• Butterick's Practical Typography - A web book (somewhat experimental format) on typography.
• Typographica - A website dedicated to typography and typefaces.
• The Elements of Typographic Style applied to Web - Website going through the principles found in The Elements of Typographic Style (a classic in the field of typography) and applying them on the web.

What time is it? (time zones, ISO 8601 etc.)

Time can be a somewhat complicated thing to deal with, especially if you have to take into account different time zones and daylight saving times.

When dealing with time zones, a good starting point is UTC, a successor to Greenwich Mean Time (GMT).
Time zones are expressed using offsets from UTC. It is good to note that UTC does not observe Daylight saving time. As an example, Finland is normally (at “winter time”) UTC+2 and at the summer with daylight saving time UTC+3.

To present date and time data, ISO 8601 standard is usually the way to go. It supports presenting combined date and time combined with time zone.

Some examples

An example moment in Finland’s time zone during “winter time” (offset +2): 26.3.2015 15:00

• is presented with offset as: 2015-03-26T15:00:00+02:00
• is presented in UTC without offset as: 2015-03-26T13:00:00+00:00
• can be presented with UTC with Z: 2015-03-26T13:00:00Z

An example during daylight saving time (“summer time”, offset +3): 5.4.2015 15:00

• is 2015-04-05T15:00:00:00+03:00
• and same as 2015-04-05T12:00:00+00:00
• and same as 2015-04-05T12:00:00Z

Code examples

When coding, it is often good to present times internally with ISO 8601. In the UI, time should usually be shown in user’s local time zone.

Some questions arise:

• How to handle the time zone offsets?
• How to find out what is the time zone offset for a given city in a given time (note that because of DST, the same city often has different offset in different parts of the year)

Examples in JavaScript

Moment.js is a good JavaScript library for handling dates and times. It has extension Moment Timezone to work with time zones.
Moment timezone is in the NPM module moment-timezone.

Case: UTC is known, we want presentation in Helsinki local time:

var moment = require('moment-timezone');
var winterTimeExample = moment("2015-03-25T13:00:00Z");
var summerTimeExample = moment("2015-04-05T12:00:00Z");
winterTimeExample.tz('Europe/Helsinki').format('D.M.YYYY HH.mm');
// -> '25.3.2015 15.00'
summerTimeExample.tz('Europe/Helsinki').format('D.M.YYYY HH.mm');
// -> '5.4.2015 15.00'

Case: Helsinki local time is known, we want UTC:

var moment = require('moment-timezone');
var winterHelsinki  = moment.tz("2015-03-25 15:00", 'Europe/Helsinki');
var summerHelsinki  = moment.tz("2015-04-05 15:00", 'Europe/Helsinki');
winterHelsinki.utc().toISOString() // '2015-03-25T13:00:00.000Z'
summerHelsinki.utc().toISOString() // '2015-04-05T12:00:00.000Z'

Examples in Java

For Java/JVM, Joda-Time is a good library for dates and times. For other JVM languages, there are Joda-Time wrappers, e.g. nscala-time for Scala and clj-time for Clojure.

Case: UTC is known, we want presentation in Helsinki local time:

String winterTimeExample = "2015-03-25T13:00:00Z";
String summerTimeExample = "2015-04-05T12:00:00Z";
        
DateTimeFormatter formatterHelsinki = 
    DateTimeFormat.forPattern("dd.MM.yyyy HH:mm").withZone(DateTimeZone.forID("Europe/Helsinki"));
DateTimeFormatter isoFormatter = 
    ISODateTimeFormat.dateTimeNoMillis().withZoneUTC();

System.out.println(formatterHelsinki.print(isoFormatter.parseDateTime(winterTimeExample)));
// --> 25.03.2015 15:00
System.out.println(formatterHelsinki.print(isoFormatter.parseDateTime(summerTimeExample)));
// --> 05.04.2015 15:00

Case: Helsinki local time is known, we want UTC:

String localWinterTimeExample = "25.03.2015 15:00";
String localSummerTimeExample = "05.04.2015 15:00";
        
DateTimeFormatter formatterHelsinki = 
    DateTimeFormat.forPattern("dd.MM.yyyy HH:mm").withZone(DateTimeZone.forID("Europe/Helsinki"));
DateTimeFormatter isoFormatter = 
    ISODateTimeFormat.dateTimeNoMillis().withZoneUTC();
        
System.out.println(isoFormatter.print(formatterHelsinki.parseDateTime(localWinterTimeExample)));
// --> 2015-03-25T13:00:00Z
System.out.println(isoFormatter.print(formatterHelsinki.parseDateTime(localSummerTimeExample)));
// --> 2015-04-05T12:00:00Z

Offset to UTC might not always be the best approach

After this, check out a good blog post How to save datetimes for future events - related to problems with time zone rules (especially DST) changing. In some cases it might be best to save “wall time” and time zone name for future dates.

Node: Up and Running

This time I read “Node: Up and Running” by Tom Hughes-Croucher and Mike Wilson that is btw. readable freely online at O’Reilly Atlas. The book was a quite OK introduction to Node.js.

I liked the book’s introduction to the basic concepts & elements with Node: Events & Event Loop, Buffer, Core HTTP & IO APIs etc. (Chapters 3 & 4). Chapters 5 – 7 were introduction to various other helper APIs & modules and I glanced them through more cursory. Since the book was from 2012, I feel that especially Express part was somewhat dated. I think chapter 8 (modules, npm & packages) could have been a bit earlier and could have introduced more the usage of package.json.

I would also have liked to have some tips on how to structure a Node.js project, whether & how one should use task runner like Gulp/Grunt/Make/etc. with Node. Even though this kind of information would probably now be more or less outdated.

Some related links:

• Understanding module.exports and exports in Node.js
• Interactive guide to package.json
• Building a Node.js project
• Getting Started with Node.js on Heroku

Please share if you have something in your mind, interesting tips & links etc.

The Tangled Web

“Modern web applications are built on a tangle of technologies that have been developed over time and then haphazardly pieced together.” This quote is from the back cover of “The Tangled Web: A Guide to Securing Modern Web Applications” by Michal Zalewski (Book’s website, Amazon) and I think that the quote pretty well summarizes the content of the book.

The book goes through different pieces of the web application stack and describes the basics of each piece and various peculiarities related to them, quirks in different browsers etc. Zalewski does a pretty good job going through these, even though a couple of times I would gladly have read a bit more concrete example of how certain vulnerability could be exposed etc.

The book is recommended reading to get the 101 (and a bit more) of the internals of the Web and web applications and their security aspects.

Some links related to the topic:

• Browser Security Handbook This project prepends in a way The Tangled Web book
• HTML5 Security Cheat sheet – Good resource on potential (HTML5 related) attack vectors.
  • See also https://github.com/cure53/H5SC
• The Open Web Application Security Project – Organization focused on improving the security of software
  • OWASP Top 10 – Collection of the most critical web application security flaws
  • XSS Prevention Cheat Sheet
  • XSS Filter Evasion Cheat Sheet
  • …
• There are also some deliberately insecure applications created for teaching web application security
  • WebGoat Project (Deliberately insecure JavaEE application)
  • HacmeBank (.NET application)
  • Mutillidae
• Kali Linux – advertising itself as “the most advanced and versatile penetration testing distribution ever created”

Books to deepen the understanding of the (web application) security could include the following:

• Browser Hacker’s Handbook
• Penetration testing by Georgia Weidman
• Hacking, 2nd Edition by Jon Erickson (somewhat old, published 2008)
• The art of Deception by Kevin Mitnick (human elements related to (computer) security)

If somebody happens to read this and has link/book recommendations, please share!