search

cosmocode / dokuwiki-template-sprintdoc

modern, responsive template that integrates multiple plugins
https://www.dokuwiki.org/template:sprintdoc
GNU General Public License v2.0
30 stars 18 forks source link

Differences in Font-Rendering #36

Closed splitbrain closed 6 months ago

splitbrain commented 5 years ago

It seems IE11 is rendering fonts noticably different from Chrome and other Browsers:

2019-04-11-160233_1500x950_scrot

Left: IE 11, Right Chrome 73, both on the same Win7 System

I wonder if there is anything we can do about it? Shouldn't the same font in the same weight and size be the same? Especially the bold part in the table at the bottom is very different.

Michaelsy commented 5 years ago

Such a big difference is unusual. I could imagine that it has something to do with differences in the concrete interaction of the browser with the graphics card. I would test it on other machines with other graphics cards (in a second step additional with other fonts).

Another idea: Maybe it's because both browsers do not really pick the same font (effectively the same identical font file) on this machine. Maybe the font name in CSS does not match one of the installed fonts exactly and both browsers handle this circumstance differently. You could check this with other fonts on the same computer.

Just my two cents…

Michaelsy commented 5 years ago

I have now done tests with different fonts. It seems to be primarily related to the browser. But the differences are highly dependent on the font chosen. The biggest ones are at Arial. Significantly smaller at a newer system font (Segoe UI). The smallest (almost none) in webfonts (at least those I've tested). (BTW: There are additional differences in line spacing, for example.) (Win7, Firefox vs. IE11)

Again learned something ...

JayDeeDee commented 5 years ago

That's a known issue for all versions of Internet Explorer. As far as I know, the degree of difference varies depending on the font, its range of font-weights and the ClearType settings in the OS.

Arial his one of the most effected fonts and offers only a choice between two font-weights (bold and normal).

The Operating Systems Win7 and Win10 use ClearType, a font smoothing technology with subpixel rendering for fonts. In Win7 ClearType is enabled by default. In your screenshot the fonts in chrome look rather jagged and pixelated, which hints that ClearType is either disabled or not well tuned. In my experience a badly tuned or disabled ClearType setting further exacerbates the effect.

There are some partly experimental CSS properties such as font-synthesis, font-smooth, text-rendering, text-stroke enabling us to influence the font rendering. But none of them are supported by IE. So IMHO as long as we use Arial there is not much we can do about these differences.

We could try another web font with a wider range of weights (=finer granularity) to gain a closer degree of control over the chosen font-weight.

Michaelsy commented 5 years ago

Not only is there a choice between Arial and web fonts today. The current standard method if you do not want to use web fonts is a font-family like the following:

font-family: "Segoe UI",Roboto,Calibri,-apple-system,BlinkMacSystemFont,"PT Sans",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
ivangretsky commented 4 years ago

I did actually check the difference between IE11 and Firefox/Chrome on Windows 10. It does not look that different for most parts. It might matter for the edge cases though. I think @Michaelsy is right, that using something more variative than arail, sasns-serif for the font family could help. Using something like Google fonts is another way to go, but might be not as good for the intranets. Anyways, with the new Edge based on Chromium this should pretty soon not matter at all.

I suggest addind a more expanded font-family or even allowing to define your own font-family in the theme settings. What do you think, @splitbrain ?

annda commented 6 months ago

We no longer support Internet Explorer.