-
Some Changes
I’m making, and have made, some changes.
-
Image: Calculating Ideal Font Size
A few years ago, I posted an idea on how to decide ideal font sizes for a screen. I’ve since simplified the method in a way that can be implemented into a website adaptively, and explained it in this image. See my Typography Script on Github
-
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.…
-
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…
-
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,…
-
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: Arial Arial Black Comic Sans MS Courier New Georgia Symbol (Interestingly, this is the only font result that isn’t also one of Microsoft’s Core fonts for the Web Times New Roman Trebuchet MS 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…