A browser: What for?

barbudo2005

What is the ultimate function of a browser?

Simply to read text.

Here in the Forum we struggle to:

Make Vivaldi looks better.
Function better,
Save us a click (I love hover Mods)
etc.

But, what good are these things if our reading is not optimal?

I invite you to read this thread : The Ultimate Guide to Golden Ratio Typography

https://pearsonified.com/golden-ratio-typography-intro/

"The 3 Fundamental Dimensions of Typography

Every paragraph you’ve ever seen has 3 primary dimensions. The first two, font size and line height, are vertical in nature.

Figure 1. How font size and line height work in web browsers. Font size is measured from the top of a capital letter (S) to the bottom of descending characters (y). Half the line height extends both up and down from the centerline of the text.

The third dimension, line width, is horizontal.

Figure 2. Line height and line width form the vertical and horizontal dimensions of typography.

Taken together, these 3 dimensions are responsible for how you perceive typography.

To get a feel for how these dimensions work together, it’s helpful to look at a few text samples where one dimension is varied and the others are held constant. This way, you’ll be able to see the effect that each dimension has on the other two.

In Figure 3 below, the line height and line width are fixed, and the font size is varied from 13 to 16px.

Figure 3. With the line height and line width held constant, it’s clear that larger font sizes require larger line heights to maintain both proportion and readability.

In the first paragraph of Figure 3, the line height is large enough relative to the font size to produce generous whitespace between the lines of text. However, in the second paragraph, the line height is not large enough relative to the font size to yield sufficient whitespace, and it looks cramped as a result.

This leads to an important conclusion: As font sizes increase, line heights must also increase in order to maintain the geometric proportions of a paragraph. In other words:

Font size and line height are proportionally related.

In the next example, the font size and line height are fixed, and the line width is varied from 233 to 466px.

Figure 4. As the line width is increased, the text becomes harder to read because the line height has not been increased to offset the effect of the width.

As the line width gets longer, it becomes more difficult to perform a return sweep (the movement of the eyes from the end of one line to the beginning of the next) unless the line height is also increased to account for this effect.

Bottom line? It’s clear that line heights and line widths are mathematically related in some way. More specifically:

For any font size, the line height must increase as the line width increases.

But what is the exact mathematical nature of this relationship?

Harmonious Proportions and the Golden Ratio

Answering this question might be easier than it first seems because nature has given us a remarkable blueprint for beautiful and effective proportionality.

Evident in plants, animals, the shape of galaxies, and even your DNA, this proportionality blueprint is so pervasive that humans have noticed it for thousands of years. We’ve used it, too—it can be seen in art and architecture throughout history.

So what is this incredible proportion that “really ties the room together?”

I’m talking, of course, about the golden ratio.

When nature needs a proportion to relate things and to provide order on any scale, it tends to use the golden ratio.

With typography, the goal is to relate font size, line height, and line width in an aesthetically pleasing and orderly way.

Could it be, then, that the golden ratio is applicable to typography as well?"

Yes, and to simplify things use the Golden Ratio Typography (GRT) Calculator :

https://grtcalculator.com

I use Lato font and font-size 30px for all the sites I visit.

Over time, I have come to realize that a good width is 1060px, so :

I use this CSS code in my general Style:

font-size: 30px !important;
font-family:Lato !important;
font-style: normal !important;
text-align: justify !important;
line-height: 1.6667 !important; /* 50px */
width: 1060px !important;

Using this code a blog reading looks:

You may thing that it is very monotonous to read all the sites in the same way. Yes it is, but it allows me to focus on content rather than form.

How close or far away is the site that you read the most in relation to the Golden Ratio?

JoelYoung

Excellent! As a former career Web designer, I loved this thread. Good stuff.

Pathduck

@barbudo2005 I don't know man, you tell me...

luetage

@pathduck lol

@barbudo2005 Increasing the size of the layout proportionally makes sense and should be standard. But fixing everything on the golden ratio is a lazy approach. The important thing is whether it looks good, not whether your numbers add up.

Pesala

@barbudo2005 Reader view offers users a simple way to adjust line-spacing. Colours cause far more problems for me than font size (I can zoom in), or poor line-spacing.

How do you get Lato to override the font used on websites? I use Verajja on mine. It is a font I made from Bitstream Vera to increase the glyph coverage. Like Verdana, Vera was designed for legibility on computer monitors.

barbudo2005

@Pesala

Reader view offers users a simple way to adjust line-spacing.

It is not automatic. I love to save clicks.

How do you get Lato to override the font used on websites?

Using the code above and this selectors of text :

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

section,
article,
li span,
li,

.entry-content *,
.post-entry *,
.article-body *

With them you cover +95% of text in the web.

Lato download free:

https://fonts.google.com/specimen/Lato#standard-styles

barbudo2005

@luetage You are an excellent coder, so I don't understand that you consider that simple five lines of code (and you forget) is a lazy approach.

dbouley

Interesting, and I understand the ideas behind it. For me, I find a serif font much easier to read than sans-serif.

Pesala

@barbudo2005 said in A browser: What for?:

It is not automatic. I love to save clicks.

Reader view seems to remember its settings, so just leave it enabled and any site that supports it will display in reader view with the settings you chose previously.

luetage

@barbudo2005 I’m really not, I’m just messing around. But this has nothing to do with the topic at hand. I mean look at this person’s site, I wouldn’t trust their typographical advice. The webpage looks horrible and every sentence is a new paragraph. I’d also say the golden ratio looks too loose when looking at line heights, nobody would use that in publishing. It also ignores the fact everything needs to be adapted depending on chosen font and weight.

It’s true the golden ratio can be used for typesetting, but normally it was used for setting the page margins of very old printed or handwritten books. In modern times the approach was abandoned, probably because it leaves so much unused space ⇒ https://en.wikipedia.org/wiki/Canons_of_page_construction

barbudo2005

@luetage I am not talking about the construction of a web site. I am talking about how do you modify this site to read easier.

Browsers invented Reader View for a reason.
I'm just modifying the concept of a reader view to suit my tastes and my sight reading ability.

luetage

@barbudo2005 I’m using reader view regularly and you can adapt its CSS directly. I wouldn’t wanna change every page on load by default though, not everything is horrible, a one key shortcut is enough.

A Former User

How I see it:

proportional fonts are crap; serif fonts are only good on paper
font size shouldn’t go over 16px, or it is illegible; under 16px it may be getting hard to distinguish (notice that I use units that mark different physical length with different DPI)
line height should be between 1.2 & 1.4; less is a bit crowded, more makes the text hard to find
too short lines make me look for the beginning of next line too often; too long lines are only bad if the paragraphs are too short (or if they are over, let’s say, 300ch)
bold is crap; regular font weight should be thinner (300?)
overusing uppercase letters is bad, small-caps is crap

(all the above only applies to Latin script without a lot of different diacritics (not Vietnamese?))

luetage

@potmeklecbohdan Which just shows it’s all about personal preference. In my opinion a good serif font for documents and articles could never be replaced by a sans‐serif font. Why, for instance, Wikipedia uses a sans‐serif font for content but a serif font for headings I can’t quite comprehend.

barbudo2005

@luetage We are talking about the same. You go for using Reader view with a shortcut, I am going for other automatic way to obtain the same: A easier read of a text.

When you modify this settings what you are doing is the same I do with CSS:

I am not talking about that every people in this Forum has to learn CSS language, because they have the good internal Reader View function; but if I know it why not.

I prefer sans-serif for text (Lato) and serif (Times New Roman) for titles.