Modernize default card template for readability and simplicity

Anki Suggestions
1

The default card template’s design isn’t just outdated—it’s unreadable. It makes studying harder and could turn off potential users.

But we can fix this while keeping the CSS as simple as before.

What's wrong with Anki's default styling? The text is hard to follow. It's too high in the window, too compressed vertically, and spans too wide. Reading requires scanning long lines of text squeezed between others, then hunting for the start of each new line since it might not be on the left. Center alignment works for headlines, not paragraphs. The font is acceptable, but not as legible or pleasant as newer system defaults. And the horizontal rule's three-dimensional details look more like rendering errors than intentional ornamentation. These choices made sense once, but are now outdated. Simple CSS tweaks can fix them!
What's wrong with Anki's default styling? The text is hard to follow. It's too high in the window, too compressed vertically, and spans too wide. Reading requires scanning long lines of text squeezed between others, then hunting for the start of each new line since it might not be on the left. Center alignment works for headlines, not paragraphs. The font is acceptable, but not as legible or pleasant as newer system defaults. And the horizontal rule's three-dimensional details look more like rendering errors than intentional ornamentation. These choices made sense once, but are now outdated. Simple CSS tweaks can fix them!2512×1482 306 KB

What’s better about this new styling? It follows contemporary web design best practices: comfortable margins give the text room to breathe, a good line height makes it easy to scan, and the shorter line length feels natural. Text renders in your system’s native font, optimized for your screen. The horizontal rule looks better too. It’s more readable and elegant—with CSS as simple as the original.
What’s better about this new styling? It follows contemporary web design best practices: comfortable margins give the text room to breathe, a good line height makes it easy to scan, and the shorter line length feels natural. Text renders in your system’s native font, optimized for your screen. The horizontal rule looks better too. It’s more readable and elegant—with CSS as simple as the original.2512×1482 232 KB

Key Improvements

  • Better readability through optimized line length, line spacing, and text alignment
  • Modern system fonts for better rendering across platforms
  • Better layout following web typography best practices
  • Clean look that maintains simplicity

All the CSS that’s needed

.card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0 auto;
  padding: 80px 20px;
  max-width: 650px;
  text-align: left;
  font-size: 19px;
  line-height: 1.6;
  background-color: white;
}

Considerations

While this design displays less text per screen, the improved readability makes scanning long texts much easier. And users who prefer denser text can achieve it by simply deleting the max-width line. Previous discussions appropriately rejected changes that were too complicated. The changes I’m proposing here are simple—in both apearance and code.

What do you think?

12 Likes
2

Nice job!

A potential issue I see is that your font size and stuff like padding only make sense for your current screen size. Make the screen / window much smaller or bigger and 80px padding could be a problem (or at least look very different). Same regarding font. That’s why anki uses percentages instead:

font-size: 150%;

Also: I think the line-height looks really bad if used in conjunction with (un)ordered lists. So that might need tweaking as well.

5 Likes
3

Thanks so much for the feedback!

You’re right that a responsive design would be better, but that would require more complicated CSS, and keeping it simple is why the current default is what it is. (But, yeah, I guess that top padding will have to come down if it can’t be adapted for mobile under the hood.)

As to the font-size, maybe I’m misunderstanding how the defaults work. When I add a new Basic note type in Manage Note Types (on Mac), this is the CSS I see:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

Out of curiosity, what don’t you about the appearance of lists? (I prefer them under the proposed style to the default.)

1 Like
4

No, seems like I changed it from 20px to 150%. I must have forgotten about that and that was the default.

To me it the spacing between the list thingies (e.g. between the bullet points) look way to big. Just preferences though.

1 Like
5

There’s some good discussion over on Reddit that should stay connected to this suggestion. Reddit - Dive into anything

3 Likes
6

One thing I’ll mention is we often recommend making cards short and atomic so you have very little text on good cards. For example,

Q: Year of Bolshevik revolution?
A: 1917.

I think left-aligned text looks great but center aligned would look better for such cards.

2 Likes
7

