Fun with Old School Mario and css3 transitions

Old School nes Super Mario atop the pipes!

I’ve been working on some css3 transitions and animations lately, partially because I’m a total frontend freak and partially because html5/JavaScript is going to be used to build full-feature games in the not-so-distant future. I have a raging desire to recreate The Legend of Zelda from the nes and/or Contra and know that css3 can and will be used heavily in such endeavors.

As I was going through some basic examples, I realized that I could start toying around with these notions in my examples, rather than just using basic, default css styles and I came up with this basic example, that is only super awesome because it’s Mario going down the pipe. Simply position your cursor over the Italian Stallion and down he goes! It doesn’t work in ie because it’s entirely css3 based; weak sauce, I know, but lame-browser compatibility was not on my agenda today.

You can view the demo on jsfiddle if you want to play with it.

meta-element

The meta element allows authors to attach additional information (representing metadata) to their documents. This information can be used by the user agent for rendering content, it can provide meta information for indexing, it can be used to simulate http Response Headers, and it also can be used to reload the document. The additional information also represents various kinds of metadata that cannot be expressed using the title, base, link, style and script elements.

The meta element belongs in a document’s head and has no content; its attributes define name/value pairs associated with the document. The meta element information is machine-parsable (read: machine tags and all browsers expose meta information via the dom. These name/value pairs can be used by the server to further define the document type to the user agent.

The meta element is a void element: an element whose content model never allows it to have contents under any circumstances; It requires exactly one of the attributes of name, http-equiv and charset must be specified. If the name or http-equiv attributes are specified then the content attribute must also be specified, otherwise omit content.

html5, whatwg and the dcmi are all working to create a standard lists of meta properties, however currently none exists.

name="" Attribute

The name="" attribute is the name in the name/value pair and represents document-level metadata. This representation specifies what aspect of metadata is being set. If the content="" attribute is omitted then the value of the name/value pair is an empty string. If not provided, the name of the name/value pair is taken from the http-equiv="" attribute.

The name="" attribute must be a defined metadata name or a registered metadata name. name IDL attributes must reflect the respective content="" attributes of the same name.

w3c Defined Metadata Names

application-name: the value of the content="" attribute must be a string representing the name of the Web App the page represents. If document is not a Web App, don’t use it. Cannot have more than one per document. User Agents can use application name in ui instead of the title element because title could have status messages, etc. relevant to the status of the page at a particular time.

author: value of the content="" attribute must be a string giving the name of the author(s) of the document.

description: value of content="" attribute must be a string describing the page. Must be appropriate for use in a search engine. Document cannot have more than one.

generator: value of the content="" attribute must be a string identifying software used to generate the document. Do not use this value on hand-authored pages (notepad denied!).

keywords: value of content="" attribute must be a set of comma-separated strings, where each string is a relevant keyword to the document.

w3c Other Defined Metadata Names

keyword: actual name being defined; should not be similar to any other defined name (like differing only in case).

brief description: short, non-normative description of what the metadata name’s meaning is, including the format the value is required to be in.

specification: link to a more detailed description of metadata name’s semantics and requirements.

synonyms: list of names that have exactly the same processing requirements. do not use the named defined to be synonyms, they’re only intended to allow user agents to support legacy content. Synonms not in practice can be removed, only names that need to be processed as synonyms for compatibility with legacy content are to be registered this way.

status: has three possible values: proposed, ratified, and discontinued

name="status" content="proposed": name has not received wide peer review and approval; name has been proposed and is or soon will be in use.

name="status" content="ratified": name has received wide peer review and approval. its specification unambiguously defines how to handle pages using the name including when used incorrectly.

name="status" content="discontined": metadata name has received wide peer review and has been found wanting. May be in use on existing pages, but new pages should not used it. If anything, “brief description” and “specification” entries give details of what the author should use.

whatwg Registered Metadata Names (technically none so far)

  • baiduspider – synonym for robots targeting Baidu only.
  • googlebot – synonym for robots targeting Googlebot only.
  • ia_archive – synonym for robots targeting Archive and Alexa only.
  • msnbot – synonym for robots targeting Bing only.
  • robots – comma-separated list of operators telling search engine bots how to treat content.
  • slurp – synonym for robots targeting Yahoo! only.
  • teoma – synonym for robots targeting Teoma and Ask.com only.
  • viewport – allows documents to specify size, zoom factor and orientation of the viewport used as the base for document’s initial containing block. The following properties can be used in the value of the content="" attribute: width, height, initial-scale, minimum-scale, maximum-scale, user-scalable.
  • audience – aids search engine classification and aids directory compiliations by providing the audience most appropriate for the page. Values are case-insensitive and comma-separated (singular and plural values are equal).
  • bot- – represents all bots prefixed with bot-.
  • created – document creation datetime (ISO8601 date); must follow w3c ISO-8601 datetime profile with a granularity of “complete date” or finer.
  • creator – off-Web/pre-Web creator of a work for which an author authored a document, so the creator and author can be different people. One element represents one creator; multiple creators need to be represented by multiple creator elemetns.
  • datetime-coverage – value is a non-vague date or non-vague time (not a range) expressing which time frame is most relevant to the content.
  • datetime-coverage-end – identical to datetime-coverage except only representing the end. When used without datetime-coverage-start, it is interpreted as ending a range without a start.
  • datetime-coverage-start – identical to datetime-coverage except representing only the start; if used without datetie-coverage-end, is interpreted as starting a range with no end.
  • datetime-coverage-vague – identical to datetime-coverage except its value is not clear; use when datetime-coverage, datetime-coverage-end, datetime-coverage-start are all inappaproiate (example: Tuesdays).
  • DC – stands for Dublin Core, maintained by the dcmi, reserves all strings that begin with DC..
  • dir-content-pointer – helps search engines organize results by identifying similar sections of pages in a directory with a standard vocabulary. Useful when using different conventions for displaying or printing content. Recognized values are pointer types to which numbers may be suffixed: start, toc (table of contents), intro, abstract, main, bibliography, index, afterword, update, credit and author bio. Number suffixes tell the search engine/directory to arrange like itmes in numerical order within the results. Each directory and subdirectory has its own sequence.
  • expires – defines expiration date of the document which can be used in preparation for an upcoming event (when you have a pre-set date when the document will no longer be valid, like a sign-up form for an event). Search engines should remove this page from their main search results after the expiration date or by telling the user the result is out of date.
  • format-print – informs operating system/printer driver of the preferred print medium (like paper size). Recognized values are letter, A4, legal, A5, B5, monarch, envelope 10, envelope 6-3-4 as well as values with integers and decimals, like 8.5 x 11, paper (default color), weight (usually 20lb. stock). You can specify a medium of the given color or mixed by using white, yellow, pink, blue, green, violet or multicolor. Letterhead, p2 letterhead (letterhead for all pages minus first page), watermark and plain (not preprinted/not letterhead).
  • geographic-coverage – specify geographic relevance of content.
  • keywords-not – negative keywords that distinguish closely-related themes from a document’s theme. Supports Boolean not searches.
  • page-datetime – tells search engines recency or relevance to an event date.
  • page-version – Versions regardless of date may show consecutiveness and can replace vague dates; a version number can be more useful in this case. Versions 0 and 0.n signify beta versions, where .n is number of places and 1 or higher implies final-release versions.
  • publisher – provides the document’s publisher, which often differs from creator/author when the publisher is an institution.
  • referrer – controls the sharing of referrer information with linked resources and followed links at the meta level. The content attribute accepts three values, always, default (include referrer information in non-secure conext or for https resources with same origin) and never; The never value is redundant with link rel="nofollow" and supplants said link element, which provides more control.
  • resolutions – specifies high-resolution versions of images that the browsers should use in place of lower-resolution default images if a high-resolution screen is detected to be in use.
  • rights – used to assert intellectual property rights in source code.
  • rights-standard – enable search engines to compile the types of rights allocated to the document; the example belows implies that the Page code is cc By Attribution, Share alike
  • <meta name="rights-standard" content="code;cc:bysa" />
  • subj-... – To classify by subject a page’s content, a standard subject taxonomy that will be recognized by a search engine or directory will help. Because many such high-quality taxonomies exist, only a prefix is proposed. Over time, particular taxonomies, in print or online, may be recognized here and keywords assigned for each.
  • MSSmartTagsPreventParsingie6 beta feature allowed browser to add information that wasn’t supplied by the document; this prevents that.

meta Pragma Directives

The http-equiv attribute is an enumerated attribute (taking one of a finite set of keywords), and if a meta http-equiv element is present within the document, the user agent must run the algorithim appropriate for that State. keywords and appropriate algorithims below:

State Content Language maps to keyword content-language; Content language state (http-equiv="content-language"): this pragma sets the pragma-set default language; until successfully processed, there is no pragma-set default language.

note: this will trigger a warning in validators, use lang attribute instead.

State Encoding Declaration maps to keyword content-type; Encoding declaration state (http-equiv="content-type") alternative form of setting charset="" attribute; is a character encoding declaration. Encoding declaration state’s user agent requirements are entirely handled by the parsing section of the specification.

State Default Style maps to keyword default-style; Default style state (http-equiv="default-style"): this pragma sets the name of the default alternative style sheet.

State Refresh maps to keyword refresh; Refresh state (http-equiv="refresh"): pragma acts as a timed redirect.

State Cookie Setter maps to keyword set-cookie although Cookie Setter is non-conforming; Cookie setter (http-equiv="set-cookie"): pragma sets http cookie. Is non-conforming, you should use real http Headers instead.

Pragma Directive http-equiv="" Attribute

The http-equiv="" attribute is the name in the name/value pair; tells the server to include said pair in the mime document header that is passed to the browser before actually sending the document. When the http-equiv="" attributee is used, the server adds these name/value pairs to the content header it sends to the browser.

The http-equiv="" attribute is restricted to these values: refresh, default-style and content-type in html5.

http-equiv="refresh" Pragma Directive

The http-equiv="" attribute whose value is refresh represents a pragma directive specifying either a number of seconds after which to reload the current page, or a number of seconds after which to reload a different page and the url for the replacement page.

http-equiv="default-style" (Preferred Stylesheet) Pragma Directive

meta http-equiv element attribute whose value is default-style represents a pragma directive that specifies the document’s preferred stylesheet. content=default-style-name where default-style-name is the name of the preferred stylesheet and must either match the value of the link title="name" that also has href="" attribute referencing the location of said stylesheet or, the names must match the value of the style title="name" whose contents are a css stylesheet.

http-equiv="content-language" (Default Language) Pragma Directive

meta http-equiv element attribute whose value is content-language represents a pragma directive specifying a document-wide default language; this is obselete, specify the language on the root element instead.

http-equiv="content-type" (Document Character-Encoding Declaration) Pragma Directive

meta http-equiv element attribute whose value is content-type and has an accompanying content attribute and value represents a character encoding declaration.

meta http-equiv="content-type" indicates the meta element is in the encoding declaration state and represents a character encoding declaration.

meta http-equiv="content-type" content="meta-charset string" is a specially formatted string providing a character encoding name whose value is content-type and which has an accompanying content attribute and value is said to be in the encoding declaration state.

Non-standard meta http-equiv Values
  • Allow
  • Content-Encoding
  • Content-Language
  • Content-Length
  • Content-Type
  • Date
  • Expires
  • Last Modified
  • Location
  • Set-Cookie
  • WWW-Authenticate

content Attribute

The content attribute is the value in the name/value pair. The value can be any valid string and should always be used in conjunction with a name or http-equiv attribute. It gives value of the document metadata or pragma directive when the meta element is used for these purposes. The content contains the actual metadata defined by the The name attribute.

charset Attribute (Document Character-Encoding Declaration)

The charset attribute specifies the character encoding used by the document (aka character encoding declaration). It has no effect on xml documents, and is only used to facilitate migration to/from xhtml. The charset attribute represents a document’s character encoding declaration when an html document is serialized to string form. There must be no more than one meta element with charset attribute per document.

The charset attribute represents a character encoding declaration, where charset="name" specifies a character encoding name specified by the iana registry that has a Name or Alias field labeled as “preferred mime name“, or if none of the Alias fields are so labeled, a Name field in the registry.

scheme Attribute

The scheme attribute defines the scheme that should be used to interpret the property’s value, which should be defined within the profile specified by the profile attribute of the head element. It provides additional information about the meta information; used in conjunction with the profile attribute of the head element (which provides a pointer to instructions about the contents of the profile which are directly related to meta name attribute values). The value of scheme is a uri specifying the location of the profile information on the server.

The scheme attribute is obselete; use only one scheme per field or make the scheme declaration part of the value.

Bibliography

links for 2011-05-20

link rel="prefetch" Element

Prefetch Your Content for a Primed Cache Experience

By Anticipated Preloading and explicitly pre-loading files, docs, resources that are not immediately in use, you give users a primed cache experience.


<link rel="prefetch" href="http://domain.com/pix/of-your-moms/at-my-house.png" />

link rel="prefetch" directs the browser to begin loading the image specified by href="" once the current document has completely loaded. When the user directs to the page (hopefully it’s next, but not necessarily) that has prefetched images, you have one less request necessary to make that page load.

Assistive Technologies

Assistive Technology or Adaptive Technology refers to assistive, adaptive, and rehabilitative devices for people with disabilites, including the process used in selecting, locating, and using them.

  • Screen Readers - Jaws, VoiceOver, WIndowEyes
  • Screen Magnifiers
  • Captions for Audio and/or Video
  • High Contrast Mode
  • Voice Recognition and Alternative Input

Screen Readers

Screen Readers are software applications developed to interpret what is sent to standard output (displayed on screen usually) and then to display said interpretations to the user in a format accessible to their situation. Possible display implementations are text-to-speech, sound icons, Braille output device to name a few.

Screen Readers are a form of at mostly for users with vision impairments.

Orca

Orca is a free, open source, flexible, and extensible screen reader that provides access to the graphical desktop via speech, braille, magnification and combinations of the three.

Orca supports the Assistive Technology Service Provider Interface (at-spi), which is the primary assistive technology infrastructure for Solaris and Linux operating environments.

Emacspeak

Emacspeak is a speech interface that enables visually impaired users to interact independently and efficiently with the box(es). Audio formatting and full support for acss allows Emacspeak. to produce rich aural presentations of data. Ecmaspeak speech-enables local and remote information via a consistent and well-integrated user interface.

Linux Screen Reader (lsr

The lsr project is an open source effort to develop an extensible assistive technology for the gnome desktop environment.

nvda (NonVisual Desktop Access)

nvda is a free, open source screen reader for Windows (written in Python).

jaws (Job Access With Speech)

jaws is a screen reader for Windows. jaws provides users access to screen information via text-to-speech or Braille display. jaws provides users access to the jaws Scripting Language, which effectively gives them the power to make the most of their Web experience. It is also $1,000, which makes me physically ill, but providing a scripting language to let users customize as they see fit almost makes that ok in my world.

Window-Eyes

Window-Eyes is a Windows screen reader which converts components of Windows into synthesized speech allowing for complete and total access to Windows. Windows-Eyes is a ridiculous $895.00, so you have to pay the price for a second box just to be able to use your current box…on top of whatever disability you have to cope with. Personally, I’ll never recommend Windows-Eyes based on that; moreover, I’ll do everything in my power to deter anyone and everyone interested to find another solution.

VoiceOver

VoiceOver is a screen reader built for os x, enabling access to Macintosh and/or iOS devices (via spoken descriptions) and access to the Mac (via keyboard). VoiceOver not only addresses visually impaired users, it address users with dyslexia.

Screen Magnifier

A Screen Magnifier is software that interfaces with a computer’s graphical output to present enlarged screen content. It is a type of assistive technology suitable for visually impaired people with some functional vision; visually impaired people with little or no functional vision use a screen reader.

The simplest form of magnification presents an enlarged portion of the original screen content, the focus, so that it covers some or all of the full screen. This enlarged portion should include the content of interest to the user and the pointer or cursor, also suitably enlarged.

Screen Magnifiers are common in ranges of 1 – 16, the greater the magnification the smaller the proportion of the original screen that can be viewed; so users will tend to use the lowest magnification they can manage.

Common Features in Screen Magnifiers

  • Color Inversion – Many people with visual impairments prefer to invert the colors, typically turning text from black-on-white to white-on-black. This can reduce screen glare and is useful for those suffering from age-related macular degeneration.
  • Smoothing – Text can become blocky and harder to recognize when enlarged. Some Screen Magnifiers anti-alias or smooth text to compensate.
  • Cursor Customization – The mouse and text cursors can often be modifed in several ways, such as circling it to help the user locate it on the screen.
  • Different Magnification ModesScreen Magnifiers can alter how they present the enlarged portion: covering the full screen, providing a lens that is moved around the un-magnified screen, or using a fixed magnified portion.
  • Screen Reader – Some magnifiers come packaged with a basic screen reader, allowing whatever the user is pointing out to be read alout.

Captions for Audio and/or Video

Closed Captioning is the process of displaying text on a television, video screen or other visual display to provide additional or interpretive information to individuals who wish to access it. Closed Captioning typically show a transcription of the audio portion of a program as it occurs (either verbatim or in edited form), sometimes including non-speech elements.

The term “closed” in closed captioning indicates that not all viewers see the captions—only those who choose to decode or activate them. This distinguishes from “open captions” (sometimes called “burned-in” or “hardcoded” captions), which are visible to all viewers.

Subtitles (captioning) are textual versions of the dialog occuring on the television; Subtitles usually appear at the bottom of the screen, displaying audio content as text.

Television teletext subtitles carry additional sound representations for deaf and hard of hearing viewers; Teletext Subtitle Language follows the original audio, except in mult-lingual countries where the broadcaster may provide subtitles in additional languages on other teletext pages.

High Contrast Mode

High Contrast is an accessibility feature designed to address visual impairments. People afflicted with visual impairment can use High Contrast Color Schemes to increase legibility via heightening screen contrast with alternative color combinations (some also enlarge the font size).

High Contrast Mode is an os feature; it is accessible in Windows by pressing Ctrl+Left Shift+PrintScreen.

In High Contrast Mode all images and colors are discarded. A predominant color pair is then used to display the entire os interface (usually white or yellow on black, or vice-versa).

Voice Recognition and Alternative Input

Voice Recognition

Voice Recognition is a software app that allows users to generate text (dictation) and/or operate a computer (command and control) using the sound of their own voice! Speech Recognition uses a neural net to become familiar with a user’s voice. This neural net is constructed from data the app captures and stores regarding pronounciation charicteristics for every single word a user says. Speech Recognition also uses grammatical context and frequency of use to try and predict the word a users wishes to input.

Alternative Inputs

Access/Ability Switches: are alternative input methods that can utilise controlled movement (from blinking one’s eyes, exhaling, a foot, etc.). Switch operation greatly varies according to its make/model and requirements of use. Switch Access is frustrating and time consuming and should be only used as a last resort.

Access/Ability Switches are ideal for users with physical impairments and/or dexterity difficulties.

Braille Keyboards

Braille Keyboards are not the magic bullet they sound like; usually they support a full standard keyboard but only allow the input of Grade 1 Braille.

Braille Keyboards are primarily used for terminal emulation software; their usage is mostly limited to blind or visually impaired users.

Ergonomic Keyboards

Ergonomic Keyboards designed and shaped to reduce pain/effort from typing. Ergonomic Keyboards are touted as Carpal Tunnel Syndrome killers, they reduce strains, movements of the arms, hands, wrists, fingers, etc.

Twiddler

Twiddler input device is strapped to a user’s hand (looks similar to a remote control); Equipped with twelve buttons and a mouse pointer, Twiddler is ideal for users with dexterity difficulties.

BAT Chording Keyboard

BAT Chording Keyboard has only seven keys, however via multiple keystrokes, still offers same functionality as a standard keyboard.

Overlay/Concept Keyboards

Overlay/Concept Keyboards equipped with adaptable interface that is customizable for users needs. Can have large/small keys; keys can have large/small gaps between, etc. Ideal for users with learning disabilites and/or dexterity difficulties.

links for 2011-05-19

URLs and Naming Conventions

Anyone who’s spent anytime in webdev should be quite familiar with “standard” naming conventions for folder directories: I’m speaking specifically about root/images, root/javascript, root/styles, etc. With 140 characters being a key target in mind, as well as simply trying to minimalize all of my processes/work-flows, I’ve decided to break from the flock and (gasp) make my directory structure as simple as possible. Note: this is probably not the best idea if you work with enterprise code unless your team has well established documentation and is open to ideas. Then again, if your team is that up to speed, you wouldn’t be working with enterprise code.

This process is not hard or complicated, just minimalize the naming convention, whereas root/images is now root/i. Seriously, that’s it. Point. Blank. Period. Minimalizing your information architecture and site architecture, while also possibly getting your domain/branding/content more exposure.

Note: While I find these naming conventions to be user-friendly, it should be pointed out that most people will not; at least not until you explain it to them. Also, this method is probably not as seo-friendly as the former, basically because I’m assuming that the bots recognize /img and/or /images (“standards”) for better indexing, so if Image Search is important to you, you might want to rethink this. Although I see no reason for the bots to not adapt.

wtfpl and other Licensing Bleah

wtfpl Licensing….ytf Are You Not Using It?

I am extremely proud to announce that I am licensing this blog in it’s entirety into the public domain via wtfpl (Do What the Fuck You Want To Public License). Touted as the freest of all licenses, wtfpl lives up to its name: anything being licensed through it is wide-open for public consumption. Using wtfpl is also a great step to take if you believe in open source and fsf, more importantly if you believe in webcomm.

I found out about wtfpl about a year ago via the great Paul Irish, however it was introduced by one Sam Hocevar, both of whom we all should thank and be grateful to have such balls out trailblazers lighting the way.

Creative Commons Attribution 3.0 License cc by 3.0

cc by 3.0 is also an extremely open license and gives your content more of a polished/professional touch, mainly because it comes with the Creative Commons seal of approval…..and it doesn’t have the word fuck in it. cc by 3.0 is certainly the route you want to go if you are in a corporate/restrictive/less open-minded (read douchebag-filled) environment.

gpl (GNU General Public License v3.0)

gpl is a free, copyleft license for software and other kinds of works. Again, nearly identical to wtfpl, just missing the cursing. gpl is supported by the fsf; if you choose to rock the gpl, you are simultaneously supporting open source and webcomm and automagically have earned your place into heaven.

Don’t forget the Microformats!

Regardless of the license you choose, don’t forget to add microformats goodness to them so they can be interpreted by machines as well. This is achieved by simply adding the microformats html attribute rel="license" to the referencing a element. The example below is the implementation I’ve pasted into my blog:


<a class="fwtfpl" href="http://bowdenweb.com/wp/wtfpl.html"><abbr title="Do What the Fuck You Want Public License">wtfpl</abbr></a>

Embrace Accessibility, Gain Market Growth via Universal Subtitles

Universal Subtitles

Universal Subtitles is an easy way to, you guessed it, add subtitles/captions to your videos. With an intuitive interface that guides you through 3 minimal steps, Universal Subtitles is incredibly easy to use. Actually it’s only downfall is that it’s JavaScript based, and there is no fallback if users are running without. Not having a non-JavaScript fallback is a major red flag for any client-side solution, don’t ever forget that. That said, its a great first step to adding Accessibility into your content, while also furthering your content’s reach and possibly getting user/community involvement.

By adding subtitles/captions to your videos, you are adding a layer of Accessibility to your content. In laymens terms, people with hearing disabilities have no clue what your video(s) are trying to get across to them. Congratulations, you have just added the equivalent to a handicapped-accessible entrance to your video’s content. Naysayers dismiss this percentage of web users, the same way they dismiss the non-JavaScript percentage: at such a small number, who cares right? Wrong. This is the World Wide Web people, that’s 6 billion+ and growing. The smallest percentages are actually quite a lot of potential users (read sales), as @slicknet pointed out on the ydn blog last year.

Adding subtitles/captions increases your content’s reach by…making your content more Accessible. These are really deep thoughts, I know; actually, they are so simple, it’s always quite baffling to me when I hear people rail against them. Look, now that you’ve added your layer of Accessibility, you’re also now providing content to people who are interested in what you are saying as well. Furthermore, you’re also providing this content in two more ways than before: text on screen, and (if you choose to), print. You just tripled your content without having to provide new content. get it? An added bonus is that one of the few areas of search that I think are still wide open for someone to gobble up, is video search. Go back and read that sentence about tripling your content again.

Lastly, Universal Subtitles has a widget (that could be more accessible) that you can use to allow users to play around with your video(s)/content. While the old guard will most “protect” their weak-ass “intellectual rights” and fight this to the bitter end, you can chose to embrace this and reap the benefits. For example, the demo I made for this post is a video about Firefox, an open source project that I hold near and dear to my heart. I have added subtitles/captions to it because I wanted to. Mozilla released the video “The Story of Firefox” to the public domain, and just like karma, it came back to them: they get free work, and all the benefits that I’ve listed above, simply by doing what is right.

You can check it out here

Note: the demo works lovely in Firefox 4, unfortunately I used an ogv file and the uber lame Chrome is having problems with it. I’ll address this as well as the underlying widget’s JavaScript, css, html, here in another post shortly. So, I’m lame and you need to use Firefox at the moment.

Common Abbreviations in Type Family Names

I’ve been playing around with @font-face and multiple font-weights mainly to find a font or two whose family is extensive enough to use in multiple weights. I’ve found some great ones, but there are some things I’ve noticed between the worlds of webdev and typography that could use some ironing out. Many Font Families that appear to have multiple font-family‘s, are actually entirely different Families themselves. Along the lines of css, different font-weights are still tied to the same font-family. So basically, font:400 Arial is Arial and font:700 Arial is Arial Bold. What I’ve noticed is that most of the Families are really like Super Families, whereas Arial will have a few weights, and Arial Bold will have a few weights as well. Some mesh well regardless, but some do not, and more importantly it’s really difficult to find font-family‘s that span at least half the font-weight‘s.

To add further difficulty within the Super Families, I noticed alot of new acronyms/abbreviations in the Font Names which I am completely unfamiliar with. I am sure they are sound and hold weight in the Design world, but they are all new to me. I came across the table below in pdf format and thought that I’d share it in nice, tasty, searchable html to get the word out.

You can read more and download the pdf from the illustrious fontshop.com

Common Abbreviations in Type Family Names
Abbreviation Definition Abbreviation Definition
Styles, Weights, Widths – It’s All in the (Type) Family – fontshop.com 2010 (pdf)
Rm Roman Sm Semi Bold
It Italic Hv Heavy
Obl Oblique Bd Bold
Sl Slanted Blk Black
Th Thin Comp Compressed
Lt Light Cond Condensed
Rg Regular Nar Narrow
Nr Normal W Wide
Bk Book Ext Extended
Md Medium Ex, x Extra
Dm Demi Bold Ult Ultra