Exploring Typography's Impact through Subtle Changes

Making a Big Impact with small changes

Typography is all around us, from books to signs, websites or our phones. We can define typography as the skill of organizing letters and text to ensure that the content is easy to read, understand and visually attractive to the audience. 

It encompasses the choice of font styles, their visual characteristics, and arrangement, working together to evoke feelings and pass very distinct ideas. In simple terms, Typography gives vitality to displayed words. 

When you visit a website or read a document, what is the first thing that catches your eye? It’s not just the words or the colors; it is also the way the text is presented, that is TYPOGRAPHY. Believe it or not, even small changes in typography can make a big difference in how you feel about what you are reading. For example, Reading a text in Uppercase, passes a message to keep the brain alert, some may interpret such as being demanding or bossy even. 

Typography might sound like a fancy word, but it's all about how the letters and words look on a page. Important Elements of Typography are;

• Font

• Size

• Spacing

• Colors

The Feel of Fonts

Think about fonts as the style(unique personalities) of letters and words. There are fancy ones, simple ones, thin ones, and bold ones. Imagine reading a spooky story in a playful font – it just wouldn't feel right, would it? That's because fonts carry a feeling. A bold font might make you think of something strong and important, while a curvy font could give off a friendly vibe. So, choosing the right font sets the mood for what you're saying.  Just like choosing the right outfit for an occasion, picking the right font sets the tone for what you’re saying. There are different properties of font. These properties fit into two categories: font-based properties and text-based properties. 

Font-based properties include 

• Font Family - property is used to declare which font—as well as which fallback or substitute fonts—should be used to display text

body {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

• Font Style - property accepts four keyword values: normal, italic, oblique, and inherit.

.special {

   font-style: italic;

}

• Line Height - used to declare the distance between two lines of text 

body {

line-height: 22px;

}

Text-based properties include 

• Text Align - property has five values: left, right, center, justify, and inherit to build a flow on the page

p {

  text-align: center;

}

• Text Decoration - property provides a handful of ways to groom text

.note {

 text-decoration: underline;

}

• Text Indent - property can be used to indent the first line of text within an element

p {

  text-indent: 20px;

}

• Text Shadow - property allows us to add a shadow or multiple shadows to text.

p {

  text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);

}

NB - If we’d like to place a shadow on the element as a whole, we can use the Box-shadow property.

• Text Transform - The text-transform property accepts five values: none, capitalize, uppercase, lowercase, and inherit.

p {

  text-transform: uppercase;

}

Size Matters - Not just a number

How big or small the letters are also matters a lot. If the text is too tiny, you might need a magnifying glass to read it. If it's too big, it could feel like someone's shouting at you. Finding the right size is like finding a comfy chair – it's just right when you don't even think about it. So, when you're creating something, think about the people who will read it. Make sure they won't need a microscope or sunglasses to enjoy it.

• Font Size - provides the ability to set the size of text

body {

  font-size: 14px;

}

• Font weight - provide the ability to set the specific weight of text

.bold {

  font-weight: bold;

}

Spacing

Ever tried reading a paragraph that was scrunched together? It's like trying to eat a whole sandwich in one bite – not very enjoyable! Giving your letters and words some space to breathe is super important. It makes reading smoother and more pleasant. You wouldn't want your words to be all squished up, right? So, play around with the spaces between lines and letters until it feels just right.

• Letter Spacing - we can adjust the space between the letters on a page

p {

  letter-spacing: -.5em;

}

• Word Spacing - we can also adjust the space between words within an element 

p {

  word-spacing: .25em;

}

Colors

Yes, even the color of the text matters. Colors have feelings attached to them. Have you noticed how a sunny yellow makes you feel happy, while a deep blue might feel calm? It's the same with text. Choosing the right color can help express the emotion behind your words. Getting rid of the browser defaults and using your own text color immediately begins setting the tone of your page. But be careful – too many colors can make things look like a rainbow explosion. A little goes a long way!

The only property we need to set the color of text is the color property. 

html {

  color: #555;

}

The color property accepts one color value, but in many different formats which includes keywords, hexadecimal values, and RGB, RGBa, HSL, and HSLa values. Hexadecimal values are the most prevalent, as they provide the most control with the least amount of effort.

Hexadecimal - represent a color in RGB format by combining three values – the amounts of red, green and blue in a particular shade of color. Hex color codes start with a pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF(e.g: #FF00FF)

RGB - refers to a system representing the colors used on a digital display screen. Red, green and blue can be combined in various proportions to obtain any color in the visible spectrum. For example, rgb(255, 0, 0)
RGBa - The RGB color model is extended in this specification to include “alpha” to allow specification of the opacity of a color. For example, rgba(23,67,88,0.5)

Subtle Changes, Big Impact

Believe it or not, making tiny tweaks in typography can change how people understand and feel about what they're reading. No matter the project you are working on, remember that typography is like a secret ingredient. It adds flavor and personality to your website.

So, next time you're working on something, take a moment to think about the fonts, sizes, colors, and spacing. Experiment and see how each change influences the way your words come across. With a little typography magic, you can turn an ordinary piece of text into something truly extraordinary.