I think the text needs to be centered, because some languages are right to left.
Edit: The mobile device is a small screen, so using padding may result in too small a width.

4 Likes
8

So, the rationale for not using too complex CSS is as to allow new users to easily get started on learning how to customize their initial cards. Would it not be ok to use some degree more and more complex CSS, if you included ample comments on how it works? 1-3 sentences per CSS setting and at most 100 lines total in the default card styling css. Such comments could also act as a mini-tutorial to CSS syntax. Maybe new users would then be able do more customizations without prior CSS knowledge compared to the past…

3 Likes
9

You know, I really like this idea. But I can also understand why the developers would be wary of it: it might still be harder for a non-coder to parse than uncommented, de minimis CSS; if a user deletes a comment delimiter it could break the CSS; and, maybe most important, they’ll have to answer questions about it.

10

OMFG–I forgot about this–thank you. This is probably fatal to left-aligned text.

1 Like
11

I did this recently in one of my templates. Took someone here to point this silly mistake.

1 Like
12

If the user has to do anything CSS-related at all, something went really wrong. Making flashcards should be simple and easy. Anki is great for power users and overwhelming for new users.

Regarding the original idea, OP, I agree that your version looks better than the default. If it works equally well on all devices, that would be great.

2 Likes
13

I think the text needs to be centered, because some languages are right to left.

Hard disagree. Text should be aligned the way it normally is for whatever direction the text is normally shown in.

Some people LIKE centered, and that’s fine (I disagree there for a variety of centuries old typography standards reasons), but falling back on this just because it’s “equally wrong for everyone” seems silly to me.

I’m not sure guillerless’ change should be a default for Anki given its use, but for ltr it’s FAR superior to what we have now.

And, it’s easily changeable for those that need/want to.

4 Likes
14

I completely agree with your “don’t make it equally wrong for everyone” logic. But I have admit the current default of centered text works okay for single lines of text in any writing system. And centering the text is a reasonable formatting choice for displaying short texts in multiple writing systems together–a non-trivial use case.

Anki’s in-editor text-alignment buttons are buggy, at least on Mac. But that can weigh both towards keeping the default and updating it.

2 Likes
15

I’ll vote for the opposite. Left-aligned looks FAR better to my eye than centered. I can see no reason why “A:” shouldn’t be directly under “Q:”.

Also, when you’re going through a lot of cards, having a CONSISTENT and stable starting place to start reading from seems like table stakes, if not a huge win. Having multiline centering just has you having to “hunt” for the beginning of the line.

But people like different things, which is fine.

3 Likes
16

I don’t think you can just vote on it like this. A lot of people have an extreme aversion for assymetrical things (some forms of OCD I believe) and some of the previous UI decisions dae took were dependant on that. I think it should be the same this time.

If you find left-aligned cool, just edit the CSS yourself.

17

Other potential concerns I can think of:

  1. Language learners tend to create cards of extremely short words. In this case, the text is always on the left edge of the screen:

image
image1680×486 3.33 KB

  1. Medical students tend to prefer high quality and large pictures whenever possible (e.g. disease photos, advanced mnemonics illustrations). And some users may use very long text such as PDFs as images as they are. Using max-width will shrink them and is probably not desirable.

image
image1912×603 170 KB

  1. If the screen height is low, the top padding will reduce the display area for text or images. In these cases: Smaller windows on desktops, smartphones with landscape screens

image
image1486×278 3.31 KB

3 Likes
18

Your variation looks much cleaner. I understand there may be negative consequences to changing the Basic note type.

So, why not have both? Users who won’t bother to learn CSS probably would appreciate having access to this note type, it could be called Basic (modernized) or something.

2 Likes
19

New users are already facing information overload. It wouldn’t be prudent to add to it.

3 Likes
20

A WYSIWYG editor that’s aware of the notetype fields (or the entire collection, if built into anki) would be nice to have :slightly_smiling_face:

Something that lets css illiterates (self included) design templates, along with autocompletion for the fields, special fields, etc.

Would be nice if it could also validate conditional replacement syntax, and show what potential cards get generated

2 Likes