How can I make list elements (`<li>`) more readable, while still being subtle?

Anon_0000 · May 1, 2025, 8:22pm

Problem

I am redesigning my card templates. They should follow the following rules:

Must work on any display size (Desktop and Smartphone).
Must work with dark and light mode (e.g. using .nightMode)
The main info must be the focus, other elements mustn’t distract from it.
The design should allow skimming of all important info without much cognitive load.

I don’t really know much about design but I think I achieved a very reasonable result. I do wish to improve readability subtly for my list elements though. Here’s what I mean – In the following picture, the list elements are a bit “overloaded”, especially on small screens:

I’d prefer there to be some sort of visual distinction, making it easier to find the different li elements. Granted, on this card it isn’t that bad. But other cards do have longer text, because the symptoms cannot be reasonably shortened.

Proposed solutions

#1

At first I thought all I needed to do was increase the spacing between list elements. That is easy to do with the following code

li:not(:last-child) {
	margin-bottom: 10px;
}

Result:

While this works, I’m not really happy with it. I cannot really put my finger on the issue that I’m having though. So, I tried another option.

#2

I figured I could also add colors to the li elements. All I’d have to do is make is visible, while still beeing subtle.
It could be achieved by something like this:

li:nth-child(even) {
	background-color: rgba(240, 240, 230, 1);
	border-radius: 0.125rem;
}
li:nth-child(odd) {
	background-color: rgba(230, 240, 240, 1);
	border-radius: 0.125rem;
}

But I cannot get it to look subtle, visible and somewhat stylish. Result:

This background version looks especially bad on wider screens:

And if only a few li elements are present:

Maybe more subtle colors would help but I could not find good and fitting colors.

Question

So, does someone have ideas to make the list elements a tad more readable, while still being subtle and somewhat stylish? I’m especially looking for visual help as I’ll probably be able to code the design myself once I find something I’d like. But, of course, every kind of help and ideas are greatly appreciated!

Thank you in advance!

Regarding my third 'rule'

As an example, I have an extra field which shows conditionally (only if there’s text) and which I use to show examples and additional info:

The color here, as well as in the sources box (blue box “Quellen” at the bottom) are subtle enough for me. I don’t get distracted by them and look into the white block instead (where question and answer show).

aleks_ya · May 1, 2025, 11:34pm

I’d share one specific case from my practice of making lists more readable.

It’s relevant to language learning only. Not a universal approach.

My English language cards usually have lists of examples retrieved from online dictionaries for given word. The same approach works for other languages.

There is “Cross-Field Highlighter” addon making exact words in list visible:

Highlighted words are marked with CSS style cross-field-highlighter, so you can adjust it in the card template. As HTML code is modified, it works on all devices you sync your collection.

This approach is very convenient for long lists:

Anon_0000 · May 2, 2025, 10:28am

Thanks. I don’t learn languages so this doesn’t help that much unfortunately. Though the highlighting idea is quite similar to my idea #2 I proposed above (if the highlighting were by row).

Maybe I could work with a very faint background (“highlighting”) of the rows and combine a spacing like so:

It’s very faint and almost invisible, though it does help me somewhat. Still not conviced this is the best solution. And it has a big caveat: Due to its faintness, it’s basically invisible on some screens / monitors.

Here’s the code:

li:not(:last-child) {
	margin-bottom: 0.25rem;
}

li:nth-child(even) {
	background-color: rgba(240, 240, 230, 0.2);
	border: 2px solid rgba(240, 240, 230, 0.6);
	border-radius: 0.125rem;
}

li:nth-child(odd) {
	background-color: rgba(230, 240, 240, 0.2);
	border: 2px solid rgba(230, 240, 240, 0.6);
	border-radius: 0.125rem;
}

Anon_0000 · May 4, 2025, 3:24am

Just dropping a few more ideas.

#1

Pictures and Code

This uses another approach. Colors are much less subtle but are complementary and really do help in visually separating <li> elements.

li:not(:last-child) {
	margin-bottom: 0.25rem;
}

