How To Customize Browser Fonts And Colors For ADHD Users?

We already talked a lot about how web experiences were designed initially to disorient people and make them stay as long as possible somewhere their focus doesn’t belong. Monetizing attention. It’s not hard to calculate who’s the most vulnerable group to face this problem.

Focus is definitely an ambivalent trait in users with ADHD and every little detail can influence it. Besides, important ones frequently lack distinctiveness.

Let’s address the elephant in the room, the design of lettering is a huge thing in every special project for a reason, though it’s hard to admit that sense doesn’t prevail form so much to dismiss it when needed.

But what are the relations between such things as typography and Attention Deficit Disorder? People with ADHD are neurodivergent, and aside from being sometimes overwhelmed by a huge amount of different elements (e.g. serifs) or thick blocks of text, they pretty often happen to be dyslexic. Meaning they meet certain issues with fluent or accurate word recognition due to neurological conditions. Not to mention that even without dyslexia pages full of visual attractions are quite a temptation to shift your focus from a barely readable text that melts into the background. A whole kit of distraction’s partners in crime.

But what if it’s not the end of the world (obviously) and there are other options?

Then, a legitimate question to ask is: what we should look at before diving into how to choose your best browser font or color?

Text

• Font type. It needs to be something simple, with clean lines. Serifs are full of strokes, decorative ones are boiling with detail. Sans serif is definitely the kind of ally that proved its effectiveness over a long time of errors and trials. Supported not by theory but by practice and best browser fonts known to be default.
• Font size. Readability is not all about what type of font it is. That’s the situation where size matters, because if it’s too small, then letters will jumble together and blend into an indistinctive ink stain. If too big — you lose the thread overwhelmed by sentences cut into three-word-line chunks. Balanced with efficiency it’d be something like 12-16 points to keep it readable.
• Line spacing. The same here, the flow of a text is also determined by lines. Usually, line spacing is recommended to be 1,5-2x the font size, this way you are set to go further.

Color

• Contrast. It is crucial to separate something from the background to make the object somehow contrasting. Browser color management is not an exception.. But notice how it is about contrast, not saturation or brightness. Meaning it’s either dark letters on a light background or vice versa, but make it pastel, for example. Dimm those colors a bit!
• Limited number. 3 or 4 are enough, you don’t want to create a colorful noise that will split attention with all the schemes “likes of which you’ve never seen” *

Sans the Skeleton. Browser font change

our reports showed a massive anomaly in the timespace continuum. timelines jumping left and right, stopping and starting… until suddenly, everything ends.

Sans is the Bosch of fonts, getting its popularity and recognition only after a century.

Jokes aside, the wide-spreading of this font family really happened on the verge of the industrial revolution. Grotesque from commercial printings went to Bauhaus and then Helvetica was born, leading the creation of the International Typographic Style. Oh, modernity. Now they’re reigning among browser fonts.

The artistic differences in movements and views that drove them aside only enriched Sans’s history, but something was still gluing them all together — simplicity.

Of course, there is no universal option that will satisfy everyone who experiences issues with concentration and focus, but we can suggest some simply to have a starting point. Great if it will suit you like a glove, but if not — you will know the direction to dig.

• Open-sans. Open Sans Optimized letterspacing and legibility. Well-defined shapes that make on-screen reading easier are crucial for ADHDers too. Concentration is the key.
• Focus-sans. Another great sans-serif option was designed specifically to enhance readability and accessibility for users with various needs, including those with ADHD. It prevents clutter and minimizes distractions. The typeface features distinct letterforms, well-proportioned characters, and ample spacing, which all contribute to its legibility. It’s highly variable and can be easily integrated with the Focus Ex tool.
• Helvetica. Well-balanced, and undoubtedly classic. Serving stylish letterforms since it’s creation is 1957 by Max Miedinger.

Less obvious and casual but interesting options:

