Check out Symmetric Chess, our featured variant for March, 2024.


[ Help | Earliest Comments | Latest Comments ]
[ List All Subjects of Discussion | Create New Subject of Discussion ]
[ List Latest Comments Only For Pages | Games | Rated Pages | Rated Games | Subjects of Discussion ]

Comments/Ratings for a Single Item

Later Reverse Order EarlierEarliest
Improving Typography[Subject Thread] [Add Response]
🕸Fergus Duniho wrote on Thu, Jun 17, 2021 10:13 PM UTC:

I want to thank those who gave feedback. I was trying to solve specific problems, and feedback helped me learn that solutions I found acceptable were not acceptable to others, which prompted me to find other solutions that worked better.


🕸Fergus Duniho wrote on Thu, Jun 10, 2021 10:15 PM UTC:

I have adjusted the em values for the headings so that specific integer pixel values will be used when the body font is 16px. These are 36px for H1, 32 for H2, 29 for H3, 26 for H4, 21 for H5, and 18 for H6. Instead of making the differences the same between each pair of neighboring headings, I used smaller differences where the style changed more, and I put a distance of .5em (8px) between distant headings using the same style.


🕸Fergus Duniho wrote on Thu, Jun 10, 2021 09:43 PM UTC:

Instead of setting the body text at 18px, I have erased code for setting the size of the body text, so that it will now use the system default. On the Windows desktop, at least, this is typically 16px. I checked multiple devices, and on each one, it seemed to make the text smaller, though Android and iOS devices did not let me inspect the elements and determine the precise size.

One reason for making this change is that Literata, which is now the body font instead of Lora, has a clearer look at smaller sizes. Another is that it should make the display more responsive to particular devices. Instead of using a fixed size across all devices, it lets the device determine the size. Also, I had previously set the font-size for comments to 16px, and I haven't had trouble reading comments. However, comments will now display text at the same size as the main content instead of at a smaller size. So, comments should generally display at the same size as they used to. Finally, the font size will now better match whatever zoom level someone prefers to use his browser at.

Since the heading sizes are defined with the em unit, which is determined by the body font size, they adjust according to the body font size. So, with the body font a bit smaller on most devices, the headings will also be a bit smaller.


H. G. Muller wrote on Thu, Jun 10, 2021 06:24 PM UTC in reply to Fergus Duniho from 05:42 PM:

But can you also do that with headers?


🕸Fergus Duniho wrote on Thu, Jun 10, 2021 05:42 PM UTC in reply to H. G. Muller from 03:54 PM:

Someone might want to add paragraphs in a smaller-than-standard font.

If you want small text, you can enclose your text in <small>small tags</small>.


H. G. Muller wrote on Thu, Jun 10, 2021 03:54 PM UTC in reply to Fergus Duniho from 02:06 PM:

I looked into the default sizes of H1-H6, and I learned that by default, H4 is the same size as the body text, and H5 and H6 are even smaller. This doesn't make sense to me. Headings should always be larger than the body text.

Someone might want to add paragraphs in a smaller-than-standard font. And these might need headers too.

Four header levels already seems quite generous to me.


🕸Fergus Duniho wrote on Thu, Jun 10, 2021 02:06 PM UTC in reply to Greg Strong from 12:57 AM:

I think the H2 text size is very, very large. I'd like to see that scaled down a bit, but things are looking better.

Is that because you are used to it being smaller, or because there are specific pages on which the H2 heading is too long?

I looked into the default sizes of H1-H6, and I learned that by default, H4 is the same size as the body text, and H5 and H6 are even smaller. This doesn't make sense to me. Headings should always be larger than the body text. Additionally, higher level headings should be larger than lower level headings, and size differences between headings of the same style should be large enough to tell them apart. Bearing these considerations in mind results in the headings all being larger than they are by default. This doesn't leave a lot of room for adjusting the size of H2, which is already closer to the size of H3 than to the size of H1.

