Image: Calculating Ideal Font Size


Carfree 1.1

Hi Everyone.

I feel like I owe everyone a thank you, and an apology. A thank you because the Carfree webapp started seeing steady use earlier than I expected. This resulted in one of the APIs I was using, specifically one to do an approximate geolocation based on IP address, to reach a request limit. This in turn, caused the Carfree webapp to fail. So, I thank you, and apologize for that.

I’ve switched to a new IP geolocate provider, and the webapp *should* see more stability for a while. At least, where geolocation is concerned.

So, please do continue planning trips with it, and by all means get in touch with me if you have any questions about or ideas to improve the Carfree webapp.

 


Carfree

 

It’s taken me a few months, but I finally have a Carfree app that I’m ready to share with everyone.

What is Carfree?

Whether you’re trying to go “car light”, or remove your dependency on a car altogether, this app should help you decide the best way to get to where you want to go, without using a car. It has a few features that I hope you’ll find neat.

The Blue Circle

When the map first loads, you’ll see a blue circle located where you are, as best the app can tell. Any place in the circle is within a 7km ride, or about 30 minutes. Most of the time, you can cycle to these locations faster than taking transit. The map itself also colour codes bike-friendly infrastructure, and roads labelled as highway or arterial, to help you choose the route you want to take.

Your Preference of Cycling or Transit

Whether you prefer to take your bike or take your local transit, the app will give you the ideal route to take to where you’re going. When you search for destinations, the ones closest to you are favoured.

Categorized Locations

Looking for places to visit? The app can show you places nearby and give you the best route to get there. Step-by-step instructions are available for both cycling and transit options.

 

Whether you’re trying to go car light, or car free altogether, give this app a try. Your feedback is welcome!

 

Carfree

 

Carfree lives on Github. You can also send comments to me on Twitter.


Typeset. A JQuery Plug-In

 

In July 2012, I wrote a blog post on calculating the ideal font size for any viewing device. I’ve since written a JQuery plugin that typesets elements on a page automatically. I call it TypeSet. All settings are applied inline, for now, using relative em units. I still consider it a work in progress, it will probably have bugs, but I encourage you to check it out and give feedback!

 

Check out TypeSet

 

The plug-in queries your monitor resolution and uses it to calculate what your ideal font size should be, and is designed to be future-friendly.

 

You might be wondering: What about mobile devices? Their screens are quite small, wouldn’t that shrink that calculated font size? In this case, TypeSet gets the users default font size, compares it to its calculation, and uses the larger of the two.

 

Enjoy!

 


9YO all done colouring

image


9YO adding shading and highlighting into her picture.

image


Be Strong With Emphasis: Semantics

There are advantages of using <strong> over <b>, and <em> (as in emphasis) over <i>. I’ll try to explain the differences of these semantics as simply as possible.

In HTML, <b> tells the browser to display type as bold, and <i> tells the browser to display type in italics. The problem with this is that these terms are only applicable to visual display, and become problematic when you are trying to make your site compatible for accessibility devices.

Enter <strong> and <em>. While in a browser display they might look no different to their <b> and <i> counterparts, they can semantically have meaning for accessibility devices such as screen readers, and can be rendered accordingly for the device a website visitor is using.

There are additional arguments also about separating style from the document structure. This is called Semantic HTML. In this case, bold and italic styles should be contained within the CSS of your site, rather than in the HTML using <b> and <i> tags. What’s interesting about this is that <strong> and <em> does not have to mean “make bold” or “make italic” if you decide to redefine it’s style to simply a change of color.


8YO designs her first cereal box. :)

image


Spring Colour Chart 2013


Ideal Font Sizes

For those who don’t already know, there’s been some really interesting conversation in the web design community on the topic of responsive design. In short, it describes a method by which a single site template can serve content for both largish sized screens like desktops and laptops, as well as smallish sized screens like smartphones, and perhaps tablets.

 

But the typography guy in me has always been somewhat conflicted about whether the font sizes in the content are being displayed adequately. Especially after reading an article like the one on Smashing Magazine: 16 PIXELS For Body Copy. Anything Less Is A Costly Mistake. In short, it suggests that a larger font size works for web copy because it is usually viewed from further away. In other words, the ideal font size will vary depending on the viewing distance between the content and the reader. This led me to another realization. As we strive to future-proof our designs, we should expect that ideal font sizes will change as monitor resolutions increase, so is there a way we can calculate the ideal font size? I think there might be.

Influence of ideal reading text size

As mentioned earlier, this post was influenced by an article, reiterated on the iA site, that states that there is a relationship between reading material distance, and it’s ideal legible font size. My first question was: How do you define ideal font size in relative terms?

The answer to this I think lies in something called fovea centralis:

The fovea is responsible for sharp central vision (also called foveal vision), which is necessary in humans for reading

So we need “foveal vision” to read, fine. How does it work? The part that stuck out for me was:

The fovea sees only the central two degrees of the visual field.

I’ve also read that it’s only one degree. But regardless, it’s small. And within this visual field, one can focus on about 4 letters at a time. This probably means that with any book you read, you’ll be inclined to place it far enough away so that you can read about 4 letters at a time, per the comfort of your foveal vision. Interesting, but is that useful information? Maybe, but not on its own. Must read more.

Common comfort distances for viewing screens, in home theatres?

Doing more searching, I stumbled upon a discussion about angle of view (or field of view) in the context of the ideal distance to put a large HDTV away from the couch. It was anywhere from 20-40 degrees, an average of 30 degrees. Interesting. It made me think that there must be a similar discussion in the context of positioning one’s monitor.

 

That led me to this gem from my very own Canadian government. It confirms that the ideal viewing angle is 30 degrees.

Lightbulb

Like the crackle of an incandescent bulb, I realized something. Ideal viewing distance should mean that the reading media is positioned far enough away to accommodate a 30 degree viewing angle, give or take. Within this field of view lies foveal vision, which uses 1-2 degrees of FOV. Does this not sound like the beginnings of a ratio that can be calculated? It sure does!

Calculations for ideal font size (The Meat)

Here we go. Let’s assume that you have a screen, any size really but we’ll say that it’s 1600 x 900.

 

Like a good proper computer user you are, you’ve situated the screen at the proper distance of about a 30 degree field of view. Well done.

 

The next step, admittedly, I fudged a little. But we don’t use square monitors, so let’s average 1600 x 900 to arrive at a 1250 pixel perfect circle diameter. This circle reflects a 30 degree field of view, and within it is our 1 degree or so of foveal vision. So:

 

1250 * (1/30) = 42 (rounded). Our foveal vision on this screen is about 42 pixels wide.

 

But let’s not forget, the foveal vision accommodates 4 letters, so:

 

42 / 4 = 11 (rounded). One letter should be set for 11 pixels wide.

 

But wait, fonts are not usually measured by width, and certainly not on the web, so now what? I found that there is no easy answer to translating width measurement to font height. While it seems there are scripts that allow you to detect a font’s x-height, they are laborious. Browsers don’t usually calculate them. I haven’t found an elegant solution for this part yet, so it’s time for another fudgery. Assuming that the font is reasonably well proportioned, we can use the golden ratio to extrapolate what an ideal font height might be.

 

11 * 1.61803398875 = 18 (rounded).

 

And there you have it. The ideal font size on my laptop is about 18 pixels, give or take. While perhaps not foolproof, this at least starts the process of finding a reliable and repeatable calculation to decide what the ideal font size should be for any screen.

 

Web designers? What do you think?