Windows needs hand-tuned hinting which is missing in many web fonts. To solve this problem, there is a tool called ttfautohint which can automatically add hinting to font files.

There is a tutorial, and an online tool called Fontie.

It is straightforward to serve static pages with Go or config file on App Engine, but how to serve static pages on App Engine with Go?

I got the following error when I tried to customize the 404 page with Go:

No such file or directory

The solution turns out to be simple: do not do both.

The file will not be accessible to Go if there is already a rule for it in config.yaml. Remove the rule from config.yaml and the file will be available to Go again (source: google-appengine-go).

Here is an exmaple to serve a custom 404 not found page:

func serve404(w http.ResponseWriter, r *http.Request) {
	w.WriteHeader(http.StatusNotFound)
	f, err := http.Dir("public").Open("404.html")
	if err != nil {
		serveError(w, r, err)
		return
	}
	defer f.Close()
	io.Copy(w, f)
}

During the construction of this site, there are many important design decisions that need to be made. One of them is to decide the font size for each level of headings, i.e., typographic scale.

Investigation

The first thing I did was to read everything online about typographic scale. I will just skip the details and jump to my opinions:

• Modular scale should be followed
• Traditional scale is obsolete
• Golden ratio or double-stranded scale do not make any sense
• Vertical rhythm should be considered

Then a little explanation.

Modular scale (geometric series) is the way how our visual perception understands relative size. When a page is zoomed in or out, the perceived aboslue length changes, but the ratio remains the same. Rather than choosing modular scale, we actually think in terms of modular scale. There is no hard rule that the ratio of modular scale must be a constant, but a constant modular ratio is the simplest and provides consistency.

Traditional scale is actually modular scale of ratio 2 for size 6 7 8 9, with some extra and missing sizes. There is no reason why we restraint ourselves to irrelevant factors, instead, we should consider the constraints from our real problem. The same reason applies to the golden ratio and double-stranded scale.

Problem & constraints

What is a good typographic scale? For a Blog article, it should at least meet the following requirements:

• Discrimination: different headings can be easily distingushed
• Consistency: all the headings looks consistent by the same principle

Besides font size, line height of each level of headings should also be adjusted to meet the requirement of vertical rhythm. Line height affects the appearance of a heading, especially when the heading is wrapped and takes up multiple lines.

Modular scale solves part of the problem, but we still have to determine the value of the modular ratio and to make the line height as consistent as possible while maintaining vertical rhythm.

The typographic scale should also satisfy these constraints:

• The line height of each heading must be an integral multiple of the line height of body copy (vertical rhythm)
• The smallest heading must not smaller than the body copy
• The number of heading levels
• The maximum acceptable size of the top heading

Optimization

Design is a process exploring all the possible solutions (the design space) to find an optimal one, i.e. an optimization problem. If we can express the problem in a mathematical form, we can solve it by computation.

The constraints are already listed. The next thing is to express the objective function, which is the inconsistency of headings from each other. What is it?

Short answer: the standard deviation of relative line height.

Long answer: The line height of each heading is different, but the relative line height (line height divided by font size) of different headings can be the same, and when they are the same, the headings look consistent. To compare two numbers, you can just use the absolute value of the difference of the two numbers, but for a list of numbers, standard deviation is an effective measure for their inconsistency.

The caculation is easy for a computer, and can be done with brute force. The program just needs to exhaustively tries each possible heading sizes that satisifies all the constraints and evaluates the inconsistency. Finally, it sorts all the solutions by the inconsistency and find the best solution.

Here is the code (runable online): a Go program to calculate optimal typographic scale.

Example

In this site, I need to use maximum three levels of headings: H1, H2 & H3. I choose 19px/30px as body copy. The search range for H3 is from 1.2*19px to 1.5*19px, and the range for H3 is from 35 to 50. Finally the solution is:

Ratio: 1.3079
H3: 23px/1.3
H2: 30px/1.0
H1: 39px/1.5

Though the line height of H2 is still not ideal, it is already the best solution given the restrictions by vertical rhythm.

Conclusion

The approach can sccessfully find the optimal typographic scale under the precise problem definition in this article. It does not rely on any mysterious process or magic numbers, but only reasoning and computation.

• The W3C Markup Validation Service
• Google PageSpeed Insights
• Pingdom Website Speed Test
• Nibbler
• BrowserStack

• Economica
• Fjalla One
• League Gothic
• Medula One
• Open Sans Condensed
• Oswald
• Pathway Gothic One
• PT Sans Narrow
• Rationale
• Six Caps
• Tulpen One
• Yanone Kaffeesatz

• The Best Font Styles for Blogging
• Size Doesn’t Matter, and What Does
• Using Media Queries To Improve Readability
• 8 Definitive Web Font Stacks

Providing Structured Data