Typography

Adding a few typographical flourishes is a very effective way to give your wiki a bit of personality and design. This article will give you everything you need to know to use non-standard typefaces at your wiki.

This article was written with a techie audience in mind but don't worry if you don't feel that describes you! You most likely don't have to read everything. As soon as you grok the @import statement you know enough to start experimenting on your own!

This article also isn't about typography itself either. That's a vast topic and I don't feel qualified to preach it. I've collected a few links that will give you a running start however. Instead of appending them to this article I'll feature them first. If only to make sure you understand that typography is as much art and craft as it is technology.

Let's start with an appetizer:

And here are a few more nutritious links:

• Typography 101
• On Web Typography
• Better Web Typography in a Few Simple Steps
• 10 Web Typography Rules Every Designer Should Know

To begin with

So what's there to begin with? By default web browsers know only three typefaces with the non-descript names:

• serif
• sans-serif
• monospace

What exactly these typefaces look like depends on what typefaces are installed on the machine. Which means their appearances varies wildly.

You assign a typeface to a style with the CSS font-family property:

p {
    font-family: sans-serif;
}

Fortunately this property allows you to specify not just one, but a list of typefaces. The first typeface on the list is the one the browser will pick – where available – and the rest are fallbacks. So start with the typeface you like best and move over moderately similar – and hopefully more wide-spread – typefaces on to one of the generic three.

Here's a list of typical font-family values. All the non-generic fonts of these families look relatively similar and you can be 95% certain that at least one of them is on the user's machine and that the three generic fallbacks won't be necessary.

That's not much

No. It's not -> image replacement -> @font-face -> woff/eot/ttf/otf

but also: other font- and text- properties + (px vs em vs % vs pt)

The most convenient source for web fonts is at this point in time the Google WebFonts library. Its biggest selling point is that you neither have to download anything nor have to pay any licensing fees. Google hosts the fonts for you and all you need to do is add the address of your chosen typeface(s) to your wiki. The size of their collection has become quite impressive too. Over 600 typefaces in different styles - and counting. Add to that the blazing speed with which only Google can deliver data!

http://www.youtube.com/watch?v=Ki6rcXvUWP0

Choose a typeface

First of all you need to find a typeface that suits your wiki in Google's library. Apart from the typefaces itself you should also keep an eye on the number of styles they offer. If a typeface doesn't offer an italics cut or a bold cut you won't be able to use those.

That's not exactly true. Web browsers can generate faux italics and faux bold programmatically but those pseudo-styles are rather crude. Relying on them defeats the purpose of using webfonts. So in short: Don't!

File:Neuton.png
Neuton italics	vs	Neuton faux italics
File:PlayfairDisplay.png
Playfair Display bold	vs	Playfair Display faux bold

Keep in mind that all of these typefaces have a somewhat limited character set. They don't have a glyph for each and every character in the Unicode set. Using them for headlines and other elements that stand out is perfectly safe but you should be a little careful about using them for the body text.

Add the typefaces you like to your collection. Review them to make sure they're exactly what you want. Then click on "Use". Pay close attention to the styles and character sets that are offered on the following page! You need to select all additional options manually.

Google helpfully displays a meter on the right. It shows you how much the typeface(s) will contribute to the page load. You might want to keep that meter in the green and choose no more than one or two typeface(s) per page.

Importing a typeface

Google offers three methods for importing:

1. a HTML link tag
2. a CSS @import statement
3. a short JavaScript that loads Google's font-loader

On regular web pages this order is fine. The link tag is the most convenient (and efficient) solution and the JavaScriptlet is the most cumbersome one. On Wikia pages we don't use HTML but wikitext which is kind of similar-ish (and getting more similar-isher as time goes by) but not the same. Unfortunately the link tag is not supported in wikitext. So we have to re-order that list a little:

1. a CSS @import statement
2. a short JavaScript that loads Google's font-loader
3. a verbatim tag that loads a link tag or a script tag or a style tag or other HTML...

To make that perfectly clear: You only need one of these methods. Whichever you can make work is the right one.

CSS

@import is a CSS statement and as such you have to add it to one of your CSS files - preferrably the MediaWiki:Wikia.css

File:Nuvola apps important.png

@import statements MUST be at the top. You need to put them before all other CSS rules. Browsers simply ignore @imports somewhere in the middle of a CSS file.

example:

