Undestanding Fluid Typography Best Practices and Benefits

What is Typography?

In the technical field, most of us have heard about the term typography. So what is its meaning? Typography is the color, contrast, alignment, size, and font that directly impact a web page's performance. Many factors define typography like sharpness, boldness, curves, etc. Typography is a thoughtful process and needs intense analysis for understanding and implementation.

The first and basic rule of the typography is that "If I can read, anyone can read" this is a myth our mind creates. Some of them have eyeglasses with a heavy number, and some have color deficiency issues. So we have to keep everything in mind before selecting the typography. So let us discuss some of the key points of typography.

Developing a better user experience & customer satisfaction product is not a single person or team’s responsibility, it is a vision of an organization. Click to explore about, User Experience Design, Tools and Principles

Key Points of Typography

1. Contrast
2. Font

The Key Points of Typography are defined below in brief;

Contrast

In simple terms, we can say that the contrast depends upon which font color and background you are choosing for this. Let me explain with you one pictorial example. In the above example, which blog article has more visibility and readability?

In the first light green article, we are hardly able to read anything, and it is giving more effort to our eyes to focus and read on, and hence the contrast of this article is also 1.44, which is very low.

Contrast Ration: By W3 Org

We can easily read the second Dark green article, and hence its contrast is better than the upper one. In the third article, which is most common and best for readability. Hence we can conclude that background colors can play an essential role in contrast to a font. Contrast should be comfortable to everyone's eye.

Font

Now, after the contrast, the next thing that is to take care of is Font. The font has majorly two-segment the size and type of font.

Firstly we will see the type of font.

Now let me tell you the difference between these two fonts.

In the above image, we can easily see that the Serif has pointed edges, and Sans Serif has Blunt edges. Now Let me explain to you how size plays an essential role in fonts. For example, If I want 12-14px size of fonts of Serif and due to its pointed edges, it will be hard to read compared to Sans Serif in the same Size.

But suppose we use the Serif for banner or bigger heading on the page. In that case, it will give us a beautiful sharp look that can enhance our page view, and we can use sans-serif for the documentation and research papers which will enhance the view of the documentation, and the user will have more interests. Its best practice to keep experimenting with fonts and take feedbacks from users.

Conversational user interfaces is as easy to use and talk about as talking or having information from a human being. Click to explore about, Principles for Conversational User Interfaces

What are the types of Typography?

Below highlighted are the various types of Typography

Responsive

The idea of responsive typography has been around for some time, and it came into the mind because of irresponsive or distorted fonts. In different types of screens. For example, if you use 64 px in 1920 screen size, it will be best, but it will not look good if you use the same size for 480px.

Due to the bigger font size on a smaller screen will look very inappropriate to a user, so a solution came into developers, i.e., Em and Rem Values.
Now we will discuss Px, Rem, and Em values.

• PX

Easiest measurement to use in font size but there is a catch that if we use 40px in desktop screen it will be reflected 40 px in mobile view as well and for that,
we have to write media queries and it is a not good practice for resizing the font values.

h1 {
font-size: 40px;
line-height: 135%;
font-family: "sf_pro_displaybold";
color:#222C3A;
}

• EM

It is the font size that has a dependency on its parent element.
For example if we declare font-size=16 px in body so the value
1 em will be 16 px, so if we use 1.5em, it will be 24 in px values.

• REM

So here, the question arises of what the root value in HTML is. It is the best value used for font size as it is directly related to the HTML root. The root values directly allow you to access the highest parent of that child. For example, If we are giving 8px in the root, it will be multiplied, and as well as it will be responsive according to the screen size as the root values react accordingly to the screen sizes.

h1 {
font-size: 8rem;
line-height: 135%;
font-family: "sf_pro_displaybold";
color:#222C3A;
}

h2 {
font-family: "sf_pro_displaybold";
font-size: 4rem;
line-height: 135%;
color:#222C3A;
}

Fluid

Fluid Typography- The Responsive Fonts. Fluid typography makes the typography responsive as we will move to a more significant to smaller screen or smaller to a bigger screen. In short terms, in fluid typography, the size and other attributes are adjusted accordingly to viewports. So we will check the same article example in the responsive view (Mobile view).

The content has so much information, but still, as a user, I will go back and navigate to other links for a similar type of information because the fonts are not responsive, and it looks so bad. If you have used the best typography but haven't worked on its fluidity. Fluid typography is an idea of managing font size and height with the different screen sizes depending upon container width.

In fluid typography, we use Minimum and Maximum Function. This typography is unique and very tricky in terms of implementation. Viewports units are responsible for fluid typography as viewport units refer percentage of the browser's viewport width.

For example, 1 viewport is 1 percentage of the viewport width, and here percentage is relative to the parent's container width. There are four viewport units. The simplest way to start fluid typography is to give font size to the HTML. For example. So that we have set the value in the root, and whenever we give the size to h1, p, and any other tag, it will be relational to root font size.

Artificial Intelligence is all about making computers think like humans with customer interaction solutions. Click to explore about, AI in Customer Experience and Interaction

History of Fluid Typography

In 2013-14 this came into the responsive design market as most browsers were compatible with fluid typography, but Internet Explorer was not allowed it at that particular time. So developers and designers were not able to use it.

In 2016-17, most browsers were compatible, but some developers find an accessibility problem with fluid typography.

Getting Started with Fluid Typography

In this point, we will learn about the two methods of the Fluid Typography.

1. CSS Media Queries
2. Clamp Function.

CSS Media Queries