li:nth-child(even) {
	background-color: rgba(173, 216, 230, 0.3);
	border-radius: 0.5rem;
	padding: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
}

li:nth-child(odd) {
	background-color: rgba(230, 186, 172, 0.3);
	border-radius: 0.5rem;
	padding: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
}

I dislike that the · or the numbers aren’t part of the box though.

#2

Pictures and Code

Basically like #1, but with the · / the numbers being inside the same “box”.

ul, ol {
	padding-inline-start: 0; /* Neccessary because `list-style-position: inside;` only shifts the marker, and this property is set to 40px by default*/
}

li {
	list-style-position: inside;
}

li:not(:last-child) {
	margin-bottom: 0.25rem;
}

li:not(:last-child) {
	margin-bottom: 0.25rem;
}

li:nth-child(even) {
	background-color: rgba(173, 216, 230, 0.3);
	border-radius: 0.5rem;
	padding: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
}

li:nth-child(odd) {
	background-color: rgba(230, 186, 172, 0.3);
	border-radius: 0.5rem;
	padding: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
}

The text now being directly underneath the decimal ::marker really isn’t ideal, though.

I’m still experimenting though. If I had to use the above, I’d probably change the colors though, maybe to something like this:

Hildeguard · May 4, 2025, 10:14am

Hi there

First of all, i want to complement you on your card designs. Especially the later ones look quite neat in my opinion

One idea for a general improvement for the readability of the text might be to try out different fonts. There are several fonts out there, which aim to make the characters more distinguishable (e.g. Atkinson Hyperledgible, Inclusive Sans, or Lexend). Even if you don’t have bad eysight, the might make it more easy to read the text. In my opinion, they to make text actually less subtle in a way, so it might not be what you are looking for.

There are also some fonts out there which claim to increase the speed of reading, although i don’t know if that is based on empirical data. But you could try it out.

You might also want to experiment with font-kerning, letter-spacing and line-height for general improvements in readability.

Furthermore, i do think that you might want to consider broadening your approach for adressing the issue. Changing the appearance and layout of the text will lead to some improvements, but i think you could achieve more by modifying the actual content. For this you might want to consider some or all of the following suggestions:

try to eliminate as much unnecessary words as possible
consider supstituting words with single characters, e.g. “und” = “+” , “oder” = “/” etc.
highlight the most important words with e.g. <em>, <b>, <u> etc. Consider hightlighting nouns and adjectives differently to not ‘overread’ anything.

If you want to keep the unmodified text arround for reference, you could keep it in a separate field, hide it by default via e.g. visibility: hidden; and only show it when checking a <input type="radio"> element or tapping a button.

Finally, you might want to consider using the build in {{cloze}} note type for learning content of lists. It will make it easier to remember each point of the list, because you reduce the amount of information. In addition, grading your answer is much more accurate. When you repeat a non-cloze card with a list, and you don’t remember 2 of the total 6 points, you have two options:

grade your anser as “well” and risk not remembering the 2 points the next time, or
grade your answer as “bad” or “again” and repeat the 4 points you did remember more than you would need.

When learning lists via {{cloze}} cards, these issues is alleviated. You can also selectively group some list item if you absolutely want to learn them together.

When using the {{cloze}} note type you might choose to hide the inactive clozes via the class .cloze-inactive and / or highlight the active clozes via the class .cloze, which are both added by Anki to the HTML.

Hope some of this helps

Cheers!

Anon_0000 · May 4, 2025, 3:18pm

That’s interesting. I never really considered different fonts. While it won’t help with my <li> elements, I’ll definitely try this out, as it might improve my cards overall. I also have separate css rules for <code> blocks, which might benefit from another font as well.

I couldn’t find such a font at the moment, but I found this: https://dl.acm.org/doi/fullHtml/10.1145/3502222. In short: Fonts can improve reading speed (while comprehension stays the same), but it does depend on the individual – there is no “one font fits them all”.

I left my font-kerning on auto I’m pretty sure. I tried letter-spacing but it felt subjectively worse compared to the default font spacing. I do have line-height set to 1.25 for all elements in my card though, which did really help when I did that (the screenshots already have that set).

