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.
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.
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.
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✌.️
