Tag Archives: web design

The Rules of Responsive Web Typography


Have you ever seen a text in a website that is easy for you to read that does not tire your eyes when reading it? If you have, then you have seen an art called Typography. What is typography? What kind of typography that is properly arranged?

The right kind of Typography
For a web designer, typography is the art of their design works. It is the science about the appearance of text. The purpose is to not only make the words look attractive enough to draw a conversation, but also helps text fulfill its purpose of communication. Therefore, to fulfill this purpose, the typography should convey appropriate emotion, so that a text can be easy to read. Then, how do we create a text that embodies emotion, yet easy to read?

Here are several factors you might need to know:

The Art of Readable Text
No other words can beat the art of readable text, and a readable text means getting the right size for the font, leading and measure.

You can use the following guidelines to ensure you have the right size as mentioned above:

  • Make sure it is easy to read
  • Set the line-height, the font-size, and the text width (typesetting)
  • Begin typesetting with a page that contains users’ needed information
  • The page should contain multiple elements, such as h1, h2, h3, body text and captions
  • Estimate the distance between readers’ eyes and the screen for different devices
  • Once everything is settled, start by selecting font-size
  • Measure the line-height
  • Test your typesetting choices with your audience
  • Make sure everything is right and suitable
  • Continue setting the sizes of other elements after finishing with typesetting the body text.

While getting the best result for the typography is important, it doesn’t mean it has to be perfect. Just do the best to convey your passion in your work.

Typesetting Other Elements
If you happen to choose the font-size for elements like h1 and h2 visually, you may need to reconsider it for these scales can’t be directly used for the web because they are built for print design. Therefore, you can use a modular scale. Construct it with the body test you’ve decided on and multiply it by a ratio numerous times until you get a scale. After constructing the modular scale, you can typeset the rest of your elements, picking a number from the scale as your font-size; then do the same process for the leading and measure setting, until you get a balance of readable elements.

Vertical Rhythm
Next, arrange the individual elements using a technique called vertical rhythm. In order for one element to flow harmoniously into the next, we need to adjust the thing that joins them up: the white space. This white space should be large enough to distinguish one element from another, but it should be small enough, so that the flow isn’t broken.

In order to get enough white space, you can use a multiple of the line-height value of your body text because we naturally recognize white space patterns within text. You can set the white space between elements to a multiple of the base line-height, and set the line-height of all other elements to a multiple of the base line-height to use the right vertical rhythm. Values like 0.5x and 1.25x of the base line-height can give you more flexibility.

Baseline grid, yes or no?
Where there is vertical rhythm, there is the concept of a baseline grid inevitably comes into the picture. Although it is helpful, it can be difficult to get the right vertical rhythm for beginners. Baseline grids can’t work perfectly on the web because the math in typography contains subpixels (like 24.8px) and the subpixels are handled differently.

Typography for Multiple Screens
There are three things needed from a design perspective. First, the distance between a user’s eyes and their screens are different depending on the device used for that. The larger and the wider the screen and the device, the more you need for the font sizes. Second, you need consistency in the proportions between the body text and other elements. When you increase the body text size, you have to increase the sizes of all elements as well. Third, you should increase the font-size of specific elements through picking a different number from the modular scale to control the visual hierarchy.

That’s all you need to learn! To sum it up, typography is the art of making a grandiose website that will not only make people effortlessly understand the texts, but also creatively convey the passion in creating it.

Guidelines to Avoiding Google’s Penalty Caused by Intrusive Interstitials

Intrusive interstitials guidelines to avoiding google's penalty

This year, Google has made one recent change known as the intrusive interstitial update. This update aims to penalize intrusive popup ads which affect the mobile user experience. No wonder that some websites have experienced lowered mobile rankings. If you are working in SEO service field, this thing may become one of your concerns. But, don’t worry as you can avoid Google’s penalty caused by intrusive interstitials. Figure out the solutions in the passages below.

Decrypting the Intrusive Interstitial Update
First of all, it’s a mobile popup penalty.  Secondly, it’s an intrusive popup penalty. In light of this, Google wants to make sure that ads and popups do not interfere with the user experience. By devaluing pages with popups and overlays on the screen, Google can help users access the content they’ve requested in the first place.

What is the Impact of this Latest Update?
Pages with intrusive interstitials will no longer consider as being mobile-friendly. This is because obstructing content on mobile with ads or other popups is against Google’s guidelines. Ads or popups on screen causes the content inaccessible for a few seconds. In fact, Ads displayed over content are no longer acceptable on mobile. This includes popups that appear when you load the page from Google or when you scroll down.

What Constitutes an Intrusive Interstitial?
Intrusive interstitials will lead to a frustrating experience for desktop and mobile users alike. In fact, it tends to block most or all of a page. This will hinder visitors from experiencing your site as they block the content that visitors seek unexpectedly. In light of this, intrusive interstitials has become the biggest enemy as on desktop they are annoying at best and can ruin the entire experience on mobile.

What is still Permitted and not?
Even though, you have to deal with pop ups ads, but this doesn’t mean that all pop ups are forbidden. In fact, some popups are still permitted, such as:

  • Intrusive popups are still ok on desktop
  • Interstitials triggered by exit intent are still allowed
  • Page to page interstitials will not be penalized

Types of intrusive interstitials that will be forbidden are:

  • a popup or modal window that blocks most or all of the content on a page (this is basically a full-screen interstitial above the header);
  • a standalone interstitial that’s not responsive and that blocks the content;
  • a layout in which the content above the fold has the look and feel of an interstitial and requires dismissal or scrolling in order for the user to reach the main content beneath the fold.

Popups is frustrating indeed, but companies use them as at some points they are effective. So, if interstitials still become the best options to convert users for your websites. You can consider keeping them on the website by a no-index tag in your code. However, this will cut off organic traffic from Google to that page.

Therefore, designers, developers and marketers must create another ways to generate revenue. A sound strategy would be to leverage content marketing to educate audiences and guide them through the buying process. In the other words, you should move away from interruption marketing towards permission marketing.

So, the solutions that you can do related to this situation are; audit your popups, cookie notifications, overlays and big banners. This is to make sure that they comply with Google’s new guidelines. Furthermore, make sure that don’t take up space more than 15% from the screen to avoid penalty.