Most of What You “Know” About WordPress Typography is Wrong

Many WordPress designers seem to think typography is nothing more than choosing the right plugin to get a bunch of “cool fonts” onto their pages and posts. That’s understandable because almost anyone might get that idea after reading the typical typography-related blog posts out there.

But the art of typography is about so much more than that, and the power of good typography can make a huge difference in the way visitors react to our WordPress websites.

Stylized view of typography concept.
No website is truly great without great typography.

The Reluctant Typographer

When we put text onto a WordPress page or post, we’re setting type. And that means, by at least one definition, we are typographers. The problem is that many of us are not very good at it. Some of us were typographers decades before WordPress was even imagined. But even more of us had never even heard the word “typography” until recently.

It’s easy to just not think about typography. What’s the point of typography, anyway, we might ask. While some studies show that good typography increases reading comprehension and eases reader fatigue, not all studies agree.

Some people say that good typography makes a page look better. Really? That’s pretty subjective, isn’t it?

Mood Music by the Steve Jobs Band

OK, but those of us who are into typography believe both of those ideas, regardless of the studies and the people who might disagree. Without even going to art school we grok the artistry of typography on a conscious and on a subliminal level. We know that typography (good or bad) makes a big difference.

As an example, marketing experts know that a big part of Apple’s coolness factor and high-quality image comes from the way Apple uses type. Steve Jobs loved typography, and from the very beginning he insisted on using a unique variant of a classic typeface and high-level typography, with everything perfectly spaced and with perfect contrast, in every bit of Apple’s marketing.

Typography is everywhere, and readers are affected by it even when they’re not consciously aware of the details. Typography doesn’t just affect the look of our pages. Typography affects the mood of the person viewing and reading our pages.

Typography expert Thomas Phinney said that, “A set of studies found two ways to measure the impact of good versus bad typography. One was ‘reduced activation in the corrugator muscle’ (people frowned less), and the other was ‘improved performance on creative cognitive tasks tackled after reading.’

So it looks like good typography might even make our site visitors happier.

Should I Stay Or Should I Go?

Here’s one more reason to bring our typography to a higher level: Maybe you’ve noticed that people don’t really like to read.

With so many other things to do, interest in reading is not what it used to be. Many of us still read for pleasure and enjoyment, but many people only read when they have to. They want to find out about something that happened, or they want to find out how something works. So they go to a website to look it up. But they really don’t want to read. And – here’s the key point – many readers are just looking for a reason to stop reading – as soon as they can.

The slightest problem with what they’re reading can make them give up. Good typography or bad typography – which one would you think might make a reluctant reader more likely to give up? Typography (good or bad) can make the difference between visitors staying on our sites or going elsewhere.

The Warning Signs of Bad Typography

Showing the relationship of two type characters that should be kerned.
Kerning refers to adjusting the space between one pair of letters.

How do we know if we have good typography or bad typography? It takes some practice and some study to actually see the difference, even though site visitors can feel the difference, even if they’re not consciously aware.

Here are some of the hallmarks of typical bad typography:

  1. Word Spacing: Two word spaces instead of one between sentences. Word space that’s too wide or (rarely) too narrow.
  2. Punctuation: Quotation marks that are straight up and down (not real quotation marks). Two hyphens instead of an em dash or en dash.
  3. Tracking: Throughout a line of type, the space between characters is too loose or (rarely) too tight.
  4. Kerning: The space between a pair of characters is too loose or (rarely) too tight.
  5. Distortion: Artificially expanding or compressing letterforms.
  6. Typeface Choices: Using typefaces that are inappropriate for the content. Using typefaces that are incompatible with each other. Using typefaces for subheads that don’t contrast well with the body text.

We could easily fill this entire page with warning signs, but these basic signs are enough for now.

SPECIAL READER TIP: Many people use the word font when what they really mean is typeface. As someone once said, “A typeface is what you see. A font is what you use.” When a designer professes love for the Roboto Condensed font, he probably really means he loves the Roboto Condensed typeface. He means that he loves the way Roboto Condensed looks on his web site. It’s unlikely that he loves the piece of software (the font) that causes Roboto Condensed letterforms to appear on his website.

How to Improve Our WordPress Typography

As more and more text has made its way online, we’ve lost the ability to control the look and feel of our text (otherwise known as type). One reason for this is the lack of precise typographic controls in web browsers, CSS, HTML, etc.