• Dyslexie. While primarily aimed at dyslexic folks and created by the dyslexic himself, Christian Boer, with the purpose to avoid confusion between similar-looking letters, it surely eases reading for other neurodivergent people as well.
• Open-dyslexic. Open source follower of the previous one features unique letterforms with weighted bottoms, which help distinguish between different characters clearer and prevent them from rotating or appearing too close together. This, in turn, helps to improve reading comprehension and reduce the strain experienced by users.
• Bionic. Modern, and geometric design by David Perry is out of the line of specified fonts. It is especially helpful in smaller sizes thanks to its relatively large x-height and is perfectly suitable for print materials or digital interfaces. Does it help to read? Sure. But it never claimed to be the one to hit the neurodivergent audience in particular.

Users worldwide praise many other browser-safe fonts to go like well-known Calibri, Arial, Verdana, standardized Google’s Roboto, and Apple’s San Francisco. Sometimes the best font was always under your nose, so just listen to your inner reader next time you will bump into a good reading flow on your favorite page, service, or device. And don’t forget to notice when it seems like browser fonts look bad.

Let’s see on Sidekick’s example how you can change the font in the settings.

1. Go to Settings
2. Click Appearance
3. Now you’ll see options to change every type of font to the preferable one
4. Choose it from the list
5. If you don’t like the suggested ones, just find a better one on the web, download it, and unpack Then it’ll be easily found in the browser options as well
6. Great, now your eyes aren’t losing it, right?

Paint not pain: web browser color management

What do Feng Shui, the Luscher test, and color theories have in common? For centuries humanity put color on a pedestal for different reasons. Its importance was and still is a red thread for many fields that seem absolutely shattered. Despite the dissemblances, they prove that different colors affect people and their objects’ perceptions. Many studies have shown similar reactions in participants to particular shades and pigments. Some can stimulate an observer, others evoke deep feelings.

How it applies to browser appearance for ADHDers? Basically, the right scheme can help to improve focus and information digestion. And of course, there are some basic rules that can come in handy with color management. Browser, beware!

It better be consistent. A limited number of colors preferably used to color-code information will kill two birds with one stone — create easy navigation and keeps away anxiety.

Start with a neutral background (off-white, grey or eggshell) and move to a suitable contrasting text. Avoid saturated bright colors, they can be overstimulating and distractive.

Experiment. What makes your own experience cleaner? Something indifferent or the favorite pastel color on the contrary? Then all you need is a color picker. Browser is just a tool, why not make it satisfying to use. After all, you do you.

Back to the subject of the talk

Today browsers try to be at least a bit customizable. Almost all of them will let you change standard browser fonts and colors. Settings → Appearance is your lucky guiding star.

For thirsty ones and ADHD folks, there are additional options out there. Help with focus isn’t narrowed to just text and color adjustments. There are plenty of productivity-boosting tools to consider. Some of them you’ll find familiar.

Ad-blocker. The knight of time-saving. Not only it’ll block the visual noise from your already loud mind, but it additionally, increases the speed of browsing.

Focus-mode extensions. When you need something extra to overcome a deadline or just concentrate on a certain task, it can be pretty convenient to literally limit access to certain pages or even apps.

Timer. There are so many time techniques that can create the perfect routine, so you can stick with one and try to work with time intervals balancing work and rest. Common examples are the Pomodoro technique, 5-5-5, or 90/20 Rule.

Tab management. Yes, tab clutters aren’t rare beasts, that’s why you can use tab manager extensions or folders to create a system inside the chaos and avoid a fine-tooth tab fence.

To be continued…

Devil lives in the details, and so are distractions. Customization is a great weapon in this never-ending battle for maintaining focus. Now, when you are set with strategies to work on it along with fonts, and colors, and don’t forget the other tools, you can have a bit more control over attention deficit experiencing the web.

Sidekick does everything to be a great companion in it and even more. Our team is always on guard for the most productive web experience to have.