Additionally, text is appearing larger on Chrome than on Firefox. I normally develop on Firefox, but if you're using Chrome, you will see larger fonts than I normally do. When I inspect the page h1-h6-test.html, which has no CSS or styling, it gives me the same values for the font sizes even though it appears larger on Chrome. In inspecting, Xiangqi, I get the same values for the style elements, though I cannot get Firefox to give me the size in pixels. I need to look into why text is larger on Chrome and see if there is some way to standardize the size in different browsers on the same computer. You may inspect these pages yourself with Developer Tools on Chrome or Web Developer Tools on Firefox.

There are pages on which I plan to use a different style or a lower heading level. These would include link pages, Zillions pages, and Game Courier preset pages, which normally have fewer sections and less text than other pages. I'll work on that later.


x x wrote on Thu, Jun 10, 2021 10:39 AM UTC in reply to Greg Strong from 12:57 AM:

You can press ctrl+f5 to clear cache for current page only


Greg Strong wrote on Thu, Jun 10, 2021 12:57 AM UTC in reply to Fergus Duniho from Wed Jun 9 02:10 AM:

You might want to read the later comments before replying to earlier comments that are no longer pertinent. If you still see the double underlines, you need to clear your cache.

You are correct - my appologies.  I'm travelling and on my father's computer, so I didn't want to clear cache, but I've opened a different browser so I can see how it looks now.  This is a definite improvement.  I think the H2 text size is very, very large.  I'd like to see that scaled down a bit, but things are looking better.  


🕸Fergus Duniho wrote on Wed, Jun 9, 2021 03:08 PM UTC in reply to H. G. Muller from 06:56 AM:

The h5 style makes the impression of being 'incomplete', because it doesn't have left and right vertical borders.

It also doesn't have horizontal borders. If you are seeing it with any borders, you need to clear your cache.

The typeface of h1-h4 'blends in' very well with the typeface of the main text, but h5 and h6 somehow don't.

Also, those no longer use small-caps. Clear your cache to see how it currently looks.


H. G. Muller wrote on Wed, Jun 9, 2021 06:56 AM UTC in reply to Fergus Duniho from Tue Jun 8 09:33 PM:

After looking at some pages, I decided that the pseudo horizontal rule works better for H2. It more clearly sends the message that this is a major section. Since Wikipedia does it, it should be familiar to people, and I don't think it would be considered an unprofessional look.

OK, this is better. Not necessarily better than last week's styles, but at least not far worse. The typeface no longer sticks out as typewriter-like, which I think is a huge improvement. (It is true it was only used in headers, but visually the headers dominate the impression the page makes, because they have such large font sizes.)

Presented in the comment the full-width underlining struck me as a bit weird, but I must admit that in the typical article with an Introduction / Setup / Pieces / Rules / Notes section it works.

Having headers in italics still strikes me as odd, though. But having 6 header levels seems overly generous; I was nottt even aware that HTML supported h5 and h6, and I cannot imagine I would ever need more than 3. So I suppose there isn't any real downside to having some of the lower-level headers in an uncommon style; most people won't need them, and the few that do need more than 3 levels but less than 6 can skip the styles they don't like.

The h5 style makes the impression of being 'incomplete', because it doesn't have left and right vertical borders. Even then, it is still a very exotic header style. The typeface of h1-h4 'blends in' very well with the typeface of the main text, but h5 and h6 somehow don't.

There still is a lare size gap between h4 and the main text. I would expect there to exist headers that had nearly the same size as the main text, but distinguish themselves by being boldface.

The font that is now on HTML buttons still seems fixed space. I don' think that is a good idea; it makes the buttons unnecessarily wide.

 


🕸Fergus Duniho wrote on Wed, Jun 9, 2021 02:10 AM UTC in reply to Greg Strong from 01:58 AM:

You might want to read the later comments before replying to earlier comments that are no longer pertinent. If you still see the double underlines, you need to clear your cache.


Greg Strong wrote on Wed, Jun 9, 2021 01:58 AM UTC in reply to Fergus Duniho from Tue Jun 8 10:42 PM:

It's important to distinguish each heading level by a different visual style.

 

This is a hobbyist site, weird is a personal opinion, and there are only so many different ways of distinguishing six levels of headings by style.

 

Wavy underlines, which I already tried out, look much worse.

Fergus, I'm pretty surprised at what I'm reading.  You have suddenly decided, unilaterally, that six levels MUST be displayed so differently that it slaps you in the face.  And, if the double underline looks terrible, hey, at least they are not wavy?  Is that really your answer?

I think you would agree that I have complained about very, very little all these years, despite several large issues worthy of complaint.  I'd rather not go into enumeration, but I will if you doubt it.

The fact is 99% of the content on this site was not created by you.  You cannot just do whatever you want with it.  The huge, bold, double-underline type is categorically unacceptable to me.


🕸Fergus Duniho wrote on Tue, Jun 8, 2021 10:42 PM UTC:

I switched back to using Noto Sans for headings on the main site, though I will use Courier Prime for headings in Game Courier for thematic reasons. I could not find any good substitute for Noto Sans among sans serif fonts. I wanted one that put bars on the capital I, and there were few of those. I tried out IBM Plex Sans, but it didn't look as good. I figured out how to keep letters in Noto Sans from touching the horizontal rule by using some bottom padding. Since I'm no longer using small-caps or underlining and overlining, H5 and H6 no longer look as bad as they used to when I was trying out Noto Sans. With these problems taken care of, I figured it was okay to go back to Noto Sans.


🕸Fergus Duniho wrote on Tue, Jun 8, 2021 09:33 PM UTC:

After looking at some pages, I decided that the pseudo horizontal rule works better for H2. It more clearly sends the message that this is a major section. Since Wikipedia does it, it should be familiar to people, and I don't think it would be considered an unprofessional look.

Heading One: Centered

Heading Two: Pseudo Horizontal Rule

Heading Three: Normal

Heading Four: Italics

Heading Five: Normal
Heading Six: Italics

🕸Fergus Duniho wrote on Tue, Jun 8, 2021 09:18 PM UTC:

I am trying out a set of headings styles that don't use any horizontal lines. Instead of making all the styles completely different, I am using sharp differences in size between headings using the same style. H5 has the same style as H3, and H6 the same as H4, but each is 0.55em smaller.

Heading One: Centered

Heading Two: Uppercase

This is done with text-transform: uppercase;

Heading Three: Normal

Heading Four: Italics

Heading Five: Normal
Heading Six: Italics

🕸Fergus Duniho wrote on Tue, Jun 8, 2021 08:29 PM UTC in reply to Ben Reiniger from 07:15 PM:

I think I'm fine with the (pseudo)underline for h2, but the under/overlining of h5 makes it stand out more than h3-4.

It works for me, and the only page I know of with H5 and H6 headings is the Game Courier Developer's Guide, which I wrote anyway. If I'm to do away with the lines, I need an alternative that works as well, and I don't have one. I did try small-caps for H5 and small-caps plus italics for H6, but italicized small-caps differs from small-caps merely by being slanted. So, I chose not to do it that way.

Since you pointed out wikipedia's, note that h4-h6 are all the same, and h3 only differs from those in font-size.

Yes, I'm not a fan of how Wikipedia is styled. I borrowed one idea from Wikipedia, because it seems to work, but I don't like how some of their headings differ only by size. It makes it harder to tell what level something is.


Ben Reiniger wrote on Tue, Jun 8, 2021 07:15 PM UTC:

I think I'm fine with the (pseudo)underline for h2, but the under/overlining of h5 makes it stand out more than h3-4.

By the time someone gets to h6, I don't think much distinction really needs to be made; boldface but otherwise p-style would be nearly enough. (Since you pointed out wikipedia's, note that h4-h6 are all the same, and h3 only differs from those in font-size.)


🕸Fergus Duniho wrote on Tue, Jun 8, 2021 07:06 PM UTC:

I temporarily tried Lexend for headings. It looked better than Noto Sans, because it had a geometric design like Futura rather than a grotesque design like Helvetica. However, it did not have an italic style, and using weight to distinguish the heading styles didn't distinguish them enough.


🕸Fergus Duniho wrote on Tue, Jun 8, 2021 06:25 PM UTC in reply to H. G. Muller from 10:16 AM:

The typeface makes the articles look like typewritten manuscripts rather than published articles,

Courier is being used only for headings, not for the body text. I find that it looks better than Noto Sans, and it works better with horizontal lines. When I tried Noto Sans, its descenders touched the horizontal line beneath the H2 heading, and the lines in the H5 heading were not the same distance from the text. I also dislike how barren and uninteresting sans serif fonts look when used for headings. I find that using a non-proportional font for the headings makes them stand out a little bit better and distinguishes them from the body text more.

and having underlining in the headers looks weird and unproffessional.

This is a hobbyist site, weird is a personal opinion, and there are only so many different ways of distinguishing six levels of headings by style.


🕸Fergus Duniho wrote on Tue, Jun 8, 2021 05:19 PM UTC:

Since pages were looking too cluttered with horizontal rules at the top, I took some steps to reduce this clutter. First, I removed the H2 heading for the introduction section in member-submitted pages. Second, I changed the notice that sometimes appears at the top of a page to a paragraph with the notice class instead of text with a horizontal rule above and below it.

To prevent the H1-H6 styles from being used in the wrong place, I limited these styles to headings with an article, or a section within an article, as the immediate parent. In other contexts, such as comments, footers, nav bars, or tables, these styles will not be used. They may be used in comments by enclosing them in an appropriate parent element, like so:

Heading One: Centered

Heading Two: Facsimile of Horizontal Rule

This is done with a border bottom, not a real horizontal rule. Unlike underlining, the line is not broken up by descenders in letters.

Heading Three: Normal

Heading Four: Italics

Heading Five: Small-Caps with Overline and Underline

Because small-caps are more compact, they are used for lower headings rather than for higher ones. The use of horizontal lines parallels the use of a horizontal line in the second heading. Because small-caps all have the same height, words have a more straight appearance, which works better with the overline. Because they have no descenders, the lower line does not get broken up.

Heading Six: Small-Caps

Like the change from heading two to heading three, heading six omits the lines used in the heading just above it.


🕸Fergus Duniho wrote on Tue, Jun 8, 2021 02:34 PM UTC in reply to Greg Strong from 11:22 AM:

these huge, bold, double-underlined headings look absolutely horrible.

Wavy underlines, which I already tried out, look much worse.

Please change it back.

It's important to distinguish each heading level by a different visual style. I am now trying out a style used on Wikipedia for H2. It puts a full-width line underneath the heading. I have done this with the bottom border. So, the line no longer gets broken up by characters with descenders.


Greg Strong wrote on Tue, Jun 8, 2021 11:22 AM UTC in reply to H. G. Muller from 10:16 AM:

I have to say, I think these huge, bold, double-underlined headings look absolutely horrible. Please change it back. Or, at a minimum, get rid of the underlines.


H. G. Muller wrote on Tue, Jun 8, 2021 10:16 AM UTC:

As far as I am concerned this header business is a large step in the direction of uglifying the website. The typeface makes the articles look like typewritten manuscripts rather than published articles, and having underlining in the headers looks weird and unproffessional. On a scale of 1-10 I would judge the old header styles perhaps as 8, and the new situation as a 3. And this new (fixed-spaced) typeface now also appears on HTML buttons...


🕸Fergus Duniho wrote on Sun, Jun 6, 2021 08:40 PM UTC:

I adjusted the margins of the headings to be the same, and I put more space above a heading than below it so that each heading is closer to the text it is a heading for. But I also avoided making it look crowded by putting a heading too close to the text following it.


25 comments displayed

Later Reverse Order EarlierEarliest

Permalink to the exact comments currently displayed.