Make a selection
What would you like for lunch?
This page addresses many separate projects as one:
AaBbCcDdEe
1234567890?!
Zilla Slab— for headings
AaBbCcDdEe
1234567890?!
Libre Franklin— for body copy
The type scale enables you to indicate content hierarchy. These sizes and styles are designed to balance content density with increased readability.
Name | Typeface | Weight | Size | Lh |
---|---|---|---|---|
Tiny | Libre Franklin | Regular | 12px | 16px |
Body Small | Libre Franklin | Regular | 14px | 24px |
Body | Libre Franklin | Regular | 16px | 24px |
Body Large | Libre Franklin | Regular | 18px | 32px |
Heading XS | Zilla Slab | Bold | 21px | 32px |
Heading Small | Zilla Slab | Bold | 24px | 40px |
Heading | Zilla Slab | Bold | 28px | 48px |
Heading Medium | Zilla Slab | Bold | 32px | 56px |
Heading Large | Zilla Slab | Bold | 36px | 64px |
Heading XL | Zilla Slab | Bold | 48px | 72px |
Display | Zilla Slab | Regular | 60px | 80px |
Display XL | Zilla Slab | Regular | 72px | 96px |
The number of characters per line influences readability. Studies indicate the following guidelines for English:
45-75 characters (desktop) or 35-40 characters (mobile) per line iswidely regarded as a satisfactory line length.
Around 66 characters (desktop) or 39 characters (mobile) is optimal.
More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.
Studies show that different aspects of reading performance such as comprehension, reading speed, method of movement, and eye movements are affected by changes in line length.
Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
Follow the WCAG 2.0 Level AA guidelines to ensure proper color contrast.
These are the splashes of color that should appear the most in the UI, and are the ones that determine the overall "look". Best for things like primary actions, links, navigation items, icons, accent borders, or text that should be emphasized.
These colors should be used fairly conservatively throughout the UI to avoid overpowering the primary colors. Used an element needs to stand out, or to reinforce things like error states or positive trends with the appropriate semantic color.
A beautiful and harmonious color palate will draw the user in and invite interaction; and is therefore critical to good UX.
Petroglyph Creative listens carefully to clients from the start, creating secure, flexible websites configured to your workflows and goals. We start simply and refuse to make things complex when they don’t need to be, exploring options for your company from many angles, because we love to help those who help others.
Here's another text paragraph. How does the spacing look? Does it look right on mobile? can we make improvements for middle-width devices? Big screens, small screens all about the thread memes.
Too many businesses rely on limited blog and web brochure platforms that are often risky, waste money and limit growth over time. They can be impersonal and stiff and work against customer-facing needs. We believe that although the web is an automated, template-laden landscape, understanding the way people interact, and communicate with companies is our most valuable asset.
Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
Petroglyph Creative enables clients to publish anything they want, whenever they want, as they desire to do so by giving small to medium sized organizations the ultimate flexibility and scaling web development options to fit growing needs. We have implemented hundreds of additional features and changes seamlessly into clients’ websites since 2010.
Petroglyph Creative offers a combined 40+ years of web problem solving for clients and is led by Caroline Blaker, a nationally renowned “tech lead” who guides efficient, focused contractors with her fifteen years of web creation. Caroline has twelve years’ experience programming in Wordpress, and has utilized ExpressionEngine for the benefit of her clients since version 1.6.3!
This field has an error.
This field has an error.
What would you like for lunch?