Some Changes

We’re coming up on one year since Toby died.

1 year. 12 months. 365 days. 8,760 hours, since I last told Toby that I love him. Since I heard him say he loves me. Since I’ve heard anything come from his voice at all.

It still weighs on me, clearly. I understand from other parents that have also lost their children that this is normal. It could take years to feel “normal” again, if it happens at all — which brings me to the point of this post.

I’m making, and have made, some changes.

Brampton Cycling Advisory Committee

In September of 2021, I formally resigned from the Brampton Cycling Advisory Committee. I think the letter I submitted with my resignation explains my reasons best.

“The death of my son Toby to cancer has forced me into a position where I have been re-evaluating everything in my life. One of those things is a greater emphasis on spending time with my family.

I don’t feel that I have the same energy or mental fortitude that I did when I applied for the committee. I’m not the same person that I was — the person that was appointed to serve this committee and the City of Brampton.”

Don’t get me wrong: I still think bicycles are awesome. But my style of advocacy, for better or worse, was confrontational. This was intentional. The reason was not just to be a pain in the ass (though that was kind of fun for a while), but because growth takes time in politics, undoing growth happens quickly. Transparently challenging ideas is a fast way to evaluate whether they hold any water, even though, generally, people don’t like being challenged.

The reason why I mention this is that I’m actually an introvert. Any speaking engagement I’ve ever been to has relied on careful preparation, anticipation, and attention, which left me feeling exhausted at the end every single time. I simply do not have the energy for that anymore — or at least for now. While advocacy was something I certainly cared (and still care) about, perhaps because I’ve already invested so much time in it, I don’t know that it’s something that brings me joy. It feels like an obligation, somehow. An obligation that feels misaligned with my priority of spending time with my family.

Work

Because of the often confrontational nature of my advocacy, and observing a phenomenon called “doxing”, there were certain things I kept mostly private — or at least wasn’t very vocal about — including my full-time employment because of instances I observed where friends were reported to their employers over disagreements on Twitter.

Doxing or doxxing: To publicly identify or publish private information about (someone) especially as a form of punishment or revenge

https://www.merriam-webster.com/dictionary/dox

I want to start changing that up a little bit. My work has been an important part of my life too.

For the last 11 years, I’ve been a full-time employee, in some capacity or another, for the AIR MILES Reward Program. Most recently, my role was “Sr. Content Specialist, Publishing” for Marketing Shared Services. For many years, I was able to put some of my design, and a lot of my development skills, to work within this role. But not full-time.

I recently accepted a new role, starting in January 2022, within the AIR MILES Program of “Developer, Productivity Tools”. With this move, I hope to get myself back into a headspace of designing and developing useful products for the AIR MILES marketing team, full-time.

Papineau Homes

My family has decided that it’s time for a change of scenery. We’re co-purchasing land in Northern Ontario, and will be documenting the process of creating new dwellings there — ultimately with the intent of monetizing the content to help pay for “nice to haves”. We’re calling this project Papineau Homes. We’ve already released a few videos, mostly introductory stuff. We don’t really have a release schedule yet, but I encourage anyone who is interested to subscribe to the Papineau Homes YouTube channel for updates.

The Bikeport

The pandemic has continued to take its toll on cycle training lessons for The Bikeport. I’ve been continuing to offer a service agreement for data aggregation with BikeBrampton, and starting to prototype other services that could be offered province-wide as I prepare to move to Northern Ontario. I’m also looking for ways to make it easier to manage an online shop using affiliate marketing and drop shipping services.

Other Development Stuff

Gradually, I’ve been getting back into web development. I’ve released a WordPress theme on GitHub that I use as the parent theme on all of my websites. However, I feel that the pièce de résistance of my recent development effort is converting a proof of concept I had for web typography framework, and producing a WordPress typography plug-in with it. In my mind, if you feel inclined to check out these projects, these should be considered perpetual alpha versions. I update and support them as I need to, they’re not intended for general use on WordPress sites. If they were, I would have submitted them to the official WordPress repository. 🙂

I’ll try to remember to write more on these projects later.

In the meantime, a fair amount of personal development time is going into creating my own personal finance software, using custom WordPress post types. *LOL* I’m just not happy with solutions on the market right now. Especially when it comes to creating reports on my finances that I want to see but cannot have, but could create myself for free. I might share some screen captures of that work later, but it’s definitely intended to run on personal web servers on local computers only!


Image: Calculating Ideal Font Size


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!

 


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.


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?


Web Safe Fonts

Periodically, I like to revise my list of web safe fonts. I know that these lists exist all over the internet, but I like to keep my own records to reflect my own expectations.

These results check against operating system font installations for Mac OS X 10.3+ and Windows XP.

The web safe fonts are:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Symbol (Interestingly, this is the only font result that isn’t also one of Microsoft’s Core fonts for the Web
  7. Times New Roman
  8. Trebuchet MS
  9. Webdings

Trademark and Copyright Symbols

Some pointers on using trademark and copyright symbols such as ®, ™, and © effectively:

  • It’s okay to use a sans serif symbol with serif text.
  • When using a ® or a ™ after a word in text, the symbol should look a little smaller than half the x-height of your text. As the text gets larger, the symbols should appear proportionately smaller.
  • When the copyright symbol appears before text, its target size should be the same x-height as the next character that follows it.
  • When the copyright symbol appears before a year, its target size should be the height of the smallest number in the group number set.