Chrisdigital | Chrisdigital's Blog

I’ve primarily used “Arial” and “Verdana” as my html text fonts. Recently, I’ve been re-visiting that as a rule. There’s been a number of Windows and Mac OS updates in the “wild” for a while now, so perhaps my options have expanded and I thought it’s a good a time as any to freshen up my work.

Cross-platform font options

With a little google searching at the end of last year I ran across this great web fonts chart. It’s awesome, as it lists Windows fonts and their Mac equivalent and sights what type of user might have them installed. Using this chart you can at least give a large chunk of your audience a slightly enhanced look, and provide similar options to the rest.

Font embedding and Dynamic font replacement techniques

There’s also a lot promise with font embedding and dynamic font replacement techniques as well. But it’s widely understood to stay away from those options for large blocks of text.

In addition, I know I’ve personally had issues with whether the text I wanted to convert was a link, could I use hover states, and if I could make the text selectable. Factors you should think about. I won’t even mention the SEO or accessibility issues that might pop up. If you go this route, your solution has to degrade gracefully, or provide alternate text somewhere on the page.

What’s coming in HTML 5 and CSS 3

Jeffery Zeldman does a round up of whats being discussed for future standards for Web typography. With new options, also comes possible licensing wars with designers and programmers.

Feel free to go down the rabbit hole and check out this comprehensive review of the history of Web typography and some of the factors involved over the years.

More Resources:

1. Combined font survey results of most common fonts used cross platform.

2. Follow “HTML5, CSS3, and web fonts” on Facebook.

3. Check out 22 Handy HTML5 & CSS3 Tools, Resources And Guides.

4. It’s also good to review character encoding basics that might influence your font decisions.

Recently I ran into a weird issue in WordPress as I was remixing an older theme for a friend’s blog. Like most people, I operate under the assumption that WordPress’ visual editor will work as the name sounds. But sometimes you can run into instances where the visual formatting of the entry/post you see in the control panel, does not match up with the content’s appearance on the blog. Glitches can show up when you hit the publish button, in this case- disappearing line breaks are the culprit. The source of the problem is likely a combination of at least two things…

Issue 1. CSS Styling in theme doesn’t provide spacing for line breaks

The theme you’re using probably doesn’t have a CSS style to address breathing room under tags. This is assuming you know enough about HTML and CSS to try to manually format your post… (look for class tags like “.post_content” or “.entry-content” or something similar in your theme css code to edit.)

Why is that?

Some theme designers “zero out” all margin and padding settings on every page element GLOBALLY (eliminating browser defaults) and then manually put it back in various css styles or html tags (to their own taste) in their code as they develop their theme. Adding a padding adjustment to address this issue to your stylesheet is what’s needed here.

Tweaking or building a WordPress theme is a process that has a lot of moving parts, it’s no surprise this got overlooked until you started posting. It’s always a good idea to thoroughly preview a theme before you invest time in it, or pop some “dummy content” into your database so you can see how your aesthetic work is developing as you go.

Issue 2. It’s a bug

Let’s just make sure we’re running the latest WordPress upgrade. Sometimes that’s a magic elixir for a bug. In rare cases, it’s not an option to immediately upgrade your install – so keep reading.

There are notorious TinyMCE bug(s) in certain browsers. To be fair TinyMCE operates with JavaScript (which means it’s at the mercy of your browsers’ implementation of JavaScript standards.)

These issues have been around for a while, not recognizing visual line breaks or not supplying the underlying tags to display posts properly in HTML was just another one.

At least, that’s what I thought before I did some more digging….

No, It’s a feature

Turns out, this seems to be a “feature” of TinyMCE, to strip and tags from posts at “save” (for XHTML compliance reasons and consistent behavior across browsers.)

Whatever the cause, it’s a source of pain for blog editors when it rears it’s ugly head. You can see a discussion here with several attempts at a work-around in WordPress forums.

My Solution:

I took the alignment advice of forum poster “dandelph” (towards the bottom of the above discussion) in combination with an edit to my “style.css” file:

Step 1. Style it

I added a case to address this in my style.css file: .post_content p {padding-bottom:10px;} //adds 10px of padding under each tag

Step 2. Give TinyMCE a reason to keep the tag

I added the post as usual via typing or cutting and pasting it from plain text in Visual Editor mode. Set up my line breaks as desired, then I highlighted it all and hit the left align button in the visual editor tool bar (behind the scenes this wraps all the paragraphs in tags) You can verify quickly by toggling over to HTML mode in the editor. The reason this works apparently is the editor understands the tags are necessary to force left alignment and leaves them alone. Go figure.

Step 3. Stick the landing

Hit “Save/Publish” button and you should be all good.

Extra Credit: Plugins and hack fixes

The WordPress plugin developer community is definitely on top of this, and those of you out there that like to muck around in code can look up how to hack the TinyMCE build that shipped with WordPress.

Here’s a post over at WP Garage that covers WordPress/Tiny MCE plugins and hacks pretty well.

WP Garage mentions a plugin that “upgrades” WordPress’ native WYSIWYG Editor to TinyMCE-Advanced. This plugin provides a suite of tweaks to TinyMCE including access to your visual editor controls. Once you activate TinyMCE-Advanced, you should see a checkbox in WordPress settings you can use to toggle the code stripping feature on or off. You also end up with a wider variety of options for your visual editor tool bar, and the editor should start behaving more like you expected.

Exploring Web fonts, moving beyond Arial and Verdana