In 2019 we published a style guide for the PublicLab.org website, to set some clear design conven...
Public Lab is an open community which collaboratively develops accessible, open source, Do-It-Yourself technologies for investigating local environmental health and justice issues.
7 CURRENT | warren |
November 26, 2019 17:31
| almost 5 years ago
In 2019 we published a style guide for the PublicLab.org website, to set some clear design conventions, and improve consistency. This guide is designed to support coders, designers, and writers building and designing pages on PublicLab.org. Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! LogosSee this page for logos in different sizes and formats Flyer GeneratorYou can use this flyer generator to make graphics following these guidelines: http://jywarren.github.io/flyer/ Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. IconsOn our website, we use Font Awesome icons in version 4.5+ -- https://fontawesome.com/v4.7.0/ Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
6 | liz |
September 12, 2019 16:31
| about 5 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! LogosSee this page for logos in different sizes and formats Flyer GeneratorYou can use this flyer generator to make graphics following these guidelines: http://jywarren.github.io/flyer/ Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. IconsOn our website, we use Font Awesome icons in version 4.5+ -- https://fontawesome.com/v4.7.0/ Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
5 | warren |
September 26, 2018 14:47
| about 6 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! LogosSee this page for logos in different sizes and formats Flyer GeneratorYou can use this flyer generator to make graphics following these guidelines: http://jywarren.github.io/flyer/ Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. IconsOn our website, we use Font Awesome icons in version 4.5+ -- https://fontawesome.com/v4.7.0/ Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
4 | warren |
July 26, 2018 17:57
| over 6 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! LogosSee this page for logos in different sizes and formats Flyer GeneratorYou can use this flyer generator to make graphics following these guidelines: http://jywarren.github.io/flyer/ Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
3 | warren |
July 09, 2015 16:05
| over 9 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! GeneratorYou can use this flyer generator to make graphics following these guidelines: http://jywarren.github.io/flyer/ Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
2 | warren |
April 13, 2015 15:48
| over 9 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
1 | warren |
April 02, 2015 17:22
| over 9 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert | |
0 | warren |
April 02, 2015 17:21
| over 9 years ago
Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! Fonts, sizesWe use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the League of Movable Type. Text slideFor text slides, 80% dark grey for lead title and 60% grey for subtitles works well: A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: Slide with imageImages can be full-bleed with no margins, with white text over them. One image per slide is preferred. If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: Images
Here are a few examples of nice images to run text over: Using difficult imagesSome images are great but it's still hard to get text to stand out over them: You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: Print documentsLetter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. Images can fit into this with 0.6 inch padding below: |
Revert |