clagnut / webtypography Goto Github PK
View Code? Open in Web Editor NEWThe source code for WebTypography.net, a practical guide to web typography.
Home Page: WebTypography.net
License: Other
The source code for WebTypography.net, a practical guide to web typography.
Home Page: WebTypography.net
License: Other
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.
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...
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:
I think we can mingle this issue with scaling and responsivity. What is your opinion regarding this proposal?
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:
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.
Is it available in ebook format?
Since this ebook is about typography, it should make good use of modern screens:
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.
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.
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.