A tier list ranks things into bands labelled S, A, B, C, D and F. The letters are a school grading scale, except for the first one, which is not.
Where S came from
S sits above A and stands for shu — 秀, "excellence", or in some tellings simply "special". It arrived through Japanese games: arcade titles and later gacha games used a rank above the top of a conventional scale for the rarest items and strongest characters.
Fighting game communities picked it up for character rankings, and from there it spread to ranking anything at all. The oddity of a scale that runs S, A, B, C, D, F is entirely explained by S having been added to a scale that was already complete.
The missing E is inherited too: American school grading skips it, on the usual explanation that E for "excellent" and E for "failing" would be confused. F stands for fail.
What happened afterwards is the more interesting part, because it kept happening. Once S was the ceiling, games needed something above S, and produced SS, SSS, SR, SSR and eventually UR; "ultra rare" being where the escalation gives up on letters and says what it means. Any scale with a fixed top grows a new top, because what a scale keeps being asked to do is separate the best from the merely excellent.
Worth knowing before you design your own bands: if your S tier holds nine things you have not made a tier list, you have made a list, and adding S+ above it will not fix that.
Why tiers rather than a ranked order
Because ranking things against each other is a much harder task than sorting them into buckets. A strict order of twenty items asks you to defend nineteen adjacent comparisons, most of which nobody cares about and several of which you cannot honestly make. Six buckets asks one judgement per item.
The buckets also carry information a ranking destroys. Positions four and five in an ordered list look adjacent; if four belongs in A and five belongs in C, the ordering has concealed the only interesting thing about the pair. Tiers show where the gaps fall, and the gaps are usually the whole argument.
The failure mode is a list where everything lands in B, which happens when nobody decided what the scale measures. Saying out loud what S and F stand for before you start is most of the work, and it is why two people’s lists of the same twenty things are only worth comparing if they agreed on that first.
Why good tier lists avoid drag and drop
HTML has a native drag-and-drop API. It does not fire on touch devices at all.
That is not a minor gap. Tier lists are made on phones more than on desktops, so a tier list built on native drag and drop simply does not work for most of the people trying to use it, and it fails silently, with items that will not move and no explanation. A finger on a screen produces touchstart and pointerdown; it never produces dragstart, so the handler that would have picked the item up is never called and nothing on the page indicates that anything went wrong.
The workaround is reimplementing dragging with pointer events, which works and is fiddly. Pointer events unify mouse, touch and pen behind one set of handlers, but you then own everything the browser used to do for you: the drag image, the drop targets, the auto-scroll at the edge of the screen, and touch-action: none on the item so the browser stops scrolling the page instead of moving the thing you are holding. Miss that last one and the list slides away underneath your finger.
It also stays unusable with a keyboard, which native drag and drop is too. Tap-to-select then tap-to-place works on every device, is reachable with Tab and Enter, and is faster once you have done it twice: one tap on the item and one on the row beats dragging across a screen, particularly when the destination is below the fold.
Why the image is drawn rather than screenshotted
There is no browser API that converts an element into an image. The usual workaround wraps the HTML in an SVG foreignObject and rasterises that, which works in some browsers and is blocked outright by a strict content security policy.
It has quieter problems as well. An SVG rendered that way is its own document: it cannot see your stylesheet, does not load your web fonts, and any image inside it from another origin taints the canvas, at which point toBlob throws a security error instead of handing back a file. Each is fixable by inlining more of the page into the SVG, and the fixed version is larger and slower than drawing the board yourself.
| Approach | Works everywhere | Fixed output size | What it costs |
|---|---|---|---|
| Ask the reader to screenshot | yes | no | varies by device and zoom |
foreignObject in an SVG |
no | yes | inlined fonts, CSS and images |
| Draw onto a canvas | yes | yes | the layout is written twice |
The last row is the honest cost of the approach used here: the board exists as DOM for editing and as canvas drawing code for the export, and the two have to be kept saying the same thing. In exchange the output is a fixed size regardless of window width, zoom level or font settings. A screenshot varies with all three.
Two details separate a canvas export from a good one. Draw at the device pixel ratio and scale down in CSS, or the text is soft on every phone made in the last decade. And wait for document.fonts.ready before drawing, because a canvas asked to render in a font that has not finished loading substitutes a fallback without complaining; the page looks correct and the downloaded image does not.
PNG rather than JPEG, for the same reason logos are PNGs: a tier list is flat colour and hard-edged text, which is the worst case for JPEG and close to the best case for PNG.
Questions people ask
Is there a standard set of tiers? S to F is the common one. Some use S+ and SS above it, which is the same escalation happening again.
How many items per tier? However many belong there. A list where every tier has the same count is usually one where the ranking was avoided.
Does the order within a tier mean anything? By convention no — that is what having tiers is for. Some people rank within tiers anyway.
Why F and not E? American school grading skips E to avoid confusion with "excellent". F is fail.
Why are the rows always red down to blue? Convention, inherited from the templates that got copied most. It reads as a heat scale, and it means a tier list is recognisable as one at thumbnail size, before any label is legible.
The tier list maker uses tap-to-place so it works on a phone, and the spin the wheel and random team generator cover the other ways of sorting a list of things.