A word about font sizes

Most users experience with font’s is from Microsoft Office and they select a font and a size and the document springs into that style.

Did you catch that I used the word style? When we talk about things that are printed they have things such as a width and height that is to be printed on. Graphical Artists may spend hours tweaking this or that to get it just right as it spits out the printer.

Back in the early days one of the chief pain points of word processors was what you saw on the monitor was never what came out the printer. To solve this Corel WordPerfect 5.1, if I recall, coined a term called What You See Is What You Get, or WYSIWYG Editor.

The market took off as laser printers entered homes and those noisy dot matrix printers were thrown out. Soon Inkjets would show up and everyone became a graphical artist capable of editing a photo to fit that paper in it like a pro.

Those users now run big businesses and are decision makers so today I am going to talk about how this experience is something to be careful of on Web Design. Web Design is not paper, every user has a different size viewing device and the amount of time you put into making sure it looked perfect on that glossy 5X6 is directly related to that word I used Earlier, “style.”

If I create a website that is using code called Cascading Style Sheets that sets the font and size the way we would in a WYSIWYG editor the only people who will see it the way intended is one ones with the exact same video card and monitor size.

As a web designer this is a huge issue because we love to make those key decision makers happy with what we are creating, but if I code the website’s title which we call h1’s to be style

h1{ font-size: 16.5px;}

What I just did is destroy the experience for most of the visitors who do not have this decision makers device.

Instead in web design we have to code a website so I is based off of what device is viewing it. To do this we use a few other size formats that are built for the web. You can use em, rem, or vh to do this so that a title on Bob’s flip phone is readable and is still top quality on Sandy’s new iPhone Xr.

As of 2019, yup it is the new year already, there is not many platforms that allow web developers to use those size formats.

In order for us to pull this magic off it takes changing how the framework displays it’s content, in the old days of the early 2000’s we used tools like bootstrap to show three different versions of a website.

In modern times, Apple puts out near 20 different screen sizes a year and High Definition Media devices creatively labeled as Laptops are out there making it worse then ever.

In order for the business who is buying a website to actually reach it’s target audience with a site that is readable and usable, web developers are forced to spend many hours getting a website built then making it “look right” by changing the style of everything for each device type.

Up until August of 2018, we had to create a list of every device we wished to support and write a set of instructions for each device. I had enough of this repetitive coding and I coined the term Device Responsive Design.

The basic idea is the website will ask the device “Hey how TALL are you? ” “Oh, ok… how wide are you ?” Then the website will run a set of rules that uses the very modern size formats to display that h1 just perfect for whoever is viewing.

By default, there is no platform that uses these new file formats yet and they still use the age of px we see in Microsoft Word. Coding this kind of magic takes a lot of time and skill and can hard to watch for a customer who is trying to see live changes as they happen.

So rest assured, you have hired the best there is at making this old logic turn in to magic code that looks great on everyone else’s device.