Member Avatar for soley

Yes, this is homework.

Yes, I know how to make this layout.

But what I don't know is the font used. I'm supposed to make the html skeleton look as close to this screenshot using css. Easy, right? Yeah, I know. Obviously I know it's a sans-serif font, but is it Ariel?

I'm really, really bad with identifying font faces just by looking at them. Even if you don't want to tell me the exact type of font, could I get the first letter of the type of font used here?

http://imgur.com/RCnZU.gif

Thanks, guys (& gals)

  • 3 Contributors
  • 3 Replies
  • 72 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Matching a typeface from a small screenshot is often unreliable. Anti-aliasing, OS font hinting and image size change how glyphs appear, so visually similar sans-serifs can look identical at low resolution. In this thread asked for the face, and replies from and pointed to common UI choices; a pragmatic workflow works better than chasing an exact name.

Practical steps: enlarge the image and examine distinctive letters, run the screenshot through a font-identification service to generate candidates, and overlay candidate fonts in an editor to compare metrics. If the goal is "close enough" for a page mock, tune CSS properties (font-family stack, font-size, font-weight, letter-spacing and line-height) rather than relying on a single face. For pixel-close results across platforms, use a licensed webfont or a hosted webfont service.

A simple, robust CSS stack and a couple of rendering tweaks:

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

See the CSS font-family reference on MDN for syntax and behavior (MDN font-family). If embedding a specific font is required, use a webfont workflow such as Google Fonts (Google Fonts getting started). Cross-platform rendering differences mean an embedded webfont gives the most consistent visual match.

Recommended Answers

All 3 Replies

Member Avatar for Member #334542

Yes, that is Arial

Member Avatar for soley

Yes, that is Arial

That's what I thought.

It just looks so....horrible.

Is that just me or does it look ugly to anyone else?

Member Avatar for MJ Pieterse

i prefer using verdana because it reads easier on screen for me. but if you have to keep it consistent for your homework project then rather stick to arial :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.