Modernize default card templates for readability: revised proposal and technical details

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:

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;
}

Example Images

5 Likes

Most of the recommendations look good. Thanks! Some comments:

To my eyes, Arial looks better than “Segoe UI”

0.75em would be better IMO. 1.5em looks like a lot of wasted space, especially on mobile.

As you said, 40px looks too much on mobile.

3 Likes

Can’t you make this depend on the view height of your viewport? That way you have one value which should look good for every window / monitor / screen size.

4 Likes

I think it was mentioned in an earlier thread that the problem is that the default CSS is meant to be easy to understand, so beginners feel able to learn how it works and build on it.

Media queries were struck down because it would add too much complexity and make editing the styling too daunting for beginners.

3 Likes

I think .mobile is still easy to understand though.

(It’d be actually cool if Anki showed people only the platform specific CSS and hide those that doesn’t apply for this particular client)

1 Like

Great! :+1:

I don’t know if there is a consensus that left-aligned text works well in Anki. Typical flashcard apps have the text centered on the top, bottom, left, and right.

Many users make their own cards even medical students, according to the subreddit poll about half of medical students make their own cards.

reddit: Premade vs Making your own

It seems to me that the margins are need for desktop but not for mobile.

That’s interesting but I think one font-family is more beginner friendly. If I were a beginner I wouldn’t know how to remove them.

1 Like

In the future, Microsoft will probably replaces most default fonts with Aptos.

1 Like

I agree that’s the core problem with any change to the default, and I’ve tried hard to make my version as simple as possible (excluding media queries, for instance). But I feel pretty strongly that we’re currently in a worst-of-both-worlds situation. The default design is bad. To make it good, you have to learn CSS (and typography) that’s more complicated than what’s already in the default.

Yeah—but the code is more complicated, and the choice should probably depend on more than just the height of the viewport (it’s width and the type of device).

I’d say the strongest group of objections so far is to the font stack.

1 Like

All reasonable objections.

Sure, but there’s a consensus that left-aligned text is better for (longer) body text, and acceptable for text in general.

Thanks—I hadn’t seen this! I would still suspect that most students making there own decks are mostly using text rather than images that need to be displayed at full width; and I would still say the readable text default should outweigh the giant image default.

Definitely more important on desktop. Right now, Anki has 20px margins on desktop and slightly smaller ones on mobile. But margin: auto overrides these, so padding’s needed to stop the text from directly abutting the edge of the window/screen

2 Likes

In my opinion it is common for Anki users to include images on their own cards. e.g. users can take a picture of their textbook with their mobile and use it as is for additional explanations (by this users can avoid the effort of typing in text), or make it to Image Occlusion. Laptops make it easy to copy and paste a searched image or screenshot an image from a PDF. Also the SuperMemo 20 rule that Anki recommends for card making recommends the addition of images.

I think too large images are more user friendly than images that are too small. If a user thinks an image is too large they can manually reduce the size by double clicking on the image on the laptop (or cropping images on mobile). But if the maximum size is limited by CSS the user cannot make the image larger unless they edit the CSS. So users can reduce the size of images intuitively, but to increase the size of images requires knowledge of CSS.

2 Likes

No one will be surprised to find that I’m in the “Anki doesn’t need to look more modern” camp. And I don’t know how you’re going to get to consensus about this sort of major change – or what these changes will mean for current users vs. future users. I think some of your points are good – and I appreciate you breaking the elements out like you have – but some of it just doesn’t seem practical to me.

I agree with everybody about the fonts. I know what the font-family line means, and yet I still find it intimidating.

But for language learners – the language of the interface, and the language on the cards don’t necessarily match. So for a LTR speaker learning a RTL language, or a RTL speaker learning a LTR language, does this mean their cards will be incorrectly aligned by default – at least on one side?

I think left/right-start will still need to be controlled at a lower level than system-wide. Would you even be able to override that with direction in CSS – Styling & HTML - Anki Manual ?

I think one of the things you’ve not addressed is flexibility of window sizing. For the short-vocab-card example, you’ve shrunken your window down very small. (It’s so narrow that the Edit and More buttons have been hidden.) That seems like the only thing that is bringing the text close to the center spine of the window, where the answer buttons and top-bar menu are.

Even in that very small window, that text is oddly out-of-place. But at a larger window size – even with your width limiter – that small amount of text starts to look like it wandered off and got lost. :face_with_hand_over_mouth:
[hacky edit from your image]

4 Likes

This probably takes us off-topic, but food for thought:
Wouldn’t that mean you could only edit those parts of your note type on that specific platform? For an individual user, that would be pretty annoying – for a deck/template designer, yikes!

