How to Improve Your Typography with the Golden Ratio

Secret Symphony: The Ultimate Guide to Readable Web Typography
Amira Kimmel

Note to designers: Golden Ratio Typography is intended to serve as a basis for proper typesetting. Factors such as x-height and other typeface metrics also influence typography and should be considered in finalized designs. Golden Ratio Typography provides the most rational starting point for adjustments of this nature.

How Golden Ratio Typography Increased My Blog’s Readership by 45.72%
Stefania Deaton

How do you decide the font, line spacing and the content width for your blog or website content? If you were like me, you probably went ahead with what you thought was the best for your users. And more often that not, the choice represents our own tastes when choosing such elements for our content properties.

How to Use the Golden Ratio to Create Gorgeous Graphic Designs
Dianne Hodges

Digital designers have to work within tighter constraints when it comes to creating a layout; they can’t control the dimensions of the audience’s monitor, after all. A common trick in web design is to use the golden ratio to divide space between the body of the website and the sidebar. Taking the measurements of the space they’re working with, web designers can ensure that the body is 1.618 times larger than the sidebar by taking the total width of the canvas, dividing it by 1.618, and then subtracting that number from the overall width of the canvas.

Golden Ratio Typography (GRT) Calculator
Faith Daniel


Select a font:
Alegreya (G)
Alegreya Sans (G)
Alegreya Sans SC (G)
Alegreya SC (G)
Almendra (G)
Amaranth (G)
American Typewriter
Amiri (G)
Anonymous Pro (G)
Archivo (G)
Archivo Narrow (G)
Arial Black
Arial Narrow
Arimo (G)
Arsenal (G)
Arvo (G)
Asap (G)
Asap Condensed (G)
Averia Libre (G)
Averia Sans Libre (G)
Averia Serif Libre (G)
Barlow (G)
Barlow Condensed (G)
Barlow Semi Condensed (G)
Bitter (G)
Cabin (G)
Cambay (G)
Cantarell (G)
Cardo (G)
Caudex (G)
Chivo (G)
Cormorant (G)
Cormorant Garamond (G)
Cormorant Infant (G)
Courier New
Cousine (G)
Crimson Text (G)
Cuprum (G)
Droid Serif (G)
EB Garamond (G)
Economica (G)
Exo (G)
Exo 2 (G)
Expletus Sans (G)
Faustina (G)
Fira Sans (G)
Fira Sans Condensed (G)
Fira Sans Extra Condensed (G)
Gentium Basic (G)
Gentium Book Basic (G)
Gill Sans
Gudea (G)
Hoefler Text
IBM Plex Mono (G)
IBM Plex Sans (G)
IBM Plex Sans Condensed (G)
IBM Plex Serif (G)
Istok Web (G)
Josefin Sans (G)
Josefin Slab (G)
Judson (G)
Kanit (G)
Karla (G)
Lato (G)
Lekton (G)
Libre Baskerville (G)
Libre Franklin (G)
Lobster Two (G)
Lora (G)
Lucida Grande
Manuale (G)
Marvel (G)
Merriweather (G)
Merriweather Sans (G)
Montserrat (G)
Montserrat Alternates (G)
Muli (G)
Neuton (G)
Nobile (G)
Noticia Text (G)
Noto Sans (G)
Noto Serif (G)
Nunito (G)
Nunito Sans (G)
Old Standard TT (G)
Open Sans (G)
Overlock (G)
Overpass (G)
Philosopher (G)
Playfair Display (G)
Playfair Display SC (G)
Poppins (G)
Prompt (G)
Proza Libre (G)
PT Sans (G)
PT Serif (G)
Puritan (G)
Quantico (G)
Quattrocento Sans (G)
Raleway (G)
Rambla (G)
Roboto (G)
Roboto Condensed (G)
Roboto Mono (G)
Roboto Slab (G)
Rosario (G)
Rubik (G)
Sansita (G)
Scada (G)
Share (G)
Source Sans Pro (G)
Space Mono (G)
Spectral (G)
Spectral SC (G)
Taviraj (G)
Times New Roman
Tinos (G)
Titillium Web (G)
Trebuchet MS
Trirong (G)
Trochut (G)
Ubuntu (G)
Ubuntu Mono (G)
Unna (G)
Volkhov (G)
Vollkorn (G)
Zilla Slab (G)

How to Improve Keyword Golden Ratio Post Ranking
Shelley Diaz

I think any article where you’re too laser focused on the keyword phrase and not seeing the forest for the trees, so to speak, has big flop potential. A term might be KGR compliant because it’s a funky or weirdly phrased version of a much more common query that already has competitive search results. “Greatest ball point pen,” for example might fit KGR because ‘greatest’ is kind of a unique term, but for the few users that do use that search phrase, results like “top” and “best” will fit what they’re looking for just fine, making it a more competitive term than it might seem based on pure KGR. Pretty sure I made this mistake with at least 1-2 of my KGR attempts: biting on a semantically unique keyword that was actually a competitive keyword in disguise.

The Golden Ratio for Website Typography
Jennefer Guerin

With the calculator, all you need to do is enter your font size, the width of your text (or a decent estimate), and click “Set my type!” You can include the desired characters per line (CPL), but I left it blank. On the right, the calculator will tell you what line-height to use for your font size and content width. Since I have the text set at 16px and the width is about 770 pixels (at least on my screen), it told me to use a line-height of 27px. I went with 26px instead because the site’s width is dynamic, and many will have smaller screens. When I lowered the width slightly to 750px, it told me to use a line-height of 26px. That is what I’m using now.

How to Improve WordPress Blog Typography – Actionable Tips
Melania Tripp

It’s the number of characters that matter. According to most researchers that investigated the issue, 50-60 characters per line is the ideal ratio, and up to 75 characters are still acceptable. These characters include spaces and interpunction. Yes; a highly interested reader would read your text even if it was provided with 150+ characters in a single line. However, if you upsized the font to reach around 60 characters in a line, that same post would be much more pleasurable to read.

Be the first to comment

Leave a Reply

Your email address will not be published.