Event Begins: Thursday, November 14, 2024 4:00pm
Location: North Quad
Organized By: Figma Learning for User Experience (FLUX)

---

In this first workshop session, we learn the basics of colors and typography, and by the end you’ll have a useable fully functional styles set up in Figma that you can use in any project.

All FLUX workshops ensure you walk away with something you can use for your own projects.

———
FLUX stands for Figma Learning for User Experience. We are a group of students passionate about user experience design and Figma.

Our mission is to create events and activities that support the learning of Figma and UX for students of all levels of expertise and backgrounds across the University of Michigan.

Typography is a core element of web design that impacts how easily people can read and engage with your content.  Your message and brand identity stand out when you have a font that draws the eye in.  When you know how to use web typography principles to grab attention, you can transform a good-looking website...

The post Mastering the Art of Web Typography: Enhancing Readability and Brand Identity appeared first on noupe.

Typography designs are most beautiful type of artwork, you can get inspiration from typography design, creative typography design for you to get artistic ideas.

View and Vote

Finding the right typeface for a logo is a challenge and can be a very time-consuming process that requires both creativity and a practical approach. Levi Honing provides the essential background and tools to enhance your typography journey and apply this knowledge to your logo design. Let’s dive deep to learn how to create a logo that is not only expressive but also purposeful and well-thought-out.

Brand Builders Summit 2024 wins ‘Typography Honors’ at Awwwards for outstanding typography and design, attracting 60K+ visitors globally. 2025 waitlist open!

Paul Kafasis returns to the show to talk about Friday Night Baseball, Rogue Amoeba’s new Audio Hijack 4 release, and a bit of speculation on WWDC.

Refresh Seattle – February 2014 First off, what is Refresh? According to their website… Refresh Seattle is a community of designers and developers working to refresh the creative, technical, and professional culture of New Media endeavors in the Seattle/Puget Sound area. Promoting design, technology, usability, and standards, Refresh Seattle is a part of Refresh and […]

Hayden Library - PN1995.9.S26 A44 2018

Kunz, Willi

Friedl, Friedrich

Pamental, Jason, author

This is a quick experiment that reproduces an image from I Love Typography using semantic HTML, CSS 2.1, a little CSS3. Along the way, I learnt about a few modern browser bugs and inconsistencies.

• See the demo: CSS typography experiment.
• See the bugs: Some new CSS 2.1 and CSS3 bugs in modern browsers.

I came across an image on I Love Typography that I thought could be reproduced using only semantic HTML and CSS.

The idea was to reproduce the image from simple markup, and to rely as much as possible on what can be achieved with CSS.

This is the HTML I ended up using.

<p>I love <strong>typography</strong> <em>a lot</em></p>

This is the CSS that controls the presentation of that content.

body {
  padding: 0;
  margin: 0;
  font-family: Times New Roman, serif;
  background: #000;
}

p {
  position: relative;
  width: 1100px;
  padding: 100px 0 0;
  margin: 0 auto;
  font-size: 175px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -13px;
  color: #0caac7;
  transform: rotate(-20deg);
}

/* "i" */
p:first-letter {
  float: left;
  margin: -137px -20px 0 0;
  font-size: 880px;
  line-height: 595px;
  text-transform: lowercase;
}

/* "love" */
p:first-line {
  font-size: 200px;
}

/* "typography" */
p strong {
  display: block;
  margin: -80px 0 0;
  font-weight: normal;
  letter-spacing: -2px;
  text-transform: capitalize;
}

p strong:first-letter {
  margin-right: -30px;
  color: #fff;
}

/* "a lot" */
p em {
  position: absolute;
  z-index: 10;
  top: 100px;
  left: 147px;
  width: 136px;
  overflow: hidden;
  padding-left: 64px;
  font-size: 200px;
  font-style: normal;
  text-transform: lowercase;
  color: #fff;
}

p em:first-letter {
  float: left;
  margin: 130px 0 0 -55px;
  font-size: 80px;
  font-style: italic;
  line-height: 20px;
  color: #fff;
}

/* create the heart shape */
p:before,
p:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 225px;
  left: 120px;
  width: 75px;
  height: 50px;
  background: #000;
  transform: rotate(45deg);
  border-radius: 25px 0 0 30px;
}

p:after {
  left: 138px;
  transform: rotate(-45deg);
  border-radius: 0 25px 30px 0;
}

/* hide the tip of the "t" from "a lot" */
p strong:before {
  content: "";
  position: absolute;
  z-index: 11;
  top: 205px;
  left: 341px;
  width: 7px;
  height: 7px;
  background: #000;
  border-radius: 7px;
}

The final CSS typography experiment approximates the original image in all modern browsers that support the CSS3 properties of border-radius and transform.

Some browsers render type (especially after rotational transformations) better than others. Note that all the screenshots are taken from browsers running on Windows Vista OS.

Browser bugs and inconsistencies

I’ve put together a small test page to highlight some new CSS 2.1 and CSS3 bugs in modern browsers. It includes two new CSS 2.1 bugs in Internet Explorer 8.