Improve visibility of Bartik's smallest font elements

The D8 API source code files font size is also on the small side.

Patch sets body to 100%. Some headlines may need tweaked since they are quite a bit larger.

Looking into that one.

Corrected tag.

A test shows that even changing the body font-size to 100% doesn't increase every text element equal to or above 1em (16px). The content font size has 1em, but several other elements are still below 16px, e.g. main and secondary menu links have 14.8667px, submitted text and footer content have 13.7167px.

If those text elements would have to be at a minimum of 1em, it would require to increase content font-size to an even higher text-size to keep the visuals similar to the design intended by the Bartik maintainers.

Patch #6 not only changes the body font-size but also some colors and text-decoration without any hint in the discussion, I would encourage not to mix these changes, if not directly related.

I will remove my assignment for the time being as I will not be able to create a full patch for body font-size to be 100% and most other text elements to be either of the same size as before or be in a visual harmony with that change, shortly. That should give others the possiblity to have a shoot until I find some time again to target this.

-assignment

Should this be moved to 8.1.x?

Most of the patch is already in Core.

Before

After

rerolled

A lot of the font sizes in Bartik are set to be "0.something" ems so these elements will always be smaller than the 100% base font in the patch. This one line patch only increases all of the fonts by 12.5%, does this actually solve the problem?

If people really want this visibility issue solved we need to address this from a design perspective. It would be wrong to just try to increase everything together by a % and then randomly pick elements and increase sizes out of sync with everything else, as we please. I know there are a lot of font size choices in Bartik but there must of been reasons for them originally by @jensimmons.

Assigning to Jen for an overlook of this issue.

Also related to font sizes we have this issue which grepped all of the font size declarations in the whole of Bartik... #2399247: Reduce number of different font-sizes in Bartik for better consistency.

The effect that font sizes seem to small on Bartik sides is also related to the standard font-family definition:
font-family: Georgia, "Times New Roman", Times, serif;

As Georgia has wider characters it is considerably larger than Times at the same font size. Therefore on systems where Georgia is not installed the text is definitely too small. For further explanations on dissimilar font definitions look at the tutorial Font Families for cross-compatible Typography.

From my experience I would suggest something like this:
font-family: Georgia, "Bitstream Charter", "Noto Serif", "Droid Serif", serif;
(Georgia for Microsoft and Apple systems, Bitstream Charter for Linux/X11, Noto Serif for Android and Droid Serif for older Android Systems).

I still this whole approach is questionable, we do it in Seven. But frankly Bartik has a lot of issues that should be resolved first. The whole body % on text, is awful and makes for improvements that could be resolved by simply making it more consistent #2399247: Reduce number of different font-sizes in Bartik for better consistency.

@dcrocks I'd like to ask you to be considerate of the many hours (often well over 200+) that people even in this thread spend on making Drupal more accessible. Bartik was completely evaluated on an accessibility, we tackled many many important challenges. It was by no means an after thought, neither for Seven. All the text is resizable, which meets the WCAG standard.

Re-rolled patch.

@Bojhan, can we resolve this or should it be marked Postponed until the font size consistency issue is addressed?

I'm not sure what we're waiting for on this issue, perhaps nothing.

I don't think a solution of just increasing the body % which affects everything is a great option.
This means every individual component affected by this will need to be visually tested.
To move forward it would be better to have thoughts and individual decisions on the smallest elements plus thorough visual testing just like the Seven issue received #2045473: Improve visibility of Seven's smallest font elements.

Ok, in line with @emma.maria comment above I've changed the title and listed some of the specific places where font size might be a problem. I've just done this by grepping through the css.

demo-block.css

.featured-top .demo-block {
  font-size: 0.55em;
}

form.css

.comment-form .form-item .description {
  font-size: 0.786em;
  line-height: 1.2;
  margin-left: 120px; /* LTR */
}

.comment-form details.filter-wrapper .tips {
  font-size: 0.786em;
}

.filter-help a {
  font-size: 0.857em;
}

comment.css

.comment__time {
  margin-bottom: 4px;
  color: #68696b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.733em;
  line-height: 1.2;

}
.comment__permalink {
  font-size: 0.733em;
  line-height: 1.2;
}

site-footer.css

.site-footer .content {
  color: #c0c0c0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.857em;
}

header.css

.region-header .block {
  font-size: 0.857em;
  float: left; /* LTR */
  margin: 0 10px;
  padding: 0;
}

table.css

table {
  border: 0;
  border-spacing: 0;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 0.857em;
  margin: 10px 0;
  width: 100%;
}

element.css

h5,
.heading-e {
  margin: 1.0em 0 0.5em;
  font-weight: inherit;
  font-size: 0.889em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
h6,
.heading-f {
  margin: 1.0em 0 0.5em;
  font-weight: inherit;
  font-size: 0.67em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

content.css

.node__meta {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.857em;
  color: #68696b;
  margin-bottom: -5px;
}

.field-name-field-tags .field-label,
.field-name-field-tags ul.links {
  font-size: 0.8em;
}
.node--view-mode-teaser .field-name-field-tags .field-label,
.node--view-mode-teaser .field-name-field-tags ul.links {
  font-size: 0.821em;
}

ul.links {
  color: #68696b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.821em;
}

Why are these a problem in particular? They are in appropriate size to other elements and diminished visually, to elevate other content.

Many of these seem fine to change, except header.css and content.css - also headings is a bit questionable, if we should have any differences on that level anyway.

Unassigning @jensimmons and postponing on 8.1.x because this is a feature request. It can still be done/worked on just not likely till 8.1.x branch is opened.

I have tested it is working fine.

New Patch created for #27. Tested work properly

I can confirm patch #41 works as intended.
The body font size increases from 87.5% (14px) to 100% (16px) - see screenshots.

Before

After

That makes it all bigger, but also is bigger than what is targeted for this issue, which is to address "Bartik's smallest font elements". This just makes the default for everything bigger. That might be fine, but it affects more than what was intended.

See #31 above.

I have also applied the patch and it did increase the font size. While all elements are impacted the patch does increase font size.

Thanks everyone for the efforts so far.

See #7, #18, #19, #31, etc. The patch in #41 is essentially the same as the one in #17 (it's just been rerolled/recreated a couple times) so unfortunately it's no more viable now than it was two years ago.

I'd like to see a much more careful, measured approach here - similar to what was done with Seven in #2045473: Improve visibility of Seven's smallest font elements.

Also, I'm changing to a task because the Seven issue ended up being a task.

Thanks @Cottser - I think most accessibility folks see the smallest font on a page should be equivalent to 14px (or possibly 16px).

Given that we've got "12.8px in the sidebar, 12px in the footer" (according to the original post), can we try to bump those up to the equivalent of 14px?

This is likely going to be a big patch affecting a bunch of CSS files.

This seems to only apply to Bartik and no other core themes, since the base font size is set there, so moving to contrib.