Responsive Text: Create a Responsive Google text logo with HTML & CSS

 At times; using a text logo for your simple HTML website is pretty easier than going through a lot to creating an image to be used as the logo. Also, images turn to lose quality when being compressed to a certain point. Another reason you may want to use text as the log of your website is to reduce load time.

In today's short tutorial, we will be telling you how to create responsive text. And we are going to apply the idea of responsive text to create a simple stylish Google logo using just HTML and CSS.

What is a text logo?

The concept of text log might differ from person to person. Since one can make an image with simple text and use it as a logo. But in our context, we are referring to using stylish text as the logo of your HTML website.

We will instead of replacing the site title with an Image log, style it to appear as a logo using CSS.

Creating our stylish responsive Google text logo

Note: This example can be applied to any HTML website. You will simply have to replace your site title on the header section of your theme with the sample HTML code we have here. As this is an example with Google, you can always customize the colours and even font types and sizes to match the needs of your website or portfolio page.

The HTML code

<div class='logo-txt'><span class='logo-txt g'>G</span><span class='logo-txt o'>o</span><span class='logo-txt oo'>o</span><span class='logo-txt g'>g</span><span class='logo-txt l'>l</span><span class='logo-txt e'>e</span>
</div>

CSS code

To make the text to be styled as a logo responsive, we have used the "viewport width" unit (VW) for the font size.

You can still use CSS media query but this will be adding extra code and workload.

.logo-txt{
font-size:30vw;
font-weight:bold;
text-align:center;
margin:2px 0px 2px 0px;
}
.logo-txt .g{
color: #4287f5;
}
.logo-txt .o, .logo-txt .e{
color: #d62e18;
}
.logo-txt .oo{
color: #f2750f;
}
.logo-txt .l{
color: #0b962b;
}

Application

Let's take a look at the demo website from here: https://bloggercodepen.blogspot.com/p/sample-website.html

The site title is "My Website". One could decide to add an image logo for the site. But let say the site name was 'Google".

Will then apply the following HTML code inside the title tag to replace the header text instead of an image.

Our Text logo HTML code:

<div class='logo-txt'><span class='logo-txt g'>G</span><span class='logo-txt o'>o</span><span class='logo-txt oo'>o</span><span class='logo-txt g'>g</span><span class='logo-txt l'>l</span><span class='logo-txt e'>e</span></div>
<

Now on our sample website, we have the site name or logo area with code:

<div class="header">
  <h1>My Website</h1>
</div>

Now what we have to do is replace the "My Website" inside the h1 tag with the previous HTML code for the stylish text to be used as the logo.

<div class="header">
  <h1><div class='logo-txt'><span class='logo-txt g'>G</span><span class='logo-txt o'>o</span><span class='logo-txt oo'>o</span><span class='logo-txt g'>g</span><span class='logo-txt l'>l</span><span class='logo-txt e'>e</span</div>></h1>
</div>

Next, we add the log text CSS code to our websites header section.

Once done, the final website with stylish responsive text as the logo will look like this: https://bloggercodepen.blogspot.com/p/finish-sample-site-with-stylish-text.html