clagnut / webtypography Goto Github PK

Hello there!

I was reading the section regarding hyphenation, where it is said it is not recommended to justify the content, as hyphenation works pourly. I am not sure when it was written, but do you think this issue persists?
I found some content regarding this, specially these articles:
https://justmarkup.com/articles/2019-01-28-a-look-at-css-hyphenation-in-2019/
http://clagnut.com/blog/2395/

It still has some support issues, as Chrome for windows and Linux don't support it (for example, try the Clagnut website on Firefox, it uses hyphenation). But it is supported for mobile devices.

So do you think there is anything to be reconsidered in this matter with recent browser development?

You make a fairly assertive claim about 16th century typesetting and use that to claim that longer spacing should not be used. This is a fallacy that has been recently pushed. This document goes into better detail on why that is a fallacious argument:

http://www.heracliteanriver.com/?p=324

Single space also hinders speed reading, and the case of Dr. Mr. and others. Ideally there is "additional" space after a sentence period, to facilitate these use cases. Should it be "two space characters," not necessarily.

But please, reconsider if you should be promoting the fake myth of why two spaces are used.

a unique characteristic of the line-height property: it is the only CSS property for which non-zero numeric values are allowed without units.

The line-height property isn’t alone in this respect: z-index, flex-grow, flex-shrink and many other properties all support numeric values without units.

Also, line-height: 0 is valid in CSS.

TL; DR: we need a font that supports "real" small caps to proceed with the next item and so the site itself can follow the recommendations of the book. I suggest we use the open-licensed EB Garamond as the site's main font from now on.

Long version follows.

The relevant part of the text:

3.2.2 For abbreviations and acronyms in the midst of normal text, use spaced small caps.
…
Genuine small caps are not simply shrunken versions of the
full caps. They differ from large caps in stroke weight, letterfit,
and internal proportions as well as in height. Any good set of
small caps is designed as such from the ground up. Thickening,
shrinking and squashing the full caps with digital modification
routines will only produce a parody.

font-family values used in the site:

• font-family: 'premiera book', georgia, serif;
• font-family: 'premiera italic', georgia, serif;
• font-family: inconsolata, consolas, "andale mono", "droid sans mono", menlo, monospace; (for code)
• font-family: "univers bold condensed", impact, haettenschweiler, sans-serif; (for one example)

Preimiera Book seems to have been a font made by typejockeys that is no longer available? It is not included in the repo nor loaded into the site via @font-face or anything similar as far as I can see. I don't know if we have a copy, or if it has true small caps and old-style numbers, nor how it is licensed. As it stands Georgia will be the typeface that almost everyone is seeing the site in. Georgia does NOT have genuine small caps.

We can't present the site following the rules of the book without changing something about how we are using fonts. As the entire site is about typography it seemed worth discussing here before sending a PR.

Georgia Pro has genuine small caps but it is not free. It is licensed per-pageview – https://www.myfonts.com/fonts/ascender/georgia-pro/licensing.html

The book (v3 at least) is set in Minion Pro which is not available for the web under any license (Adobe will license it for desktop computers for $35-600 depending on exactly what parts you want but that doesn't help us).

Options:

– If we have a copy of the font and the right license use Premiera Book/Italic but inline a woff version or otherwise download it to the client rather than relying on them having it installed (very unlikely). I emailed typejockeys to see if they can clarify.
– License Georgia Pro. This is an ongoing cost for the host of the site. I'm not sure how much traffic it gets but I assume this is a bad idea.
– License another appropriate serif font with genuine small caps and old-style numbers that has a one-off fee. One of these probably – https://practicaltypography.com/minion-alternatives.html
– Pick an open source/free serif font with genuine small caps and old-style numbers.

This last option feels most promising as it will make including it in the GitHub repo a non-issue and won't cost anyone anything. Do we know of one that is good enough? EB Garamond seems like a top candidate –

https://github.com/georgd/EB-Garamond
https://fonts.google.com/specimen/EB+Garamond

?

In the course of writing/researching this I became mostly-convinced by the EB Garamond option so I'll try it out and send a PR.

With my default font settings on Chrome 65/MacOS, the underlines here are broken up.

A possible fix is to add

abbr {
   text-underline-position: under;
}

But I've only tested it with my own setup, so I'm not doing a PR right now.

The curly quote here is not agreeing with Google Chrome 36.0.1985.67 beta. Works in Firefox.

This looks goofy to me:

I would expect CIA, PLO, etc. to be uppercase, and indeed they are in the markeup. They're styled to be lowercase. Why?

I would like to give the website a thorough update to reflect and serve better today's browser capabilities and tools. What I have in mind at the moment is:

• Mainly, to replace the use of PHP for site structure with a Node.js-based static site generator (such as Metalsmith). HTML templates (such as Handlebars) and CSS preprocessing (such as Stylus) would be used for maintainability and reuse
• As a side task, to give the presentation a facelift, aiming to get closer to that of the book's fourth edition which I find delightful
• Then, to proceed with adding and/or updating the actual contents.

Does anyone have similar ideas? Would that be welcome as an update to webtypography.net or should I do it as a separate thing?

Any advice/feedback will be appreciated. I plan to do that as a little side project over the next few weeks and months.

Since this ebook is about typography, it should make good use of modern screens:

• On large screens, point size should be raised, line width decreased
• On mobile, it should adopt a compact design focused on the text content

Bootstrap (@TBWS) breakpoints are 768px (mobile), 992px (tablets) and 1170px (widescreens) for use with media queries.

For a design reference, see 1910 or Matthew Butterick's take on the matter.

With my default font settings on Chrome 65/MacOS, the underlines here are broken up.

A possible fix is to add

abbr {
   text-underline-position: under;
}

But I've only tested it with my own setup, so I'm not doing a PR right now.

As a reader of webtypography.net, I think the current design looks a bit outdated & we can improve the navigation too. We can do a minor changes like:

1. Saturating the hues a bit as the current one looks dull and out fashioned.
2. Making the index as a hide/show menu with two sublevels (chapters and sub topics). In current version it is a bit difficult to navigate while referring a spefic topic.
3. Previous topic and next topic links are looking like out of flow. They are placed in right side of the page. It will be better if those links are placed below and or above the actual content. (practical typography implements this in a better way)
4. Paragraph text is a bit small. I think it would be better if we increase the size, especially the blockquotes with italics are harder to read (at least for me).

I think we can mingle this issue with scaling and responsivity. What is your opinion regarding this proposal?

Rule 2.1.2 says that the measure for one-column text should be 45-75. The measure on that very page as displayed on my PC is well above 90...

Is it available in ebook format?