5 Likes

(yup, you’d need to add another option for showing all code :smiling_face_with_tear:)

2 Likes

Responding to your reply on the other previous thread first:

For shorter texts/smaller photos, and for wider windows, I think it can end up looking worse than what we currently have.

I don’t have data on how many Anki users create longer cards vs shorter ones. If it were heavily skewed in one direction, that might be an argument for the change. I suspect it’s a bit more balanced than that, but I’m not sure.

One other thing I should note is that we encourage users to stick to the minimum information principle, and such minimal cards tend to look better when centered.

This would leave users who want large images to either use a shared deck, or to figure out the margin/padding settings, which is not ideal.

While not something I feel particularly strongly about, I should note that I originally picked Arial because it or its fallback looked fairly similar across the various platforms.

Spitballing: maybe platform selectors could be used to make it clearer why multiple fonts are listed? e.g.

.card {
   ...
}

.win        .card { font-family: "Segoe UI" }
.mac        .card { font-family: BlinkMacSystemFont }
.linux      .card { font-family: sans-serif; }
.ios        .card { font-family: -apple-system }
4 Likes

I am no graphic designer, to be sure, but I agree roundly with Danika_Dakika here.

It would seem to amount to a lot of kerfuffle with little traction.

2 Likes

My two cents.

It is important to embrace modern CSS “logical” properties that aim to render the content relative to the writing direction (rtl vs. ltr), rather than a physical direction. Considering that one of Anki’s core user bases consists of language learners, this ensures content renders correctly regardless of the writing system.

As for the typography of choice, it is usually a matter of taste, although there are certainly standards aimed at improving readability, most operating systems already include legible fonts tailored to high-resolution screens. For this reason, I would avoid declaring a specific font-family and instead allow devices to choose the most appropriate default. This approach reduces unnecessary customization complexity and respects user preferences in case they want a specific one.

Likewise, I would also be against defining values with fixed units (e.g. px) because, as some people here may have noticed, these do not scale well across devices with varying resolutions or user-defined settings. Relative units like rem or em ensure consistent scaling and adaptability, making layouts more future-proof.

Also, by defining strict colors as black text (i.e. #000) on a completely white background (i.e. #fff) is bad for readability. Leveraging media queries like @media (prefers-color-scheme: dark) or relying on the browser’s default behavior for light and dark modes would result in a overall better user experience.

Finally, we can actually define a maximum length based on the number of characters each paragraph has with the ch CSS unit.


Including everything above, here’s an example of a minimalist adaptive CSS solution (obviously there are still many other things we could improve):

html {
    font-size: 62.5%; /* 1rem equals 10px now */
    line-height: 1.5;
    text-align: start;
}

.card {
    font-size: 2rem;
    margin-inline: auto;
    padding: 4rem 2rem;
    max-width: 75ch;
}


In fact, some web designers might argue that modern browsers handle many default styles effectively today, so this could be sufficient:

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}


PS. There are many modern, well maintained and widely proven alternatives to deal with CSS styles that each OS/browser includes by default, and unify the final appearance in an unopinionated, consistent and accessible way:

3 Likes

Normally this wouldn’t be necessary, because each device will choose the font it has available, so for practical purposes this is equivalent to font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif (unless someone have all those fonts installed).

I thought your reasoning behind margin: auto was to center align an element, if you’re looking to avoid content overflow an approach like max-width: min(85ch, 100%) without padding might be more appropriate.

I guess it shouldn’t be too much of a stretch to add a note setting? Maybe a radio button or similar, so that cards can be rendered without any styling or scripts (as “minimalist mode”) while retaining the current functionality (as “recommended mode”) by default. This way most users won’t experience any side changes and more CSS-experienced users gain better control over their template.

On a personal note, I’ve some issues with the way Anki / AnkiDroid currently implement default styles, as well as other clutter elements included in the default HTML template, to the point where I prefer to completely sweep them out of my flashcards with JS.

Therefore, I see a very valuable opportunity in seeing the activity this thread is having and knowing that the developers are so open to dialogue.

2 Likes

I’m sure dae’s reasoning was this makes it more readable for the average non-techy user and I agree.

4 Likes

The average user will never see those default statements, though, so there would be no such confusion.

For example, I have all these styles preloaded on my Anki cards outside of my control (and a similar situation occurs with AnkiDroid):

My understanding is that OP is suggesting to modify the style declarations with which cards are rendered by default, without any additional styling involved, and not the styles that will be present on their “Styling tab” menu.