Hand Lettering for Responsive Web Design

Considerations for Hand Lettering

Does it Fit the Brand?

  • unique
  • genuine
  • personal
  • trendy
  • vintage
  • playful
  • elegant
  • natural

Will it Scale or Change Orientation?

Is it Legible?

Implementation Options

Bitmap Images

Pros:

  • completely custom
  • easily scalable
  • easy to animate
  • simple to implement

Cons:

  • limited scaling
  • robots can’t read them
  • slower load times

SVG Images

Pros:

  • completely custom
  • easy to animate
  • infinitely scalable

Cons:

  • slow load times when animated
  • robots can’t read them
  • unsupported by IE8 and lower

Web Fonts

Pros:

  • easily implemented
  • quick to load
  • robots can read it
  • scalable

Cons:

  • complex layouts more difficult
  • difficult to customize

In Practice

Market Street Catch

Winshape Camps

Pane

Conclusion

  1. Does it fit the brand?
  2. Will it be legible and responsive?
  3. How will it be implemented?

--

--

--

A designer writing about design and maybe some other things. Senior Growth Designer at Parabol

Love podcasts or audiobooks? Learn on the go with our new app.

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
Alicia Cressall

Alicia Cressall

A designer writing about design and maybe some other things. Senior Growth Designer at Parabol

More from Medium

Sass Documentation

Gutenberg Block Field Validation

Which Service is more Lucrative, Web Design and Development Service?

Web design and Development Services

Axure Tutorial: Use JavaScript in Axure to Make Data Visualization Chart