I do that to an extend, but decided to be more verbose in some situations. Also: The screenshot I provided above shows symptoms, which cannot reasonably be shortend.

I do have a few cards which could be updated though – this one isn’t one of them, but still has the issue with the <li> elements. German words are quite long and the display on smartphones comparitively small. That’s the motivation for a better distinction between <li> elements (e.g. the reason why I increased the margin between them).

I did use cloze notes for (I think) half a year. They proved to be worse for me, which is why I converted all of my cloze cards to basic cards.

My rule here is easy: I didn’t remember a single thing or did it wrong? → Again.

Of course, I might be over learning a few things, but as a psychologist I’m expected to know these things from heart anyways. It works quite well for me this way, though that’s largely attributed to the way I create my cards. It it weren’t for long symptom cards (or similar), then the cards would be very, very short.

Also: I often remember longer things like symptoms or stuff like developmental changes in different age groups via small “stories”. If I do not use cloze cards, then I’m forced to use my “stories” as a means to remember, which improves retention for me drastically.

The issue with cloze cards is that I’m too good at remembering patterns. I often didn’t have to read the card, as the pattern of the text I could see and the occluded text triggered the memory – which unfortunately wasn’t available once I needed it outside of anki though. For the same reason, I try to not do the other suggestion you had:

Altough there’s one distinction: If it’s a terminal program or code, then it does get special treatment:

In summary: I’ll have a look at different fonts. I’ll also still be looking for ways to get a better distinction between <li> elements. Thanks for your advice!

Hildeguard · May 5, 2025, 3:46pm

Ok yeah, i get your points. Sometimes the learning material really cannot be condensed any more withouth loosing to much information or relevant context. If mnemonics work great for in those cases, then than thats a good approach.

One more thought i had about highlighting the different list items would be to try out a unique color for every list item. On the other hand, this might make it less subtle and more distracting. And until sibling-index() is implemented in browser engines, you would probably have to use javascript.

Anon_0000 · May 5, 2025, 9:26pm

Could you elaborate, please? I’m assuming you’re not talking about color or background-color here (or stuff like borders, shadows, ect.). But how else can I uniquely color <li>?

You should know that I’m still a novice at programming and especially in design. Maybe what your talking about is very obvious for ‘non-novices’.

Hildeguard · May 6, 2025, 8:56pm

Yeah i acutally did mean color / background color But it was more of a random suggestion than really thought out. I thought that maybe giving each list entry a unique color might make them more distinguishable. But then again, this might make it look a bit too goofy, and for e.g. spreadsheet designs they usually just use two colors to distinguish the different rows, just like you did.

I was thinking of something like this:

Back Side Template

{{FrontSide}}

<hr id=answer>

{{BackSide}}

<script>
var elem = document.getElementsByTagName("li");
var object_length = elem.length;
var index = object_length - 1;

for (i = 0; i <= index; i++){
    mult = i * 20;
    color = `hsl(${mult}, 50%, 50%, 0.3)`;

    var div = document.createElement("div");
    div.style.background = color;
    div.classList.add("list_item_wrappers");
    elem[i].parentNode.insertBefore(div, elem[i]);
    div.appendChild(elem[i]);
}

Styling

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

    max-width: 600px;
    margin: auto;
}


.list_item_wrappers {
    padding: 0.5rem;
    padding-left: 2rem;
    margin: 0.5rem;
    border: 1px solid grey;
    border-radius: 0.5rem;
}

Which should give you this:

Topic		Replies	Views
Modernize default card templates for readability: revised proposal and technical details Suggestions	25	691	February 4, 2025
Modernize default card template for readability and simplicity Suggestions	30	651	January 23, 2025
Need help with card-design "CSS box problem" Card Design	6	1154	March 15, 2023
Better Designed Card Templates Card Design	6	1469	January 22, 2025
Multilevel List for Card styling Card Design	2	622	May 1, 2023

How can I make list elements (`<li>`) more readable, while still being subtle?

Problem

Proposed solutions

#1

#2

Question

#1

#2

Related topics