@import url(http://fonts.googleapis.com/css?family=Monda);

Monobook, oh my

Unfortunately the iron rule that @import must be at the top causes a few problems for Monobook users. There are two files that come into play MediaWiki:Monobook.css and MediaWiki:Common.css. The MediaWiki software mashes these two files together and puts MediaWiki:Common.css at the top. That means @import rules in MediaWiki:Monobook.css are ignored by default. You must use MediaWiki:Common.css.

It gets worse if you try to use the MediaWiki:Common.css to define styles for both Monobook and Oasis (Wikia's default skin). MediaWiki:Wikia.css does not automatically get merged with MediaWiki:Common.css. You have to manually @import it. So now you have MediaWiki:Wikia.css @importing MediaWiki:Common.css with in turn @imports the typeface. That's technically possible but a lousy idea because it makes downloading and parsing the CSS in the browser really slow. Instead you should move on to the next solution.

JavaScript

The JavaScript solution makes use of the WebFont Loader which is a joint project by Google and the online fontshop Typekit. As you can see from the code below, you have to explicitly specify Google as your font provider. That's because you can use the same library for Typekit's fonts. You can also access fonts from Ascender, fonts.com and Fontdeck. Of these five Google's offer is the only free one though...

This is what the code you can copypaste from Google looks like:

WebFontConfig = {
    google: { families: [ 'Belgrano::latin' ] }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
}());

This code goes into one of your wiki's JavaScript files - preferrably the MediaWiki:Common.js. You can have multiple copies of this code in your JS file, but you shouldn't use more than one per page. And you don't need to. With the "families" property you can specify multiple fonts in multiple styles at once.

The syntax for the font definition is this: fontname : styles : subsets

• The fontname is the actual name of the typeface, with "+" signs instead of spaces. So "Berkshire Swash" becomes "Berkshire+Swash"
• the list of styles is primarily a list of font-weights: 100, 200... 900. 400 is the default weight and 700 is considered bold. You need to append "italics" to the weight for the italics cut. So a well-rounded typefaces that offers the basics styles normal/italics/bold the list would be: "400,400italics,700". If no style is specified "400" is implied.
• Lastly there's the subset. If you run an English wiki the chance that you need Greek or Cyrillic characters is slim. That means you can shave off quite a few KB of the font-size by requesting the "latin" subset instead of the whole thing. Subsetting is not required but strongly recommended.

So these are legal names:

• "Allegreya"
• "Allegreya:400,700"
• "Allegreya::latin"
• "Allegreya:400,700:latin,cyrillic

I can only scratch the surface of the WebFont Loader here but suffice to say: It has a few more features than Google's copypaste code might lead you to suspect. The most interesting one is that you can attach event-handlers to the font-loading:

• loading — is triggered when the font has started to download
• active — is triggered once the font has downloaded and is ready to use
• inactive — is triggered if the font fails to download or the browser cannot make use of it

Here's a basic example:

// find the paragraph(s) with the class "fancy-text"
// and add a throbbing animation to it
$('p.fancy-text').startThrobbing();
// fetch the webfont loader and cache it in the browser
$.ajax('http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', 
    { dataType: 'script', cache: true }
)
// wait until the webfont loader is downloaded and ready
.done(function () {
    // load the typeface "Scada"
    WebFont.load({
        google: {
            families: [ 
              'Scada::latin'
            ] 
        },
        // wait until the typeface is downloaded and ready
        active: function () {
            // end the throbbing animation
            $('p.fancy-text').stopThrobbing()
            // set the paragraph(s) in "Scada"
            .css('font-family', 'Scada,sans-serif');
        }
    });
});

This code will show a throbbing animation on the paragraph(s) with the class "fancy-text". Next it loads the WebFont Loader itself and as soon as that's done, request the typeface "Scada". The "active" callback gets executed when the font has loaded and is ready to use. Now we stop the throbbing animation and change the CSS.

Verbatim

With the help of the verbatim tag you can smuggle any kind of HTML into a wiki page. You must add the tag to your target page however, so this strategy is best suited for adding typographical effects to single pages. It's not useable on a wiki-wide scale.

First you need to create a page in the MediaWiki namespace. Let's say you call the page "MediaWiki:Typeface". You can add any kind of valid HTML here. Your first choice should be a link tag:

<link href='http://fonts.googleapis.com/css?family=Donegal+One' rel='stylesheet' type='text/css' />

You can simply copypaste the link tag from Google and be done with it, but any kind of HTML - including style and script tags - is possible. Now navigate to the target page and add this at the top of the page:

<verbatim>Typeface</verbatim>

"Typeface" is the name of the MediaWiki page you just created - without the MediaWiki: prefix. Now the contents of MediaWiki:Typeface are included into the target page (almost) unaltered.

Almost

The verbatim tag will include your HTML almost but not completely unaltered. There are two changes you'll have to cope with:

1. The & sign will be replaced with the [wikipedia:Html_entity|entity] & (ampersand). That's not a problem in HTML text or attributes but it will break JavaScript code. That means you cannot use the && or the & operators. It also means when you construct URLs with JavaScript you need to use String.fromCharCode(38) as a surrogate for the ampersand.
2. If the line-length exceeds 80 characters, all space or tab characters beyond that limit will be replaced by the entity   (non-breaking space). Again: This should be a non-issue in HTML, but it's very disruptive to CSS and JS. So keep your lines short! I don't know how this translates to other browsers and operating systems, but on my machine the source editor – when not in wide mode – is 85 characters wide.

Subsets

Using webfonts

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Wait, there's more!

Isn't there always? Typography is a huge topic and I was so busy talking about how to use typefaces at Wikia, that I haven't even begun to talk about the art of typography itself. Fortunately there are others who can do that a lot better than I possibly could. Here's a small selection of links:

• Typography 101
• On Web Typography
• Better Web Typography in a Few Simple Steps
• 10 Web Typography Rules Every Designer Should Know

And here are two sources for free fonts. The first one was picked for its quality — the second one for its sheer size. There are more sources of course...

• Font Squirrel — a small but excellent collection of free typefaces - you'll notice some overlap with Google's collection though.
• dafont.com — this site has a huge collection of free fonts. Probably the biggest on the net. Be warned though: Your mileage will vary (a lot).

Source code

This page uses a verbatim tag and this MediaWiki page: view | raw