In laying out a web design, I often try to make sure that my typography is proportional and consistent. However, I haven't been able to find any definitive articles or resources on what ratios and sizes should be used. Specifically, what are the recommended or standard practices for:
Please consider both paragraph and header text in your answers. Also, any studies on the effectiveness of various ratios or metrics would be very useful.
Robert Bringhurst's Elements of Typographic Style is a thorough and wonderful reference for things like this. It's long but very valuable.
A lot of designers recommend a standard grid of lines so that a line+padding will always fit within, say, 16 pixels. So anything less than that would have a line height of 16, everything above that would have line height 32.
The ideal length of a line for reading text is held to be 45 characters by some and 55-75 by other sources.
There is some common averages of websites here: Typographic Design Patterns and Best Practices
I would say start with the paragraph at 16px and use Fibonacci sequence to calculate the rest. It looks like the major browsers are using this logic. Along the years (for future research, using the “The Elements of Typographic Style: Version 4.0” of Robert Bringhurst, Hartley and Marks) the leading was set to 12pt for a 10pt font.
Converting 12pt to pixels we obtain a base font of 16px.
Most of the Browsers’ default Stylesheets use 16 pixels for their paragraph text on as you can inspect on the DOM yourself or by reading https://www.w3.org/TR/CSS21/sample.html and http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html
The problem we are having today is precisely that we are talking about a new kind of typography. The current web typography that needs to fit into different devices is completely different from past concepts such as the ones depicted on the Robert Bringhurst's Elements of Typographic Style. Despite this is an excellent book the reality is that the modern designer needs code. I usually consider a standard matrix from the major browser stylesheets by creating a skeleton of an HTML file with the basic h1, h2, h3, h4, h5, h6, paragraph, footer. I inspect the browser stylesheet to understand the size of the standard pixel size they use line-height, and hierarchy on the headings. Before the web typography size was regulated by the metal/wood moveable type but from 1985, with the agreement between Adobe and Apple things started to change. I consider that today, the main regulators of the typography concepts are Apple, Safari, Windows, with Internet Explorer, Chrome, Firefox... You will have to look at their browser stylesheets to accommodate your typography to what actually will be rendered and in different devices. You should still follow the practices from Robert Bringhurst's Elements of Typographic Style, which is an excellent book, or follow the Fibonacci sequence system. I usually keep up to date to the changes on the browsers stylesheets and read the w3 specifications here: https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 I think though, the Design field needs to get this into consideration and I find that education into the practice is not updated with current realities. You can also read more here on my blog: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/
