Great discussions here and on Reddit raised important considerations I incorporated below, but ultimately convinced me that the default should be changed. Now, I’m laying out my case in more detail. I’ve also posted a shorter, less technical version on Reddit.
The problem
Anki’s default card templates are too hard to read, holding back learning efficiency. Lines can stretch to over 200 characters—triple the recommended maximum. Vertical spacing is cramped, making it easy to lose your place. And centered text forces you to hunt for each new line. While these issues impact shorter cards and narrower windows less drastically, they add cognitive overhead to each review, distracting from Anki’s primary goal: learning.
The main tradeoff
The biggest obstacle to adopting these changes is that the new template adds a few, more complex CSS rules, but it’s a worthwhile trade. The barrier to customization—editing code—is already high. My changes raise it a bit further but dramatically reduce the need for customization in the first place by making the default far more readable.
The current design makes sense given all the competing priorities the developers have to balance. But I believe it’s the wrong balance, sacrificing broad, out-of-the-box usability for shorter code.
The solution
The changes below solve these problems with minimal modifications to the codebase. With the exception of the divider, they only affect default note types (what you get with a new note type or profile). Existing notes stay exactly as they are unless manually updated. The changes continue to meet formal accessibility guidelines and likely improve real-world accessibility by making cards more readable.
This is how to fix it:
1. Wider line spacing
line-height: 1.5;
Space between lines makes text easier to read. While less text fits on screen, users can easily scroll when needed—just as Anki prioritizes readable font sizes over fitting more text. Note that essentially all books, magazines, and professionally-designed websites make the same choice—more generous line spacing for readability. If you only implement one change from this proposal, make it this one. It’s the biggest readability-bang for your simplicity-buck.
I think 1.6
looks best on desktop and 1.5
on mobile. And 1.5
is a common accessibility recommendation. This proposal defaults to the smaller change.
2. Text alignment
text-align: start;
With centered text, your eyes have to hunt for the start of each new line. While many prefer centered text for very short cards, left-aligned text works well for cards of any length, including short ones.
Using start
instead of left
automatically adjusts to whichever language the app is set to, whether it reads left-to-right like English or right-to-left like Arabic.
3. Shorter line length
max-width: 650px;
Research on the best line length is inconclusive, but generally points to shorter lengths. “50-75 characters” is probably the most common guideline. But with Anki’s current styling, lines can stretch to over 200 characters on a laptop screen. Limiting text width would also limit the width of images, but this should usually be preferable. Large mnemonic images for med students come from premade decks, which won’t be affected by this change.
max-width: 650px
caps lines of text around 75 characters. A bit shorter would be fine; longer would defeat the purpose.
4. Appropriate margins
margin: auto;
padding: 40px 20px;
Setting a maximum width necessitates an automatic margin so that the text block is centered in wider windows. There are several ways to combine this with additional white space around the text at narrower window sizes. The most intuitive of these is padding
.
I’ve chosen to keep the same space on the sides as the current default, 20px
. The top is a harder choice. To my eye, 80px
or so looks best on desktop, 30px
on mobile. 40px
is a compromise. (Ideally this would be handled in reviewer.scss
to allow different values for desktop and mobile, but I don’t know this can be done without affecting existing note types.)
5. Modern fonts
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 19px;
Arial was designed for 1980s computer screens, before modern font rendering techniques existed. Today’s devices come with system fonts carefully tested for their specific screens (which means the images below don’t do them justice). They take advantage of technical advances such as:
- optical-sizing—for automatic adjustments based on text size;
- subpixel rendering and font hinting—for better clarity and kerning, especially at small sizes; and
- variable weights—for a wider range of weights.
Modern Arial uses some of these as well, but less effectively, particularly at smaller sizes, where its aging design shows its limitations.
The font stack above ensures each device uses its native system font: SF Pro on Apple devices, Segoe UI on Windows, and Roboto (usually) on Android. While this requires more code than just arial
, it means every user gets the font specifically designed and tested for their screen technology. (Ideally, we could just use sans-serif
and let the system font come from reviewer.scss
, but I don’t know how to do this without affecting existing note types.)
Given the cumulative effect of all these changes on legibility, decreasing the font size slightly can actually further enhance readability, by decreasing the space over which the eye has to scan to see an equivalent amount of text. This is especially true on mobile.
6. A better divider
/* To be adapted for reviewer.scss or elsewhere, not styling.css */
hr {
all: unset;
display: block;
margin: 1.5em 0;
height: 1.5px;
background-color: black;
}
.nightMode hr {
background-color: white;
}
A cleaner divider with extra space between question and answer helps mark the mental shift between the two. The current divider’s cramped spacing and dated beveled appearance work against this goal. A simpler line with more generous margins creates clearer visual separation while matching Anki’s modern design.
1.5em
margins, about two empty lines of text, creates visual separation without interrupting the flow of reading. (0.75em
, about one empty line, looks too dense to me, but it’s a workable alternative.)
Unlike the other changes, this can be implemented in Anki’s core stylesheets like reviewer.scss
without significantly affecting existing cards. AnkiMobile and AnkiDroid already handle some spacing differently through their default settings, so there’s precedent for platform-specific adjustments to these visual elements.
The code
Here’s the complete change in user-editable code. While these changes add some complexity to the default template, they solve significant readability issues that affect all users. The improved out-of-the-box experience outweighs the increase in code complexity.
BEFORE
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
AFTER
.card {
font-size: 19px;
line-height: 1.5;
text-align: start;
color: black;
background-color: white;
margin: auto;
padding: 40px 20px;
max-width: 650px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}