****SOLVED****Fonts Preview Issues

[scribeman01]

My issue is that my fonts in preview have more letter spacing in between them and subsequently this is causing earlier line breakage and some leading issues. (Firefox & Edge)
1) I've stuck primarily to "web-safe" and "Google fonts." I had used (and removed) Futura-Black, Futura XBlk BT & Futura Windows Extra Black. I conceded these fonts to Arial Black.
2) The "New Despair Computer Repair" layout boxes are shorter in these browser previews at default (1900 px width).
3) I have reviewed and tweaked my settings as follows:
A. Performed the "rich edit" file tweak as recommended here: viewtopic.php?t=96707
B. OPTIONS/General - All "Responsive Web Design Boxes" are checked.
C. OPTIONS/Fonts (checked) - "Display Font Variations," "Automatically scale new objects in other breakpoints," "Automatically use "@font-facefor non web-safe fonts," both Google options boxes checked, using Font Awesome6.
D. USER INTERFACE (checked) - "Enable High DPI Support (restart required) - among other boxes checked (had also uploaded my system folder for your reference).
* * * * *
Some misc. questions - 1) Is it better to post & reference currently as I am doing here or respond to a thread that covers the subject also, even if the thread is more than 2-3 yrs. old?
2) Some of the longer depth web pages I have sometimes morph deeper than the working screen/scroll will cover - even when I reduce to 75%. I suppose that means it will be impossible on a tablet or mobile phone and have to figure out how to pare that down?
3) We're getting there. THANKS!

[Pablo]

Firstly, you can not allowed to share your system folder, it contains copyrighted files (like extensions) that may not be shared!

Also, can you please keep the demo project as small as possible ads described here:
viewtopic.php?f=10&t=82134

The (invalid) letter spacing seems to be embedded in the text formatting.
Maybe you have copied the text form MS Word or another editor?

I recommend to only copy/paste plain text and do all the formatting in WWB and to prevent issues like this.

There is also a conflict in the text settings.
When the output format is set to 'use <p> tags', the option 'Enable responsive fonts' should be enabled.

And keep in mind that text will never look 100% the same in different browsers.

[scribeman01]

Thank you Pablo.

The problem is resolved. Apologies with posting the System Folder. I had thought I messed something up when doing the "rich edit tweak" which was discussed in an earlier post I found and I thought I had messed up something in the system folder. I assure you that it was unintentional and will not do this in the future. I have taken care to try and only upload what is necessary for you to see. I was not clear if the master page was needed, but I will only upload the specific page when I have a question. Unless the issue involves pictures, than I will refrain from including those also. One final question - reading earlier that graphics heavy files slow the program down and I do notice this when using my laptop vs. my desktop. So is there really much of a quality difference if I convert the jpegs to png's? There was earlier posts about a image reducer that was going to be incorporated into Microsoft Office & One Note. Have you or anyone else used it? Thanks again!

[Pablo]

The quality difference between PNG and JPG depends on the compression level.
PNG uses lossless compression, preserving higher image quality.
However, if file size is a priority, JPG can be significantly smaller, though with some loss in quality.

[gofrank]

The free program RIOT https://riot-optimizer.com/?ref=RIOT does a good job of reducing file size for both jpg and png images.

[wwonderfull]

there is also a modern format which has much quality and optimized and that is .AVIF format which could even be an alternative to webp.

[scribeman01]

Thank you all for your insights! I am going to take your suggestions and the download recommendation tomorrow here when I resume my project. The "true" finish line is now glimmering further down the track!

[AliGW]

Forget the finish line - it is just a mirage. We never truly get there.

[scribeman01]

Amen @Aligw! As I've transformed from "survival" to lesser degree, this has allowed me to focus more on the dynamic tools and upgrades in the latest versions. There still some odds & ends (of the basics) like how can I see the actual size of a picture when I place it into the grid area or when we're using vertical or horizontal guides, that besides seeing where it is on the measurements guides if I can see the actual reading as it moves in the informational sections. The other thing I'm trying to understand is that as we start designing for the largest screen size, that as we compress down to the the 480, 320 px widths, is a general vertical depth not to exceed which otherwise would be difficult for somebody with a mobile phone or tablet user to have to go up & down on the web page. We're all perfectionists, right?

[scribeman01]

@wwonderfull, In Gimp, I don't see the export file conversion for avif but webp is there. What do you use to convert?

[BaconFries]

@scribeman01 What version of GIMP do you have installed? to be able to use avif within it you may need to install the following https://github.com/novomesk/gimp-avif-plugin You may also need to install the AV1 video extension for Windows10/11 so to be able to view. If you haven’t already done so it is available from the Microsoft app store.

[scribeman01]

Much appreciated @BaconFries!