Help:Font

Some basic font styling can be achieved using pre-existing HTML tags, or where possible, equivalent wikitext markup. For more creative needs, you will probably need to use inline CSS properties. <span> elements are usually recommended as unlike a <div> , they will not interrupt the regular flow of text.

<span style="font-family: Corbel; font-size: 20px; color: purple;>'''This is a brief introduction to some of the most relevant properties.'''</span>

This is a brief introduction to some of the most relevant properties.

Tutorial

Font

Appearance and/or availability of standard type-fonts may vary between not just the desktop and mobile skins, but also potentially across devices and even web browsers. .ttf packages for two specific font-family options are installed for this project, those of Magneto-Bold— quickly recognizable as the Cars logo font—along with Impact-Univ, another common choice in promo. With respect to accessibility and page performance, these should not be used particularly excessively; however, certain classes (namely .franchise-font) exist for instant application.

Font style

	Wikitext	HTML	CSS style	Recommended use cases
Regular	Text	Text	—	—
Italic	''Italic''	<i/> <em/>	font-style: italic;	Standalone work titles.
Bold	'''Text'''	<b/> <strong/>	font-weight: bold;	Emphasis/distinction
Bold italic	'''''Text'''''	<b><i/></b>	font: italic bold;	—

Size

font-size can be set to specific px or em values, or a % ratio dependent on the parent element(s). For overall consistency, the former (and traditionally px) is highly preferred.

The editor also includes quick-buttons for:

	HTML = Wikitext	CSS (approx).	Recommended use cases
Big	<big/>	font-size: larger;	—
Small	<small/>	font-size: smaller;	Sub-notes/appended info; e.g. release years in infoboxes.

Font color

Use color: with any six-digit hex color value; at least 140 names are also supported. A FF0000; red Tools like W3's HTML Color Picker can help you select the color you want; imagecolorpicker.com even lets you pick from an image upload.

Theme Colors Standard Colors

Underline style

Goal	Property	Demo	Notes
Underline	text-decoration-line:	<span style="text-decoration-line: underline;">Underline</span>
Double underline	text-decoration-style:	<span style="text-decoration-line: underline; text-decoration-style: double;">Double underline</span>
Thick underline	text-decoration-thickness:	<span style="text-decoration-line: underline; text-decoration-style: double; text-decoration-thickness: 2px;">Thick underline</span>
Dotted underline	text-decoration:	<span style="text-decoration: underline dotted;">Dotted underline</span>	Tooltips are best presented this way, so a reader knows there's something inside.
Dashed underline		<span style="text-decoration: underline dashed;">Dashed underline</span>
Wave underline		<span style="text-decoration: underline wavy;">Wave underline</span>

Effects

	HTML tag	CSS prop(s) approx.	Notes / Recommended use cases
Strikethrough	<s/>	text-decoration: line-through;	Ideal for text which was once but no longer correct/relevant. Outside of meta documentation and/or talk pages, this end is usually achieved in a more formal manner.
Double strikethrough	—	text-decoration: line-through double;
SuperScript	<sup/>	vertical-align: super; font-size: smaller;	Exponents
Subscript	<sub/>	vertical-align: sub; font-size: smaller;
Small caps	—	font-variant: small-caps;
lowercase Uppercase (All caps) capitalize	—	text-transform: lowercase; text-transform: uppercase; text-transform: capitalize;	Should not be relied upon for titles as all words will be capitalized, including words like "of", "the" etc.
Hidden	—	visibility: hidden;	By comparison, display: none; completely hides the element, and some browsers/screen-readers will treat it as if it doesn't exist at all.

Text effects:

	Effects - values		Notes / Recommended use cases
text-shadow	A	1px 0 0 #000;	Applied also to the text-decoration effect. Effectively creates outline, shadow, etc. Useful in mitigating otherwise poor text-to-background color contrasts; see {{SS}} for some examples