The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first list element at the top of the page.

This problem has been observed in both Chrome and LibreWolf, which uses Goanna as its rendering engine.

Several attempts to address this issue have been made, including applying CSS properties like -webkit-font-smoothing: antialiased; and adjusting font-weight values, validating HTML and CSS, removing elements to identify triggers, using the dev console to check for unexpected styles, and switching to the same font version without bold punctuation. However, none of these steps have led to any noticeable improvements after forced reloads.

Some interventions were aimed at mitigating potential hardware acceleration issues, but it remains unclear if this is the root cause. Disabling hardware acceleration in LibreWolf did not result in any significant changes upon application restart.

The following questions arise:

  1. What other adjustments or validations should be considered?
  2. Is this font unsuitable for web use, considering the persistent display inconsistencies? Inconsolata may have served as an alternative, but the quest for variety continues.
  3. Could visual perception be influencing the perceived discrepancies?

A side-by-side comparison of the webpage in two separate windows revealed inconsistent renderings, raising doubts about the severity of the disparity as scrutiny deepens.

Could the troubleshooting efforts be addressing an optical illusion?

Update: The inexplicable nature of this issue necessitates a temporary retreat. The process of isolating potential causes included:

  1. Identifying the page element facilitating proper text display in one instance, leading to the table's removal as a corrective action.
  2. Examining specific rows within the table failed to reproduce the issue consistently upon elimination.
  3. Gradually reintroducing individual rows disclosed peculiarities tied to their content, particularly the presence of certain HTML elements.
  4. Further experimentation highlighted the influence of `<th>` and `<strong>` elements on text legibility based on their inclusion across different row configurations.
  5. Delineating the impact of various row combinations emphasized the intricate relationship between specific content compositions.

Update 2: An intriguing discovery suggests that the problem manifests only when the webpage lacks a vertical scroll bar due to insufficient content length. Exploring resolution options through LibreWolf’s issue tracker may shed light on the technical underpinnings or offer redirection guidance.

Text comparison 1

Text comparison 2

Answer №1

The issue at hand is proving to be more complex than initially anticipated, particularly in relation to factors such as page overflow. It appears that there may indeed be a correlation with the Chrome problem of similar nature.

By incorporating various snippets from the provided links into user styles, a mostly effective workaround can be achieved:

p, pre, blockquote, ol, ul, menu, li, dl, dt, dd, a, em, strong, small, s, cite, q, dfn, abbr, code, sub, sup, i, b, span, ins, del, caption, th, td, form, label, input, button, select, datalist, optgroup, option, textarea, output, progress, meter, fieldset, legend, details, summary, dialog, slot {
  transform: perspective(1px) translateZ(0) !important;
  backface-visibility: hidden !important;
}

I still need to investigate why certain a and span elements remain unaffected (i.e. experiment with user styles or refer to documentation for adjustments) but this solution does improve the readability of entire paragraphs.

Chrome Font appears Blurry

Blurry text after using CSS transform: scale(); in Chrome

Additionally, I will address the task of generalizing this JavaScript function at a later time:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In JavaScript, implement event listeners exclusively on the main container and its immediate child elements

Is there a way to target just the main container and its second child elements for an event? Specifically, targeting id="container" and all elements with class="secondChild" Currently, I have a listener attached to all elements inside ...

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

"Creating visual art with processing in 2D using P5

Recently, I came across a webpage about rendering 2D objects in processing using JavaScript. Here is the link to the page: Upon trying out the example code provided on the page in a new P5 project, I noticed that the code structure looked like this: HTML ...

Tips and tricks for implementing vuetify tooltips within a list component

Looking for help with my code: <div id='app'> <v-app> <v-list-tile-content> <v-list-tile v-for="(item, index) in items" :key="item.id" > <v-list-tile-action> {{index+1}}. </v-list-tile-action> < ...

Setting the height using CSS so it matches the height of the following class

Could someone assist me with a question I have? I am using a CSS class in my HTML code, like this: .boxBooking { width: 14.28%; } <div class="boxBooking"> .... </div> <div class="boxBooking"> test<br/> test <br/> & ...

I'm having trouble with Bootstrap 4 where my fixed navbar won't stay separate from my jumbotron

Currently working on a website and utilizing Bootstrap. Looking to keep my fixed navbar distinct from my jumbotron, but struggling to achieve separation between the two. Is there a method to accomplish this without directly modifying the CSS file? Here i ...

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

Using javascript to store HTML tags in a variable

Hey there, I have a quick question. Can someone help me figure out why this code isn't working? let plus = "+" + '<h1>'+"This is a heading"+'</h1>'; When I run the code, the output I get is: +<h1 ...

How to reference color variables from code behind in ASP and use them in CSS files

I have a total of 3 files dedicated to my Login-Screen: Login.aspx, Login.aspx.cs, and LoginStyle.css Upon the execution of the Page_Load method, I retrieve various data from the current system, including the theme-color represented as a string (e.g., #00 ...

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

Update data dynamically on a div element using AngularJS controller and ng-repeat

I am currently navigating my way through Angular JS and expanding my knowledge on it. I have a div set up to load data from a JSON file upon startup using a controller with the following code, but now I am looking to refresh it whenever the JSON object cha ...

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

Unable to keep button contained within form's card design

Currently enhancing my Bootstrap skills and seeking assistance with a card and form alignment issue. Struggling to properly place a form within a card. Any suggestions or insights on resolving this? <div class="row row-content col-sm-8"> &l ...

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

Excessive content within the div element causing overflow

In my Laravel project, I am facing an issue with the patient history form. The content overflows under a div as shown in the image below. View first image To address this problem, I tried using overflow:hidden in the CSS section. However, this caused my ...

Clearing a textarea in jQuery

I'm experiencing an issue that I can't seem to resolve on my own. Any assistance would be greatly appreciated. My function designed to clear a textbox upon click doesn't seem to be working correctly: $(function() { $('textarea#co ...

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

I am looking to create a list with lower-roman indexes that are enclosed in parentheses (ii), where the content of each item is indented. Here is an example: (i) lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut metus nec urna ...

Accessing pseudo elements when their sibling is hovered can be achieved by using CSS selectors and combinators

I am struggling with the following html code: <div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class ="tricky"></div> </div> The "co ...

Difficulty in implementing a radio button selection form using Django and Bootstrap styles

Currently, I am facing an issue while trying to develop a form with radio button choices using Django. The website is based on Bootstrap 4 theme and encountering a problem where the buttons disappear upon applying the custom-control-input class. I initial ...