Compared to page-layout programs, our web-design tools (including WordPress) are rudimentary, and just don’t have the necessary controls to adjust the look and feel of type the way applications such as Adobe InDesign and Adobe Illustrator can. Using either of those two applications, print designers can easily control kerning and tons of other typographical niceties right down to the nth degree.

But WordPress designers? Not even close. Not yet, anyway. Yes, we can easily add some color to our WordPress text, and we can even get “really rad” by adding fonts that aren’t included with our themes – but we’re probably going to look a very long time before we find a Kern button or a Track button in our WordPress dashboards.

Software is Only Part of the Problem

Good print designers think about typography a lot, and know that type is more than just words on a page – and they work at getting the most out of their type. But the majority of WordPress designers don’t have much experience with setting type for print, so all too often our WordPress type doesn’t look as good as it should.

Most of us WordPress designers create a site something like this: We choose and set up a theme, start a post or a page, enter a page title, enter the main text (by typing or by importing), apply a style to the subheads, apply some simple formatting to a few phrases (bold or italic), plug in some graphics – repeat the process for more pages and posts – and think we’re done.

This doesn’t mean that we don’t care about design. Most of us do care a lot about the look of our sites, and we put in a lot of time and effort looking for the perfect theme, the just-right color scheme, the placement of elements on the page, and a lot more.

It’s great that WordPress designers pay attention to these things, and strive to provide good content, but when we don’t pay attention to typography, we’re leaving money on the table.

What Do Smart WordPress Designers Do?

Smart WordPress designers who realize the importance of typography can jump several steps ahead of other designers by using some of the available typography plugins, scripts, specialized fonts, and other assorted online resources.

None of the things we’re going to look at here will turn anyone into a typographer – it takes a lot of time and effort before that happens – but some of these resources will definitely make your WordPress web sites look better and more professional, without a lot of effort.

  • Kerning.js

    “Print designers have had it easy for way too long,” says Joshua Gross, developer at “This is 2014; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that. Use Kerning.js.”

    While print designers may not agree that they’ve had things easy, it’s true that it’s time for web designers to get some help in controlling their typography. And that’s exactly what Kerning.js is all about.

    To see some interesting examples of web typography, the KerningJS site is a great place to start. The home page shows lots of interesting typographic effects, but what’s really cool is toggling the Turn demo off and Turn demo on link in the upper right-hand corner of the page – and watching as the type samples change like a great “before and after” demo. According to this web site, using Kerning.js is “as easy as including a single script in your page.”

    If this doesn’t convince you that typography makes a difference, nothing ever will.

  • Simple Drop Cap

    Print designers often like to indicate the starting point of an article by setting the first letter in the article larger than the other type in the opening paragraph, and causing the paragraph type to wrap around the larger letter. This typographical device is usually called a drop cap – and in a print-layout application, it’s easy to get this effect. But if you think about it for a minute, it’s not easy to imagine how you would do this in WordPress.

    You could play around writing some CSS to do the job, but why bother? WordPress is supposed to make things easier, and many of us came to WordPress to get away from writing code.

    But don’t worry – there’s a plugin for that. The fully featured and super-easy-to-use Simple Drop Cap plugin will give you the look you want with a minimum of hassle.

    Just install the plugin, choose the look you want from the settings, select the word where you want the drop cap to appear, and click the Drop Cap button. It’s most likely that you will choose the Float Mode, since that will give you the most common drop-cap look, as shown in the graphic above.

    For those who think drop caps add high style to a page, this plugin is hard to beat. Just don’t get carried away with too many drop caps. As with many typographic effects, as a little goes a long way.

    Interested in Simple Drop Cap?

  • Golden Ratio Typography Calculator

    Starting with Pearsonified’s tenet that “The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content,” the Golden Ratio Typography Calculator can help you optimize your typography based on font size, line height, line length, and characters per line.

    Here’s the problem, and you’ve probably seen this more than a few times: You’re reading a line of type, typically a long line of type, and find yourself starting to read that same line over again because your eyes got lost during the trip from the right edge of the paragraph back to the beginning of the next line.

    Sometimes it’s because you’re sleepy or bored, but often it’s a problem with typography. Either way, it’s a turn-off, and a good way for a designer who doesn’t understand typography to make sure no one stays on the otherwise-beautiful site for more than a few seconds.

    Assuming no other problems with the web page or with the typography, the likely culprit is an improper CPL (characters per line) value. The human eye can only handle so much work at one time, and when there are too many characters (letters, punctuation, and spaces) in a line of type, the eyes quickly become confused and lose their place when trying to find the beginning of the next line.

    To make sure this common problem doesn’t chase away your site visitors, and if you don’t already have an experienced typographic eye, you can get some help from Pearsonified’s Golden Ratio Typography Calculator. On the calculator page, you enter your font size (maybe 24px), the width of the content block (maybe 600px), and press the Set my type! button.

    In a matter of seconds the site shows you some great-looking example text, with CPL and other factors calculated for a good look.

    The results show an optimized suggestion for line height, show the approximate CPL, and there’s even a button that lets you quickly re-do the calculations with different typefaces.

    And if you’re not satisfied with these optimized results, you can choose to view other variables, such as best typography for a 600px-wide setting, second-best typography for a 600px-wide setting, and optimal typography for 24px size.

    Even typographically aware designers sometimes aren’t quite sure about these ratios, so this Golden Ratio Typography Calculator isn’t just for beginners – it’s for any designer who’s hoping for better-looking, more readable type.

    Interested in Golden Ratio Typography Calculator?

