Typography in Web design

It was stated and repeated for a lot of occasions that web is 90% typography. If you’re a web designer, developer or simply anybody working in web trade, typography covers large a part of your work. Typography can also be one area that’s typically missed by younger designers wanting to begin their careers or companies. That is no shock. For majority of individuals, web design is about creating mockups in Photoshop and different graphic software program or programming in HTML and CSS (generally with JavaScript or jQuery). Certain, these are essential elements of our course of. Nonetheless web site can be empty with out textual content.

Web design is usually in contrast or related to print design. Have you ever ever heard about format, grid or columns? These phrases had been right here lengthy earlier than Tim Berners-Lee, father of the Web, was born. What’s extra fascinating is rarely ending dialogue between designers about how a lot ought to web comply with the practices and ideas of print. If you wish to see struggle of two designers, ask them on their opinion about mounted and fluid format. What number of enamel will left in a spot no person is aware of.

However we aren’t going to speak about which format is healthier, how a lot comparable ought to web and print be or something like that. Right this moment, we’ll check out how one can work with sort in your tasks by way of CSS so it doesn’t seems to be like sh*t. Although our choices are fairly restricted versus print, we nonetheless have couple of how to make the typography stunning.

Accessible CSS properties associated to typography are font-family, font-size, font-style, font-variant, font-weight, line-height and letter-spacing. You may also use font property to work with all of them directly. There are different properties associated to textual content as properly like text-align, text-decoration, text-transform, however we is not going to care about them for now. Our major focus will likely be on the primary group masking font, strains and letters. Now we have so as to add another property to this record. It’s width and I’ll clarify why in a second.

CSS and typography

From the properties above we are able to choose three which have the largest impression on the textual content. These are width, line-height and font-size. Additionally, you will in all probability work with font-weight and letter-spacing, however for those who omit them, the change is not going to be that drastic. So let’s check out the highest three.


First property we have to speak about is width. Width of the road is among the most essential elements relating to typography. Make the road too huge or too skinny and it is going to be uncomfortable for person to learn it. So, how huge the road needs to be in excellent case? There’s a good rule of thumb coming from print design that states it between 60 and 75 cpl (together with areas). Cpl means characters per line. That’s it. This fits properly each, desktop and pill gadgets. To be extra exact, Robert Bringhurst has set the perfect cpl to 66 (“66 characters” rule). For cellular, it’s best to go someplace between 35 and 40 cpl. By following this precept you’ll preserve the textual content in digestible type, not too skinny and never too huge.

Since there is no such thing as a property to regulate the variety of phrases you’ll have to manually modify the width of paragraphs in a browser and rely the characters or you need to use some instruments accessible on-line like Golden Ratio Typography Calculator for instance. That is useful gizmo for setting ideally suited typography properties for font-size, width and cpl you need.


Subsequent property to look at is line-height. You may also know this property from print design as main. For those who don’t perceive why, attempt to play with completely different values on a chunk of textual content and you will notice the explanation by yourself eyes. Too massive line peak will enlarge the gaps between particular person strains of textual content and, alternatively, too small will make them smaller. You may also overdo it and make the strains overlap one another. Optimum worth for line-height is taken into account someplace between 120% and 145%. Once you check out varied stylesheets in use on the web, they typically use values starting from 1.2 to 1.375. So, if by remaining on this vary you can be good.

It is very important word that line-height is unitless property. This implies that you could both outline its worth in px, ems, percentages or utterly omit the unit. For instance, by defining line-height as 1.375 it would trigger the altering it to 1.375 occasions greater than the font-size. In case of font-size set to 16px, line-height will likely be 22px.


The final property to work with is font-size. Once more, good and properly tried observe from print design is to make use of 16px for physique textual content (paragraphs) as the very best worth. Another excuse for this worth is that additionally it is default measurement for a lot of the browsers. So, you’ll be able to both set the font-size property for physique ingredient to 16px or to 100%. The consequence would be the identical. In accordance with a A More Modern Scale for Web Typography article, the very best values for h1, h2, h3 and h4 components are following:


h1: 3em;
h2: 2.25em;
h3: 1.75em;
h4: 1.125em;


h1: 2.5em;
h2: 2em;
h3: 1.5em;
h4: 1.125em;


h1: 2em;
h2: 1.625em;
h3: 1.375em;
h4: 1.125em;

These values are primarily based on cpl between 60-75 we mentioned above and default base font-size of 16px. Strive these values by yourself to see how they go well with the content material of your web site.


Readability and legibility are the principle targets of each designer working with sort. At any time when the content material of the web page (textual content) is tough to learn or show, you’ve failed. Sure, textual content on the web is far more durable, if not some occasions nearly unattainable, to regulate. Nonetheless, doing all of your finest in an effort to present content material to the person in readable and legible type is your accountability. Use the foundations offered above to create good expertise and simply digestible content material to your customers and do not forget that web design just isn’t solely about code or good graphic, however typography too.

For those who preferred this text, please subscribe so you do not miss any future publish.

If you would like to help me and this weblog, you’ll be able to turn into a patron, or you should buy me a espresso 🙂

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#Typography #Web #design