Day 9: Font Face & Animations

Font Face

Typography is the art and science of expressing hierarchy, brand presence, and personality. Choosing the right typography can make or break designs for websites. Serif typefaces have a small shape or projection which appears at the end of the character, typically used for long blocks of text. Sans-serif typefaces do not have the projection and are better for headings and large text. We can scale our font sizes on our pages to give them a professional look, increasing or decreasing the font size by the same ratio each time.

Probably not advisable to write your website copy in “Redacted Script”.

Transition & Transform

We want our websites to be interactive and look nice, animations provide users with a better UI and UX. We can use the CSS transition property to make sure that an element's transition between two states is smooth. We may want to change an element's style or visibility and we can use a transition to make this change appear more intuitive. We have to provide the duration for the transition and we can also specify the property we want to transition and a transition delay. If we want to move an element on the page we can use CSS transforms. We can use functions to transform our elements in various ways. Some of the most common functions are translated, scale, rotate, and skew.

Transforming some elements.

Keyframe Animations

Keyframe animations allow more control of CSS animations, they can run on page load and allow us to loop our animations. Keyframes allow animating or changing properties of an element at key points in the animation's timeline, we can use the “from” keyword to denote the start of the animation(0%), and the “to” keyword to denote the end of the animation(100%). If we need to change styles in between those states we can also specify exact percentages.

An animation to make an element visible.

Closing

We can use typography and animations to create more appealing and interactive websites! Tomorrow we will be covering responsive design and that will be our last topic for HTML & CSS before diving into Javascript✌.️

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store