OpenType Web Fonts

One of the best (and relatively simple) ways to ramp up your typography is to start using web fonts in the OpenType format.

OpenType isn’t new in the print world, but it’s only recently making a splash in online typography. Plugins, scripts, and other things we’ve mentioned can help, but OpenType really opens things up.

For one thing, OpenType fonts are easy to manage, since peripheral files are a thing of the past: An OpenType file (you can call it a font) may include up to 65,535 characters or glyphs. Standard fonts such as TrueType? Also a lot, but OpenType makes things easier.

While designers once needed several files (multiple fonts) in order to access some of the special characters and font sets, OpenType does it all with one font file. Does anyone really need 65,535 characters in one font? Yes. Or maybe. OK, not really.

But when we start thinking about all the variants such as true small caps, ligatures, alternate characters, swashes, accented characters, borders, alternative figures, ornaments, and real fractions – it becomes obvious that having a huge number of characters available (and easily accessible) is a really good thing.

And let’s not forget that OpenType keeps all the other good stuff together in just that one file: Metrics, kerning tables, outline hints, and bitmaps. Much easier to work with. This is a major big deal, and if you really want to come as close as possible to pixel-perfect type, OpenType is the way to go.

Just a few of the glyphs available in an OpenType font.
Just a few of possibly thousands of glyphs available in an OpenType font.

SPECIAL READER TIP: Wondering what a glyph is? In typography, a glyph refers to a graphic symbol that provides the appearance or form for a character. In other words, for our purposes, a glyph would typically be a character in a font. The word often comes into play while working with alternate characters in a font. The graphic at right shows just a few of the possibly thousands of glyphs available in a particular font – including some alternate characters.

  • WP Editor Tweaks for WordPress

    So far, everything we’ve talked about has been related to having a desired effect on our site visitors. But what about us? How about some typographical help to improve our working conditions?

    For those of us who spend hour after hour gradually destroying our vision while working in the back-end of our sites, there’s WP Editor Tweaks for WordPress, a lightweight and super-simple plugin that cranks up the usability factor, and that can help save our eyesight by making the text in the editing window more readable.

    This plugin improves both tabs of the WordPress editor with larger type, better typefaces, and improved typography. The effect of getting larger type is obvious to anyone, but the effect of getting more-readable typefaces is surprisingly helpful, because the plugin calls the Source Sans Pro typeface for the visual editor, and Source Code Pro for the text editor.

    We could easily increase the size of all the text in our browsers, but that’s a heavy-handed approach, and not half as good as getting larger and more-readable text where we really need it – right there in the editor window.

    This plugin is free of charge, easy to use, and definitely worth a try. As the plugin’s developer Sam Glover says, “Once you start using Editor Tweaks, you may even enjoy drafting your posts in WordPress.”

    Interested in WP Editor Tweaks for WordPress?

Typography on the Brain

A head filled with type and glyphs, with callouts for typographical terms.
Thinking about typography eventually leads to good typography.

The best page designers, going all the way back to mediaeval scribes copying The Book of Kells by hand (and even centuries before that), have paid close attention to the art of typography. And we should, too.