Before moving on to this topic, you should have some basic knowledge about CSS Media queries. So for that, let me give you some basic knowledge about Media Queries.

FAQ's

What are media queries?

It is the process or way to make your content responsive for different screen size’s like 768 px , 1023px , 2550px , 480px.

How do we use media queries?

Now the basic syntax and way to use media query is:

@media(max-width:767px)
{
nav.react-header ul {
flex-direction: column;
}
nav.react-header ul li {
justify-content: flex-start;
}
nav.react-header {
display: none;
}
}

Now here, Media refers to the screen, and Max-width: 767 refers to the size of the Screen. In this we are making responsive till max-width: 767px. But if we want to go for particular screen size, we can use it as

@media(min-width:767px) and (max-width:1023px)
{
nav.react-header ul {
flex-direction: column;
}
nav.react-header ul li {
justify-content: flex-start;
}
nav.react-header {
display: none;
}
}

In the above example, we are making responsive from 767 to 1023 px. So here I give you a small introduction about the media queries. So now we will get back to our topic CSS media queries.

After learning about media queries, the first question arises: Can we use Vw or Vh properties for the fonts?. VW refers to the Viewport width, and Vh refers to the ViewPort height. For example, if we use like:

p{
font-size: 2vw;
}

So what 2vw will do is that. It is 2% of Viewport's width. If the Screen Size is 1000px, the font size will become 20px, and if the screen width is 400px, it will take 8px, which will be very small, and the screen width is 2000px, so it will take 40px, and it will be very large. So here, we cannot use the VW property without media queries. If we use media queries, we can set it accordingly like

@media(max-width:767px)
{
p{
font-size: 3vw;
}
}

@media(min-width:768px)
{
p {
font-size: 20px;
}
}

Now the output will be like

We have to do different calculations and hit and trial methods for the appropriate size in this method. So now we will learn about calc function.

User Acceptance Testing is a process to check the system accepts the requirements of a user or not. Click to explore about, User Acceptance Testing Types and Best Practices

Fluid Typography with Calc Function

We have to define the size in this method, and the CSS's calculation part will be done. The calc function stands for Calculation.

Calc function is used to calculate the expression in the CSS, which can include integer, percentage, length, time, angle, etc.

Calc takes four types of operands:

1. Addition (+)
2. Subtraction (-)
3. Multiplication (*)
4. Division (/)

Note: Before using the calc function, you should remember that operators should be covered with white spaces.

Incorrect:

p{
font-size: (10px-100%);
}

Correct:

p{
font-size: (10px - 100%);
}

So, Calc method is better than the first method, but still, we have to do lots of mathematical calculations. Now we will shift to the Clamp Function.

CSS Clamp Function ()

First, we see the theoretical knowledge of the clamp function and then shift to the practical implementation of the same.

The clamp function is the best example of how CSS keeps evolving and fulfilling the demands of the developers. We have to define the size, and the clamp function itself will do all the mathematical calculations.

The clamp function works on the two bound (Minimum and Maximum Value) and one preferred value. In this case, the desired value has priority, but if the size goes beyond the minimum limit, the minimum value will be used, and if the size goes beyond the maximum limit, the ultimate value will be used. Now we will move to the implementation part.

Products and services are made for the people, and a good understanding of our customer base psychology will help build successful products. Click to explore about, Empathy Mapping Strategy and Benefits

Implementation of Fluid Typography with CSS Clamp Function

The Implementation Strategy fo Fluid typography with CSS Clamp function mentioned below;

Basic Syntax

clamp(minimum, preferred, maximum);

Now we will discuss that how can we use this function clamp ()

Let me explain this method with an example.

p{
font-size: clamp(12px, 40px , 200px);
margin-top: 40px;
text-align: center;
}

Now in the above example, what we are doing is we are making 40px as a preferred value on the loaded page and min value 12px and max value 200px, but here is the problem that if we use the values in px so whenever the width goes below 200px, it will always take 40px. It will look terrible on a webpage.

So we can replace the font value 40px with rem value. For example, we are taking 2.4rem.

p{
font-size: clamp(12px, 40px , 200px);
margin-top: 40px;
text-align: center;
}

We can implement clamp in the Image tag, Font-sizes, and many others, But some browsers are still compatible with the Clamp function to use min and max function for non-supportive clamp function.

Clamp function () in Images

But sometimes, you don't want the image to go the full width. You might wish to have some constraints to that width. This is where clamp() can come in handy.

img{
   width:  clamp(800px, 100%, 1200px);
}

This will make the image try to be 100% of the container's width and no smaller than 800 pixels and no larger than 1200 pixels. Normally, I'd take care of this by creating a div that contains the image, but clamp() is letting me put this directly on the image, so that's less, more flexible code.

Browser Support

So here is the syntax for the min and max functions.

h1 {
font-size: clamp(1.75rem, 3vw, 2.1rem);

@supports not (font-size: clamp(1.75rem, 3vw, 2.1rem)) {
font-size: min(max(1.75rem, 3vw), 2.1rem);
}
}

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs. Click here for our Product Design, and User Experience Solutions

What are the Advantages and Disadvantages of Fluid Typography?

Conclusion

Now that conclusion is that do we have to use this or not? In some cases, it can be used in blog pages with more content, lesser cards, and animations. But in some cases, it can be a disaster. It also has lesser browser compatibility and accessibility issues. So most of the developers don't recommend this. It completely depends on the developer and the need of the project that we can use it or not.

• Discover more about Customer Experience and User Experience
• Know More about Usability Testing Methods and Tools