Which is the best font-set for browsing?

silass11

This post is deleted!

kichrot

@luetage said in Which is the best font-set for browsing?:

... since most websites either load fonts for you, or define fonts that should be used, if they are found on your system.

I prefer that on all sites the text is displayed in a font that is convenient for me to read.
For this purpose, I wrote the Tampermonkey script, which replaces the font on the page, which is set in the script variable. Naturally, the font should be installed in the system.
By past this, the script allows you to configure, under your eyesight and preferences, rendering the font, for this there are variables in the font, changing which by experimenting the font display is configured.

// ==UserScript==
// @name          Correction of readability of text and contrast of images in Chrome
// @name:ru       Исправление удобочитаемости текста и контрастности изображений в Chrome
// @description	  Userscript to improve the readability of text and contrast of images in the browser Google Chrome and its derivatives.
// @author        kichrot
// @match         *://*/*
// @include       *://*/*
// @run-at        document-start
// @grant         unsafeWindow
// @compatible    chrome
// @version       0.4.1
// ==/UserScript==

var weight = 0; /* The variable changes the weight of the font/Переменная изменяет толщину шрифта */
var weight_blur = 0.6; /* The variable changes the weight and blurs the borders of the font/Переменная изменяет толщину и размывает границы шрифта */
var lightens_font_color = 0.2; /* Variable lightens the color of the font/Переменная осветляет цвет шрифта*/
var font = 'Helvetica'; /* Variable assigns the font/Переменная назначает шрифт */
/* Verdana | Arial | Helvetica | HelveticaNeueCyr | Tahoma |Lato| Noto Sans | Open Sans | Manrope | Roboto | Montserrat */
var unit = 'px'; /* The variable assigns the unit of measure/Переменная присваивает единицу измерения */
/* px | em | ex | rem | vh | vw */

(function () {
    'use strict';
    var css = document.createElement('style');
    css.innerHTML += [`*{`,
                      `-webkit-text-fill-color:currentColor  !important;`,
                      //`-webkit-text-fill-color:transparent  !important;`,
                      `text-shadow:`+
                                    `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень наверх и влево */,`+
                                    `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень вниз и вправо */,`+
                                    `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} currentColor/*тёмная тень вверх и вправо*/,`+
                                    `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} currentColor  !important;/*тёмная тень вниз и влево*/`,
                      `-webkit-font-smoothing: subpixel-antialiased /*antialiased*/ !important;`,
                      `text-rendering: geometricPrecision !important;`,
    `}`,
    `*:not([class*=\"icon\"]):not([class*=\"ico\"]):not([class*=\"button\"]):not([class*=mjx]):not([class*=vjs]):not([class*=fa]):not([class*=ms-Button-icon]):not([class*=DPvwYc]):not([class*=bb]):not([class*=icon]):not([class*=ll]):not(i):not([role*=button]) {`,
                      `font-family: ${font} !important;`,
    `}`,
    `img {`,
                      `image-rendering: -webkit-optimize-contrast !important;`,
    `}`
    ].join("\n");
    document.documentElement.appendChild(css);
}) ();

Perhaps this script will come in handy and benefit anyone.

barbudo2005

@kichrot

It works. Thank you.

I use this CSS code in Stylus to display all text in the "Lato" font ( https://www.fontsquirrel.com/fonts/lato):

p,


* > p,
* p,
*.p,


[class *= "text"] > p,
[class *= "text"] p,
[class *= "text"].p,
p > strong,
p.strong,
p > span,
p.span,
p span,
font,

section,
article,
li span,
li,
tr > td



{font-size: 28px !important;
font-family: Lato !important;
font-style: normal !important;
font-weight: 400 !important;
text-align: justify !important;
line-height: 1.3 !important;}

But in certain sites the font-size 28px break the site, so your script is useful in such cases.

kichrot

@barbudo2005 said in Which is the best font-set for browsing?:

But in certain sites the font-size 28px break the site

Personally, I don’t understand why you are doing this?
If for scaling text, then this is not the best way. It is better to use the extension Zoom Page WE for these purposes, which allows you to scale the text on the site using a relative method.
If this extension seems too complicated for you, then I can at your request lay out a different extension for scaling text that has not been developed by the author for a long time and is absent from the extension store, but works perfectly.

barbudo2005

@kichrot

A question:

Why sometimes I have to reload the page to get the script to work?

Look this page :

http://unmomentoparalectura.blogspot.com/

Will have to do with the fact that the settings "Site Access" of Tampermonkey always revert to "Onclick"?

kichrot

@barbudo2005 said in Which is the best font-set for browsing?:

Look this page :
http://unmomentoparalectura.blogspot.com/

Checked. My script is working out normally on this site.

Will have to do with the fact that the settings "Site Access" of Tampermonkey always revert to "Onclick"?

Honestly, I don’t know what kind of mood you are writing about. Tampermonkey did not find such a setting.
It is possible that this is due to the fact that I have a Russian interface. Please show the screenshot of this setting in the Tampermonkey interface.

In any case, the script works out normally when there are no conflicts with other scripts and extensions that form the CSS table of page styles.
If other scripts or extensions make changes to the table, for the same parameters as our script, with the highest priority !important, then any conflicts are possible, on the principle: whoever had time and ate before.

NormaTaylors

This post is deleted!

Pesala

Why now is the time to add “keming” to the dictionary

The Case for Keming

With Sans-serif fonts especially, there are certain pairs like rn that are hard to read if not carefully designed and properly kerned.

DoctorG

@Pesala Fonts without kerning or bad/incomplete kerning pairs are a hell für users, but mostly free fonts ones suffer from this.

rubytaylor

This post is deleted!