Wikia

Community Central

Comment1

Wiki typography

TK-999 February 28, 2012 User blog:TK-999

Wikia, by default, uses the Helvetica font in its design, supplemented by Arial or generic sans–serif fonts. While this design is reliable and is satisfactory for the bulk of users, one might wish to choose a combination that fits their taste more.

Information icon 40px Tip: The examples presented are only guaranteed to work if you have the selected typeface(s) installed. Choosing similar–looking fonts or using the CSS2 @font-face rule can eradicate this issue almost completely.

Version 1: Nice and easy

Those behemoth featured articles and lists are best viewed in a sans–serif typeface, but this means you have absolute liberty choosing that font and style the headings. This combination uses Times New Roman for the headings, allowing for a more gentle look.

Heading

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.

CSS code
MediaWiki:Monobook.css
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
  font-family: "Times New Roman", "Times Roman", Times, serif;
}
MediaWiki:Wikia.css
#WikiaMainContent h1, #WikiaMainContent h2, #WikiaMainContent h3,
#WikiaMainContent h4, #WikiaMainContent h5, #WikiaMainContent h6 {
  font-family: "Times New Roman", "Times Roman", Times, serif;
}

Version 2: Expansion

One can select a different typeface for the body as well. The base setting of this variant is Cambria and Calibri.

Heading

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.

CSS code
MediaWiki:Monobook.css
#bodyContent {
font-family: Calibri, "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
}
 
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
font-family: Cambria, "Lucida Bright", "Lucida Serif", Georgia, Times, serif;
}
MediaWiki:Wikia.css
#WikiaArticle {
font-family: Calibri, "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
}
 
#WikiaMainContent h1, #WikiaMainContent h2, #WikiaMainContent h3,
#WikiaMainContent h4, #WikiaMainContent h5, #WikiaMainContent h6 {
font-family: Cambria, "Lucida Bright", "Lucida Serif", Georgia, Times, serif;
}

Version 3: Out of the ordinary

The time when one decides to jump over all existing barriers inevitably comes. This version harnesses the power of Gill Sans MT to create an elegant, calm style. I also find it more than adequate for usage as a base font.

Heading

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.

CSS code
MediaWiki:Monobook.css
#content {
font-family: "Gill Sans MT", Gill Sans, "Charlotte Sans", Verdana, sans-serif;
}
MediaWiki:Wikia.css
#WikiaArticle {
font-family: "Gill Sans MT", Gill Sans, "Charlotte Sans", Verdana, sans-serif;
}

Feedback is welcome as always.

Around Wikia's network

Random Wiki