While it’s not necessary for us to devote our lives to the study and practice of typography, we can improve the look and feel of our websites, and increase the power of our text by thinking more about typography and by trying some of the resources mentioned here.

Typography is a huge topic – there are thousands of books written entirely about typography – and we’ve only looked at a small part the subject here. In future posts we hope to cover even more ways to put typographic knowledge and skill to work on every website we create.

Meanwhile, we can all start to notice typography wherever we are – especially on the Internet – and realize that with a little bit of extra effort we can transform our type, and take our WordPress sites to the next level of quality.

Image credit: Paul Downey, Berkhamsted, UK.

35 Responses

    • Hi Jim,

      Thanks for the note, and I’m glad that you liked the article. While it’s true that “Typography is tough,” it’s actually a lot easier than CSS and PHP and all that stuff…at least for me. :)

      And you’re right in your assessment that, with a relatively small amount of effort, designers can make a really big difference in the quality of their websites with better typography.

  • The Incredible Code Injector


    Thanks for the article. I have published in print and am very aware of the effects of good typography. I want to increase the “readability” of my Twenty Eleven sites, so I was eager to try some of your suggestion.

    1. So, I go to Kerning.js, and it says, “Using Kerning.js is as easy as including a single script in your page. Just… ”

    I went to Dashboard>Appearance>Editor and added the above as the last line in the editor box and absolutely nothing changed.

    2. So this time I tried Simple Drop Caps: I downloaded and activated it. The instructions include “Customize the settings on Simple Drop Cap settings page.” Except I haven’t a clue as to where the Simple Drop Cap settings page is . . .

    I am holding off on trying a third plug-in until I hear from you.

    Thanks in advance,


    • Dear Neal,

      Thanks for your comment. I’m sorry about the problem you’re having with the kerning script.


      Unfortunately, as is the case with so many website-related things, things are often not as easy as developers make it sound.

      When Joshua Gross, of, said to “just” add that script, it seems that he was exaggerating the simplicity a bit. Apparently you have to do a lot more than that in order to give the script something to work with…and if you look further down on his page, you’ll see some CSS code that he used to activate some of his typographic effects.

      Here’s some additional information with a lot more details that might help you get some better results with that script:

      Here are some similar kerning-trick pages you might find interesting:


      Half the fun of working in WordPress is trying to figure out where developers hide things, and it’s not always easy. :)

      To get to the Simple Drop Cap settings, go into your Dashboard, move your mouse down over the “Settings” and then down to “Simple Drop Cap”

      In other words: Dashboard > Settings > Simple Drop Cap

      That’s where you’ll find the settings.

      I hope you’ll have fun with it. It’s definitely easier to use than the kerning script.

      Thanks again for your comments.

      • The Incredible Code Injector


        Thanks for the prompt response. I went to the kernel sites and threw my hands up in exasperation. (Of course I exaggerate.) Since you used the word “fun” with the Simple Drop Cap, I tried that first.

        As per your instructions I did “Dashboard > Settings > Simple Drop Cap.”

        When I got there, the “Float Mode” was checked and nothing else. I pressed “Save Changes” and nothing happened.

        So I went back, kept the “Float Mode” checked, and also checked “Drop Cap Automation.” This time, I got results:

        When I returned to my site, instead of a dropped capital “T” (as in “This”) I found this bit of code as the opening to my published article (that is, this is what a reader would see):

        Not only that, but the plug-in had reduced the size of the typeface in all of the words in the first paragraph by one full size!

        So, what happened?

        Thanks again in advance for any assistance you may give me!


        PS: I am saving my courage up to attempt the kerning links . . .

  • Hi Neal,

    I’m sorry you’re having that trouble.

    What I can say is that when I tried the Simple Drop Cap plugin it worked great on my test web site.

    I wonder if you’ve read beyond what I wrote in my quick description of the plugin – wonder if you’ve checked out the actual instructions for the plugin.

    It’s possible that you missed the part that explains that, after choosing your settings, you have to go into your editing window (where you write and edit your page or post), and then select the word where you want the drop cap to appear (usually first word of a paragraph), and then click the “Drop Cap” button. When Drop Cap is activated the “Drop Cap” button appears near the editing toolbar.

    As far as the “Drop Cap Automation” setting, I wouldn’t use that option unless I wanted every paragraph to automatically have a drop cap.

    Here’s a link to the plugin instructions:

    Meanwhile, I’m happy that someone is interested in getting better typography. Let me know if you’re still having problems.

    • The Incredible Code Injector


      Thanks again for the prompt response!

      Back to the Drop Cap Automation option: mine reads “Automatically transform the first letter of all posts, pages, and custom post types into a drop cap.” That is exactly what I want, but not what happened.

      My option also reads, “This also will disable [dropcap] shortcode on post, page, and custom post type.” And I do not know what that means.

      So, I am just saying that so that I don’t look any dumber than I feel!

      So, I followed your directions (“select the word where you want the drop cap”) and it worked fine and it does improve the overall look of the post!

      So, THANK YOU!!!

      Now I will attempt Golden Ratio Typography Calculator. A question: how do I figure out the size of my font and width of the content block?


      PS: And yes, I I appreciate typography: my background is art (did some calligraphy a loooooong time ago) but I ended up a writer.

      • Neal,

        I’m happy to hear that you got the Simple Drop Cap plugin to work.

        Alternatively…and I’m not a coding expert of any kind, but I would answer your question about the “shortcode” by saying that you might want to either go back to an earlier version of your post and start over from a time before you started trying to use Simple Drop Cap – and then start over by just trying one Simple Drop Cap setting at a time. Where that option mentions disabling the dropcap shortcode, it’s referring to a code that the plugin has automatically inserted, and you can see those codes if you go into the “Text” tab in the editor window (rather than the “Visual” tab). Maybe you could try just (carefully) deleting all those codes and then start over if you’re still having problems.


        Since I’m not much of a coder, the way I would figure out the font size and the width of the content block you asked about would be to use something like the Firebug plugin that seems to work best with the Firefox web browser, which will let you view the HTML and CSS code for your post or page. Another option is, if you’re using the Chrome web browser, to control-click on Macintosh (or right-click on Windows), on the part of the page you want to check on, and when the contextual menu opens choose “Inspect Element.”

        Unfortunately, you’ll have to have some understanding of code, and also might want to find a tutorial on how to use Firebug or the “Inspect Element” feature to totally understand what you’re doing.

        But if you try either of these methods, it’s likely that you will get a much better understanding of how your posts and pages are put together…it’s pretty amazing to see all that code in the “Inspect Element” window and how it interacts with the page itself – and you can even try out different CSS settings to see how things look different without affecting your real web page – a great way to experiment with things.

        Good luck with all that…and keep at it. Thanks for reading our blog.

        • The Incredible Code Injector


          I added the Simple Dropped Cap plug-in, as per your article. I also added the Ragadjust plug-in as per ExtremeRaym’s advice.

          Not satisfied, I changed the font from the sans serif Ariel that I had been using for the past year to the serifed Georgia.

          So, here is a link to one of my recent posts:

          In it, I used a redundant drop-capped “W” throughout to give the whole page a sense of continuity.

          All in all I am very pleased with the outcome, so my thanks to you and ExtremeRaym!

          Question: Would my site benefit from the Kerning.js and Golden Ratio Typography Calculator plug-ins and OpenType Web Fonts?

          Sith agus Slainte bah!


          • Design Lord, Child of Thor

            You are welcome neal :)

            I found your article very readable, I wonder if your theme doesn’t use golden ratio already.
            You just have a small punctuation error in the first paragraph, you wrote “. . .” instead of the three no-spaces “…” which in fact must be summed in one single character “…” (the difference may not be obvious but with some fonts but it is here). The html code for this Horizontal Ellipsis is …

            Mastering the characters subtleties and typography rules is another great way to have great readable text :)

          • Neal,

            Thanks for your note here. I checked out your site there, and I think those drop caps definitely added something good to your site design. It’s interesting that you are able to use all “W”s that way, but of course I think those drop caps will look good in future posts where you start paragraphs with other letters. Very interesting. :)

            I see that you’re into rare and not-so-rare records. I still have a pretty big record collection, and sometimes wonder what I should do with all that vinyl. Somewhere during the 70s I threw out a huge amount of albums that would probably be worth a lot of money these days (what a dope)…and then bought “newer” versions of them…and of course bought lots of other records then as the 70s and 80s went on.

            In regard to your question about the Kerning.js: I don’t know if it would be worth your while to play with that or not. Personally, I don’t like messing with scripts, so I can’t really advise.

            About the Golden Ratio Calculator: That might be useful for you, although I think where that thing really comes into play is when I see people who spread out their text across the entire window of the website…such as in the header area…and use type that’s so small that the result is too many characters across the page, so the eye gets lost trying to read it.

            Open Type Web Fonts: This is a different story, and I that’s something you might have more fun with and get some better-looking pages if you tried some of those. I’m hoping to do a future post on that topic if my editor will agree.

            Thanks for reading our blog.

  • Dan
    New Recruit

    The dropcap plugin recommended here is not the best choice, since it clutters your content with a shortcode and requires manual effort for every use.

    Better ways to do this:

    1) CSS only. Just target the first letter in your content and/or excerpts. Create a dropcap class and insert it manually in your markup if you need it somewhere else. You won’t be able to do fancy dropcaps this way, however, like ones with uniform shaped backgrounds. For that you need:

    2) A plugin that wraps the first letter in your content and/or excerpts in nested span elements with a dropcap class.

    • Hi Dan,

      Thanks for your comments. You’re probably right that there are better ways to do the drop cap thing, but “better” is a subjective judgment, and whether something is a better way or not depends on who’s trying to do something

      Although many WordPress designers and developers of all levels can improve their web sites by improving their typography, I’ll ask you to understand that my post is written mostly for people (such as myself) who would rather not dig into code when there’s a nice plugin that can do the job.

      And for those those people (including myself) this plugin is a great solution.

      Thanks for reading our blog.

      • Dan
        New Recruit

        I would say “better” is quite objective many times like this, but only relative to a particular case.

        There are other plugins that work as I described and do not require any digging into code. If you want to create your own unique dropcap you would have to write the CSS, but that is true no matter what you use.

        The choice may matter the most if you envision a future time when you no longer want dropcaps and don’t want to deal with legacy shortcodes in your content. There is also the possibility of a plugin being unsupported and no longer working with a future release of WordPress, which is a bad place to be if you want to avoid coding issues. For those reasons I would say the non-shortcode dropcap options are best, but yes no single solution is ever “best” or not for long.

    • Hello ExtremRaym,

      Thanks for your comments, and I have to say that WP-Ragadjust looks very interesting, and I’m going to have to try it out.

      Bad-looking ragged line endings is one of my pet peeves, and it’s always seemed that on a web page it’s pretty hard to avoid those bad line endings…maybe this plugin will help. I’m printing out the web pages for the standard and the custom version, and definitely going to try the custom version.

      Thanks so much.

      • Design Lord, Child of Thor

        You are welcome !

        It is indeed, my own secret ingredient for readable text (combined with modular scale) :P

        I didn’t know why exactly but I had some small problems with the original js file (explained here and here, so I tweak my own version, which works like a charm, and has the great advantage to be multi-language.

        Feel free to use it if needed :)

          • Design Lord, Child of Thor

            HAHA yes, this is not a small problem, I have to admit ^^
            But it was easy to correct, the script delete words because there are certain conditions for the rag adjustments, and this condition involved a list of key words. I just delete that part of the script. Now it just take into account punctuation, words length, and some emphasis tags :)
            I tried to contact the developers, from the original js and from the plugin, but they didn’t answer. –‘

  • NOTE TO “ExtremRaym”

    Hey…I see a couple of comments you’ve put up here that I am unable to respond to. Not sure why though. This blog usually lets me (as the writer) click to respond to comments…but for two of your comments the blog system here is not giving me that option…no way to respond…so I’m writing you this separate note, hoping you will see it.

    So…about you contacting the developer of that script…I’m not surprised that they haven’t answered your attempt to contact them. That seems to happen a lot, and it’s one of the things that keeps me from using some of the plugins and things I find is when developers ignore questions.

    I’m going to ask my editor about this inability for me to respond to some of the comments here. Thanks again for reading our blog.

        • New Recruit

          Good job on this article.

          1. The “Kerning.js” just didn’t have any “language” I understood on their home page –so it was goodbye to that one. I guess I’m stuck with tracking (letter-spacing).

          2. Simple DropCap plugin: I’m using on a project right now and have used it in the past. Of the dropcap plugins, it’s the best. But I hand-code dropcaps all of the time, too. Just depends on the project. This is a light weight plugin. It isn’t even detected on Yslow whihc mean it probably adds something to the STYLE.CSS file. The file size change after disabling the plugin was only 100 bytes. That’s small!

          3. Golden Ratio Typography Calculator: I’ll play with later.

          The tools I use most to find out type size are the following: for FireFox, I use an extension called Font Finder 1.1.1 –a very cool tool. I use a lot.

          On Chrome, I’ve used “What font?” but I don’t like it as much.

          4. WP Editor Tweaks for WordPress: I just installed and I love it. Great tip. No more squinting.

          Expert article with great writing as usual. Thanks.

          • Steve,

            Thanks for commenting…and for all the details.

            I totally agree with you about the Kerning.js page. I couldn’t actually figure it out either, but I thought the page was interesting because it showed some great possibilities that people might get turned on by, and also that some people who were more in tune with scripting than I am would get something from it.

            I’m glad you like the WP Editor Tweaks so much. That plugin does something that the WordPress engineers should add as a feature. Not all WordPress users have the eyes of a 20 year old, and the magnification can really help.

            As I’ve mentioned before, there’s so much more to typography than these plugin and goofy scripts, and I hope to write more about it for this blog.

            Thanks again for your comments.

  • The Incredible Code Injector


    Glad you enjoyed the read!

    Coming from decades within the print world, a standard ellipsis is ” . . . ” (or space-period-space-period-space-period-space) if the words dropped are within a sentence.

    EXAMPLE using Christian’s first sentence in his November 7 12:49 post above: “Thanks for your note here. I checked out your site . . . drop caps definitely added something good to your site design.”


    If you are dropping the first few words of a sentence after the correct ending of a sentence, it is “. . . . ” (or period-space-period-space-period-space-period-space).

    EXAMPLE: “Thanks for your note here. . . . drop caps definitely added something good to your site design.”


    If things are different on website etc., it may be a while before I convert from traditionalisms to modernisms.

    (And I use the ellipsis at the end of a statement to imply more could be said or more is to come . . .)



    What would be the easiest way for me to experience Open Type Web Fonts on my site?

    Thanks again to the both of you and that’s all, folks!


    • Design Lord, Child of Thor

      Oh, that was interesting :)

      I should have guess that these typography rules are… language dependents :D

      I French, I never see any “space dot space dot space dot” in any books or any typography books !
      I just read the whole things about horizontal ellipsis in english and french on Wikipedia and I confirm : rules/advices/conditions are not the same.

      However, I suggest to use non-breakable space before these points in order to avoid orphans points :)

      Cheers !

    • Neal and Extreme,

      This is a great discussion we’re all having here.

      Here’s my opinion about the ellipsis: The rules for using an ellipsis are the same on a web site as they are on a printed page. The only problem is that (for various reasons) web designers and people who write for the web are often not as aware of these things as are old-time print designers and copy editors…and I’m one of those…an old-time print designer and a copy editor…and that explains the incorrect use of the various combinations of dots on so many web sites.

      I notice the problem all the time, but I accept that this is the way it is now. :)

      Also, when writing blog posts (and especially when writing e-mails and writing in comment boxes) I don’t worry about correct use of the ellipsis…just as I don’t worry about run-on sentences…I just like to use the “…” to denote a pause where I either should have started a new sentence, used an em dash, or (yes) used an ellipsis.

      For better or for worse, this is just the way it is these days.

      In regard to “what would be the easiest way for [you] to experience Open Type Web Fonts on [your] site”…well…I don’t really think there *is* an easy way. At least not right now…not yet. Actually, I’ve been reading lately about a movement to (finally) make OpenType fonts easier to use for web designers…for now it’s not easy (it’s not really even easy to do in applications like InDesign)…then there’s the problem of browser incompatibility…the problem that OpenType fonts are less likely to be “free” because so much more work goes into designing them…and also the font files are way bigger than non-OpenType fonts, which presents a problem with slower page loads.

      I’m hoping to write an article about OpenType soon.

      • The Incredible Code Injector

        CN and ER

        Well, as you can see by my post just above yours, I was posting my response about the same time that you were finishing yours.

        I cannot disagree with anything that you wrote, no can I disagree with what I wrote.

        I have noticed others use ellipses (I always want to write “ellipsises”) to connect two half sentences: an ellipsis at the end of an incomplete sentence is nospace-period-space-period-space-period-space (. . . ).

        An ellipses at the beginning of an incomplete sentence (usually one following and connected to the former) following an ellipsis is space-period-space-period-space-period-nospace ( . . .)

        This is used constantly in sub-titles on videos (movies and television shows) to show continuity in speech.

        Yada yada blah blah,


Comments are closed.